Release (#14)

bin/ret.d.ts

@@ -1,13 +1,6 @@
-// regenerate by running
-// npx @chakra-ui/cli tokens path/to/your/theme.(js|ts)
-import type { BaseThemeTypings } from './shared.types.js';
+import type { DimensionValue } from 'react-native';
 
-export interface ThemeTypings extends BaseThemeTypings {
-  blur: string & {};
-  borders: string & {};
-  borderStyles: string & {};
-  borderWidths: string & {};
-  breakpoints: string & {};
+export interface ThemedTypings {
   colors:
     | 'white'
     | 'black'
@@ -62,18 +55,15 @@ export interface ThemeTypings extends BaseThemeTypings {
     | 'blue600'
     | 'blue700'
     | 'blue800'
-    | 'blue900'
-    | (string & {});
-  colorSchemes: string & {};
-  fonts: string & {};
-  fontSizes: string & {};
-  fontWeights: string & {};
-  layerStyles: string & {};
-  letterSpacings: string & {};
-  lineHeights: string & {};
-  radii: string & {};
-  shadows: string & {};
+    | 'blue900';
+
+  radii: number | `${number}` | `${number}px` | `${any}px` | '1' | '2' | 'sm' | 'md';
+
   sizes:
+    | DimensionValue
+    | `${number}`
+    | `${number}px`
+    | `${any}px`
     | '0'
     | '1'
     | '2'
@@ -97,9 +87,12 @@ export interface ThemeTypings extends BaseThemeTypings {
     | '40'
     | '48'
     | 'px'
-    | '0.5'
-    | (string & {});
+    | '0.5';
   space:
+    | DimensionValue
+    | `${number}`
+    | `${number}px`
+    | `${any}px`
     | '0'
     | '-0'
     | '1'
@@ -147,10 +140,5 @@ export interface ThemeTypings extends BaseThemeTypings {
     | 'px'
     | '-px'
     | '0.5'
-    | '-0.5'
-    | (string & {});
-  textStyles: string & {};
-  transition: string & {};
-  zIndices: string & {};
-  components: {};
+    | '-0.5';
 }

bin/theme-gen.mjs

@@ -6,6 +6,7 @@ import fs from 'fs-extra';
 const join = path.join;
 const filename = path.basename(__filename);
 const _printTag = 'Theme Gen' || filename;
+$.verbose = false;
 
 function exist(path) {
   return fs.existsSync(path);
@@ -159,7 +160,6 @@ try {
   result = result.replace(/layerStyles.*/, '');
   result = result.replace(/letterSpacings.*/, '');
   result = result.replace(/lineHeights.*/, '');
-  result = result.replace(/radii.*/, '');
   result = result.replace(/shadows.*/, '');
   result = result.replace(/textStyles.*/, '');
   result = result.replace(/transition.*/, '');
@@ -177,6 +177,7 @@ try {
     'sizes:',
     'sizes: DimensionValue | `${number}` | `${number}px` | `${any}px` | ',
   );
+  result = result.replace('radii:', 'radii: number | `${number}` | `${number}px` | `${any}px` | ');
 
   result = result.replace(/\|[\s ]*\n/g, ';');
 

bin/theme.ts

@@ -1,3 +1,5 @@
+import type { ThemedDict } from '../src';
+
 const unit = 4;
 
 const space = {
@@ -86,4 +88,10 @@ export default {
   },
   space,
   sizes: { ...space },
-};
+  radii: {
+    1: 4,
+    2: 8,
+    sm: 48,
+    md: 12,
+  },
+} satisfies ThemedDict;

doc/docs/usage/configuration.mdx

@@ -1,9 +1,9 @@
 ---
 sidebar_position: 2
-title: Settings
+title: Configuration
 ---
 
-# Settings
+# Configuration
 
 ## 1. `StyledSystemProvider` declaration
 
@@ -57,6 +57,7 @@ const AppTheme = {
   },
   space: { ...spacing, sidePadding: 0 /* injected from outer */ },
   sizes: { ...spacing, sidePadding: 0 /* injected from outer */ },
+  radii: { sm: 4, md: 8, ... },
 }
 
 export default AppTheme;

doc/docs/usage/sx-props.mdx

@@ -79,6 +79,21 @@ maxHeight: Token<'sizes'>;
 maxH: Token<'sizes'>; // maxHeight
 ```
 
+## radii
+
+```tsx
+borderRadius: Token<'radii'>;
+radius: Token<'radii'>; // borderRadius
+borderTopLeftRadius: Token<'radii'>;
+topLeftRadius: Token<'radii'>; // borderTopLeftRadius
+borderTopRightRadius: Token<'radii'>;
+topRightRadius: Token<'radii'>; // borderTopRightRadius
+borderBottomLeftRadius: Token<'radii'>;
+bottomLeftRadius: Token<'radii'>; // borderBottomLeftRadius
+borderBottomRightRadius: Token<'radii'>;
+bottomRightRadius: Token<'radii'>; // borderBottomRightRadius
+```
+
 ## ViewStyle & ViewProps
 
 ```tsx
@@ -94,9 +109,11 @@ flexBasis: ViewStyle['flexBasis'];
 alignSelf: ViewStyle['alignSelf'];  
 position: ViewStyle['position'];  
 pos: ViewStyle['position']; // position  
-borderWidth: ViewStyle['borderWidth'];  
-borderRadius: ViewStyle['borderRadius'];  
-radius: ViewStyle['borderRadius']; // borderRadius  
+borderWidth: ViewStyle['borderWidth'];
+borderTopWidth: ViewStyle['borderTopWidth'];
+borderRightWidth: ViewStyle['borderRightWidth'];
+borderBottomWidth: ViewStyle['borderBottomWidth'];
+borderLeftWidth: ViewStyle['borderLeftWidth'];
 opacity: ViewStyle['opacity'];  
 overflow: ViewStyle['overflow'];  
 transform: ViewStyle['transform'];  

doc/docs/usage/token.mdx

@@ -13,3 +13,5 @@ This page is working in progress.
 ## space
 
 ## sizes
+
+## radii

doc/i18n/ko/docusaurus-plugin-content-docs/current/usage/configuration.mdx

@@ -57,6 +57,7 @@ const AppTheme = {
   },
   space: { ...spacing, sidePadding: 0 /* injected from outer */ },
   sizes: { ...spacing, sidePadding: 0 /* injected from outer */ },
+  radii: { sm: 4, md: 8, ... },
 }
 
 export default AppTheme;

src/@types/SxProps.ts

@@ -76,6 +76,10 @@ export const _allPropList = [
   'position',
   'pos',
   'borderWidth',
+  'borderTopWidth',
+  'borderRightWidth',
+  'borderBottomWidth',
+  'borderLeftWidth',
   'borderRadius',
   'radius',
   'opacity',
@@ -85,6 +89,10 @@ export const _allPropList = [
   'display',
   'elevation',
   'zIndex',
+  'borderTopLeftRadius',
+  'borderTopRightRadius',
+  'borderBottomLeftRadius',
+  'borderBottomRightRadius',
 ] satisfies (SxPropKeys | 'style')[];
 
 type ThemedColorTokenProps = {
@@ -150,6 +158,19 @@ type ThemedSizeTokenProps = {
   maxH: Token<'sizes'>; // maxHeight
 };
 
+type ThemedRadiiTokenProps = {
+  borderRadius: Token<'radii'>;
+  radius: Token<'radii'>; // borderRadius
+  borderTopLeftRadius: Token<'radii'>;
+  topLeftRadius: Token<'radii'>; // borderTopLeftRadius
+  borderTopRightRadius: Token<'radii'>;
+  topRightRadius: Token<'radii'>; // borderTopRightRadius
+  borderBottomLeftRadius: Token<'radii'>;
+  bottomLeftRadius: Token<'radii'>; // borderBottomLeftRadius
+  borderBottomRightRadius: Token<'radii'>;
+  bottomRightRadius: Token<'radii'>; // borderBottomRightRadius
+};
+
 type BaseSxProps = Partial<
   {
     flex: ViewStyle['flex'];
@@ -165,8 +186,10 @@ type BaseSxProps = Partial<
     position: ViewStyle['position'];
     pos: ViewStyle['position']; // position
     borderWidth: ViewStyle['borderWidth'];
-    borderRadius: ViewStyle['borderRadius'];
-    radius: ViewStyle['borderRadius']; // borderRadius
+    borderTopWidth: ViewStyle['borderTopWidth'];
+    borderRightWidth: ViewStyle['borderRightWidth'];
+    borderBottomWidth: ViewStyle['borderBottomWidth'];
+    borderLeftWidth: ViewStyle['borderLeftWidth'];
     opacity: ViewStyle['opacity'];
     overflow: ViewStyle['overflow'];
     transform: ViewStyle['transform'];
@@ -178,7 +201,8 @@ type BaseSxProps = Partial<
     center?: boolean; // shortcut - justifyContent, alignItems: center
   } & ThemedSpaceTokenProps &
     ThemedSizeTokenProps &
-    ThemedColorTokenProps
+    ThemedColorTokenProps &
+    ThemedRadiiTokenProps
 >;
 
 export type SxProps = BaseSxProps & { sx?: BaseSxProps };

src/@types/ThemedDict.ts

@@ -1,12 +1,14 @@
-import type { Token } from './Token';
+import type { DimensionValue } from 'react-native';
 
 export interface ThemedDict {
-  space: Record<string | number, Token<'space'>>;
-  sizes: Record<string | number, Token<'sizes'>>;
+  space: Record<string | number, DimensionValue>;
+  sizes: Record<string | number, DimensionValue>;
   colors: Record<string, string>;
+  radii: Record<string | number, number>;
 }
 export const emptyThemedDict = {
   space: {},
   colors: {},
   sizes: {},
+  radii: {},
 } satisfies ThemedDict;

src/@types/ThemedTypings.ts

@@ -4,4 +4,5 @@ export interface ThemedTypings {
   space: DimensionValue | `${number}` | `${number}px` | `${any}px`;
   sizes: DimensionValue | `${number}` | `${number}px` | `${any}px`;
   colors: string;
+  radii: number | `${number}` | `${number}px` | `${any}px`;
 }

src/hook/useSx.test.ts

@@ -25,6 +25,7 @@ const emptyTheme: ThemedDict = {
   colors: {},
   sizes: {},
   space: {},
+  radii: {},
 };
 
 const baseTheme: ThemedDict = {
@@ -37,8 +38,14 @@ const baseTheme: ThemedDict = {
     1: 4,
     2: 8,
     pagePadding: 20,
+    full: '100%',
+  },
+  space: { 1: 4, 2: 8, pagePadding: 20, full: '100%' },
+  radii: {
+    sm: 8,
+    md: 12,
+    lg: 20,
   },
-  space: { 1: 4, 2: 8, pagePadding: 20 },
 };
 
 describe('simple usages', () => {
@@ -83,6 +90,10 @@ describe('edge case', () => {
 
     return expect(viewStyle({ width: 1 })).toEqual({ width: 4 });
   });
+
+  it("gap doesn't accept not number value", () => {
+    expectResult(baseTheme, { gap: 'full' as any }, {});
+  });
 });
 
 describe('space parsing', () => {
@@ -118,6 +129,10 @@ describe('space parsing', () => {
   it('minus prefixed string', () => {
     expectResult(baseTheme, { m: '-pagePadding' as any }, { margin: -20 });
   });
+
+  it('gap accepts number value', () => {
+    expectResult(baseTheme, { gap: 1 }, { gap: 4 });
+  });
 });
 
 describe('sizes parsing', () => {
@@ -153,3 +168,21 @@ describe('style parse priority', () => {
     expectResult(emptyTheme, { style: { width: 1 }, viewStyleSx: { w: 2 } }, { width: 2 });
   });
 });
+
+it('border widths should be match', () => {
+  expectResult(
+    emptyTheme,
+    { borderTopWidth: 1, borderWidth: 1 },
+    { borderTopWidth: 1, borderWidth: 1 },
+  );
+
+  expectResult(baseTheme, { borderLeftWidth: 1 }, { borderLeftWidth: 1 });
+});
+
+describe('radii', () => {
+  it('simple case check', () => {
+    expectResult(baseTheme, { topLeftRadius: '1px' }, { borderTopLeftRadius: 1 });
+    expectResult(baseTheme, { topLeftRadius: '1' }, { borderTopLeftRadius: 1 });
+    expectResult(baseTheme, { topLeftRadius: 'sm' as any }, { borderTopLeftRadius: 8 });
+  });
+});

src/internal/util/fillNullishThemeKey.ts

@@ -5,6 +5,7 @@ export const fillNullishThemeKey = (theme: Partial<ThemedDict>): ThemedDict => {
     colors: {},
     space: {},
     sizes: {},
+    radii: {},
     ...theme,
   };
 };