From ad9b36f61da2d9d1ac101ebe8b71660aebdd0293 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Mon, 27 Jan 2025 16:01:33 +0000
Subject: [PATCH] Update types.ts

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 packages/canon/src/types.ts | 76 ++++++++++++++-----------------------
 1 file changed, 28 insertions(+), 48 deletions(-)

diff --git a/packages/canon/src/types.ts b/packages/canon/src/types.ts
index ee5d954576..3a6b55f13b 100644
--- a/packages/canon/src/types.ts
+++ b/packages/canon/src/types.ts
@@ -37,27 +37,7 @@ export type AsProps =
 export type Breakpoint = 'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
 /** @public */
-export type Responsive<T> = T | Partial<Record<Breakpoint, T>>;
-
-/** @public */
-export type Space =
-  | '0.5'
-  | '1'
-  | '1.5'
-  | '2'
-  | '3'
-  | '4'
-  | '5'
-  | '6'
-  | '7'
-  | '8'
-  | '9'
-  | '10'
-  | '11'
-  | '12'
-  | '13'
-  | '14'
-  | string;
+export type Space = 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 
 /** @public */
 export type Display = 'none' | 'flex' | 'block' | 'inline';
@@ -99,35 +79,35 @@ export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto';
 
 /** @public */
 export interface SpaceProps {
-  m?: Responsive<Space>;
-  mb?: Responsive<Space>;
-  ml?: Responsive<Space>;
-  mr?: Responsive<Space>;
-  mt?: Responsive<Space>;
-  mx?: Responsive<Space>;
-  my?: Responsive<Space>;
-  p?: Responsive<Space>;
-  pb?: Responsive<Space>;
-  pl?: Responsive<Space>;
-  pr?: Responsive<Space>;
-  pt?: Responsive<Space>;
-  px?: Responsive<Space>;
-  py?: Responsive<Space>;
+  margin?: Space | Partial<Record<Breakpoint, Space>>;
+  marginBottom?: Space | Partial<Record<Breakpoint, Space>>;
+  marginLeft?: Space | Partial<Record<Breakpoint, Space>>;
+  marginRight?: Space | Partial<Record<Breakpoint, Space>>;
+  marginTop?: Space | Partial<Record<Breakpoint, Space>>;
+  marginX?: Space | Partial<Record<Breakpoint, Space>>;
+  marginY?: Space | Partial<Record<Breakpoint, Space>>;
+  padding?: Space | Partial<Record<Breakpoint, Space>>;
+  paddingBottom?: Space | Partial<Record<Breakpoint, Space>>;
+  paddingLeft?: Space | Partial<Record<Breakpoint, Space>>;
+  paddingRight?: Space | Partial<Record<Breakpoint, Space>>;
+  paddingTop?: Space | Partial<Record<Breakpoint, Space>>;
+  paddingX?: Space | Partial<Record<Breakpoint, Space>>;
+  paddingY?: Space | Partial<Record<Breakpoint, Space>>;
 }
 
 /** @public */
 export interface UtilityProps extends SpaceProps {
-  alignItems?: Responsive<AlignItems>;
-  border?: Responsive<Border>;
-  borderRadius?: Responsive<BorderRadius>;
-  colEnd?: Responsive<Columns | 'auto'>;
-  colSpan?: Responsive<Columns | 'full'>;
-  colStart?: Responsive<Columns | 'auto'>;
-  columns?: Responsive<Columns>;
-  display?: Responsive<Display>;
-  flexDirection?: Responsive<FlexDirection>;
-  flexWrap?: Responsive<FlexWrap>;
-  gap?: Responsive<Space>;
-  justifyContent?: Responsive<JustifyContent>;
-  rowSpan?: Responsive<Columns | 'full'>;
+  alignItems?: AlignItems | Partial<Record<Breakpoint, AlignItems>>;
+  border?: Border | Partial<Record<Breakpoint, Border>>;
+  borderRadius?: BorderRadius | Partial<Record<Breakpoint, BorderRadius>>;
+  colEnd?: Columns | 'auto' | Partial<Record<Breakpoint, Columns | 'auto'>>;
+  colSpan?: Columns | 'full' | Partial<Record<Breakpoint, Columns | 'full'>>;
+  colStart?: Columns | 'auto' | Partial<Record<Breakpoint, Columns | 'auto'>>;
+  columns?: Columns | Partial<Record<Breakpoint, Columns>>;
+  display?: Display | Partial<Record<Breakpoint, Display>>;
+  flexDirection?: FlexDirection | Partial<Record<Breakpoint, FlexDirection>>;
+  flexWrap?: FlexWrap | Partial<Record<Breakpoint, FlexWrap>>;
+  gap?: Space | Partial<Record<Breakpoint, Space>>;
+  justifyContent?: JustifyContent | Partial<Record<Breakpoint, JustifyContent>>;
+  rowSpan?: Columns | 'full' | Partial<Record<Breakpoint, Columns | 'full'>>;
 }