@sakura-ui/sakura-ui 0.1.5 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sakura-ui/sakura-ui",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "keywords": [],
   "author": "glassonion1",
   "homepage": "https://github.com/glassonion1/sakura-ui",
@@ -13,9 +13,9 @@
     "packages"
   ],
   "dependencies": {
-    "@sakura-ui/config": "0.0.11",
-    "@sakura-ui/core": "0.0.4",
-    "@sakura-ui/forms": "0.0.6"
+    "@sakura-ui/config": "0.1.1",
+    "@sakura-ui/forms": "0.1.0",
+    "@sakura-ui/core": "0.1.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",

package/packages/config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sakura-ui/config",
-  "version": "0.0.11",
+  "version": "0.1.1",
   "main": "dist/index.cjs.js",
   "types": "dist/index.d.ts",
   "exports": {

package/packages/config/src/index.ts

@@ -14,16 +14,171 @@ const sakuraPlugin = plugin(
     theme: {
       extend: {
         fontSize: {
-          h1: ['42px', '42px'],
-          h2: ['32px', '32px'],
-          h3: ['26px', '26px'],
-          h4: ['22px', '22px'],
-          h5: ['20px', '20px'],
-          h6: ['18px', '18px'],
-          base: ['16px', '28px'],
-          code: ['16px', '24px'],
-          sm: ['14px', '24px'],
-          xs: ['12px', '20px']
+          '6xl': [
+            '57px',
+            {
+              lineHeight: '1.4',
+              letterSpacing: '0.04em',
+              fontWeight: '400'
+            }
+          ],
+          '5xl': [
+            '45px',
+            {
+              lineHeight: '1.4',
+              letterSpacing: '0.04em',
+              fontWeight: '400'
+            }
+          ],
+          // h1
+          '4xl': [
+            '36px',
+            {
+              lineHeight: '1.4',
+              letterSpacing: '0.04em',
+              fontWeight: '400'
+            }
+          ],
+          '4xlm': [
+            '32px',
+            {
+              lineHeight: '1.5',
+              letterSpacing: '0.04em',
+              fontWeight: '500'
+            }
+          ],
+          // h2
+          '3xl': [
+            '32px',
+            {
+              lineHeight: '1.5',
+              letterSpacing: '0.04em',
+              fontWeight: '400'
+            }
+          ],
+          '3xlm': [
+            '28px',
+            {
+              lineHeight: '1.5',
+              letterSpacing: '0.04em',
+              fontWeight: '500'
+            }
+          ],
+          // h3
+          '2xl': [
+            '28px',
+            {
+              lineHeight: '1.5',
+              letterSpacing: '0.04em',
+              fontWeight: '400'
+            }
+          ],
+          '2xlm': [
+            '24px',
+            {
+              lineHeight: '1.5',
+              letterSpacing: '0.04em',
+              fontWeight: '500'
+            }
+          ],
+          // h4
+          xl: [
+            '24px',
+            {
+              lineHeight: '1.5',
+              letterSpacing: '0.04em',
+              fontWeight: '400'
+            }
+          ],
+          xlm: [
+            '20px',
+            {
+              lineHeight: '1.5',
+              letterSpacing: '0.04em',
+              fontWeight: '500'
+            }
+          ],
+          // h5 h6
+          lg: [
+            '20px',
+            {
+              lineHeight: '1.5',
+              letterSpacing: '0.04em',
+              fontWeight: '400'
+            }
+          ],
+          lgm: [
+            '16px',
+            {
+              lineHeight: '1.5',
+              letterSpacing: '0.04em',
+              fontWeight: '500'
+            }
+          ],
+          base: [
+            '16px',
+            {
+              lineHeight: '1.7',
+              letterSpacing: '0.04em',
+              fontWeight: '400'
+            }
+          ],
+          small: [
+            '14px',
+            {
+              lineHeight: '1.7',
+              letterSpacing: '0.04em',
+              fontWeight: '400'
+            }
+          ],
+          label: [
+            '14px',
+            {
+              lineHeight: '1.5',
+              letterSpacing: '0.04em',
+              fontWeight: '500'
+            }
+          ],
+          labelSmall: [
+            '12px',
+            {
+              lineHeight: '1.5',
+              letterSpacing: '0.04em',
+              fontWeight: '500'
+            }
+          ],
+          xs: [
+            '12px',
+            {
+              lineHeight: '1.7',
+              letterSpacing: '0.04em',
+              fontWeight: '400'
+            }
+          ],
+          xxs: [
+            '10px',
+            {
+              lineHeight: '1.7',
+              letterSpacing: '0.04em',
+              fontWeight: '400'
+            }
+          ],
+          button: [
+            '16px',
+            {
+              lineHeight: '1.5',
+              letterSpacing: '0.04em',
+              fontWeight: '700'
+            }
+          ],
+          code: [
+            '16px',
+            {
+              lineHeight: '1.7',
+              letterSpacing: '0.04em',
+              fontWeight: '400'
+            }
+          ]
         },
         colors: {
           white: {

package/packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sakura-ui/core",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "type": "module",
   "main": "dist/index.cjs.js",
   "types": "dist/index.d.ts",

package/packages/core/src/components/Button.tsx

@@ -16,10 +16,9 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     const style = `
       inline-block
       p-4
-      text-base
-      font-bold
-      rounded-lg
+      text-button
       text-${align}
+      rounded-lg
       cursor-pointer
       whitespace-nowrap
       border

package/packages/core/src/components/Heading.tsx

@@ -3,21 +3,18 @@ import { cx } from '../utils/class'
 
 export interface HeadingProps extends React.ComponentProps<'h1'> {}
 
-const common = `
-    font-bold
-`
-
 export const H1 = (props: HeadingProps) => {
   const { className, children, ...restProps } = props
 
   const style = `
-    text-h1
+    text-4xlm
+    sm:text-4xl
     mt-16
     mb-6
   `
 
   return (
-    <h1 className={cx(common, style, className)} {...restProps}>
+    <h1 className={cx(style, className)} {...restProps}>
       {children}
     </h1>
   )
@@ -28,13 +25,14 @@ export const H2 = (props: HeadingProps) => {
   const { className, children, ...restProps } = props
 
   const style = `
-    text-h2
+    text-3xlm
+    sm:text-3xl
     mt-16
     mb-6
   `
 
   return (
-    <h2 className={cx(common, style, className)} {...restProps}>
+    <h2 className={cx(style, className)} {...restProps}>
       {children}
     </h2>
   )
@@ -45,13 +43,14 @@ export const H3 = (props: HeadingProps) => {
   const { className, children, ...restProps } = props
 
   const style = `
-    text-h3
+    text-2xlm
+    sm:text-2xl
     mt-10
     mb-6
   `
 
   return (
-    <h3 className={cx(common, style, className)} {...restProps}>
+    <h3 className={cx(style, className)} {...restProps}>
       {children}
     </h3>
   )
@@ -62,13 +61,14 @@ export const H4 = (props: HeadingProps) => {
   const { className, children, ...restProps } = props
 
   const style = `
-    text-h4
+    text-xlm
+    sm:text-xl
     mt-10
     mb-4
   `
 
   return (
-    <h4 className={cx(common, style, className)} {...restProps}>
+    <h4 className={cx(style, className)} {...restProps}>
       {children}
     </h4>
   )
@@ -79,13 +79,14 @@ export const H5 = (props: HeadingProps) => {
   const { className, children, ...restProps } = props
 
   const style = `
-    text-h5
+    text-lgm
+    sm:text-lg
     mt-10
     mb-4
   `
 
   return (
-    <h5 className={cx(common, style, className)} {...restProps}>
+    <h5 className={cx(style, className)} {...restProps}>
       {children}
     </h5>
   )
@@ -96,13 +97,14 @@ export const H6 = (props: HeadingProps) => {
   const { className, children, ...restProps } = props
 
   const style = `
-    text-h6
+    text-lgm
+    sm:text-lg
     mt-6
     mb-4
   `
 
   return (
-    <h6 className={cx(common, style, className)} {...restProps}>
+    <h6 className={cx(style, className)} {...restProps}>
       {children}
     </h6>
   )

package/packages/core/src/components/IconButton.tsx

@@ -19,10 +19,9 @@ export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
     const style = `
       inline-block
       p-4
-      text-base
-      font-bold
-      rounded-lg
+      text-button
       text-${align}
+      rounded-lg
       cursor-pointer
       whitespace-nowrap
       border

package/packages/forms/dist/components/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC;CAAG;AAEvE,eAAO,MAAM,QAAQ,qGA+DpB,CAAA"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC;CAAG;AAEvE,eAAO,MAAM,QAAQ,qGA8DpB,CAAA"}

package/packages/forms/dist/components/FieldsetControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldsetControl.d.ts","sourceRoot":"","sources":["../../src/components/FieldsetControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,UAAU,CAAC;IAClD,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,UAAU,GAAG,UAAU,CAAA;CACpC;AAED,eAAO,MAAM,eAAe,kGAuD1B,CAAA"}
+{"version":3,"file":"FieldsetControl.d.ts","sourceRoot":"","sources":["../../src/components/FieldsetControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,UAAU,CAAC;IAClD,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,UAAU,GAAG,UAAU,CAAA;CACpC;AAED,eAAO,MAAM,eAAe,kGAyD1B,CAAA"}

package/packages/forms/dist/components/Input.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface InputProps extends React.ComponentPropsWithoutRef<'input'> {
+}
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=Input.d.ts.map

package/packages/forms/dist/components/Input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC;CAAG;AAE9E,eAAO,MAAM,KAAK,qFAoCjB,CAAA"}

package/packages/forms/dist/components/LabelControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LabelControl.d.ts","sourceRoot":"","sources":["../../src/components/LabelControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,iBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC;IAC/C,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,eAAO,MAAM,YAAY,4FAsDvB,CAAA"}
+{"version":3,"file":"LabelControl.d.ts","sourceRoot":"","sources":["../../src/components/LabelControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,iBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC;IAC/C,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,eAAO,MAAM,YAAY,4FAqDvB,CAAA"}

package/packages/forms/dist/components/Radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../src/components/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,KAAM,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC;CAAG;AAEzE,eAAO,MAAM,KAAK,gFAoDhB,CAAA"}
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../src/components/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,KAAM,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC;CAAG;AAEzE,eAAO,MAAM,KAAK,gFAsDhB,CAAA"}

package/packages/forms/dist/components/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/components/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC;CAAG;AAEhF,eAAO,MAAM,MAAM,uFAmDlB,CAAA"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/components/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC;CAAG;AAEhF,eAAO,MAAM,MAAM,uFA0DlB,CAAA"}

package/packages/forms/dist/components/Textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../src/components/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,UAAU,CAAC;CAAG;AAEvD,eAAO,MAAM,QAAQ,2FAwCpB,CAAA"}
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../src/components/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,UAAU,CAAC;CAAG;AAEvD,eAAO,MAAM,QAAQ,2FAsCpB,CAAA"}

package/packages/forms/dist/components/controlled/InputControl.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface InputControlProps extends React.ComponentPropsWithoutRef<'input'> {
+    labelText: string;
+    helperText?: string;
+    errorMessage?: string;
+    isInvalid?: boolean;
+    isRequired?: boolean;
+}
+export declare const InputControl: React.ForwardRefExoticComponent<InputControlProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=InputControl.d.ts.map

package/packages/forms/dist/components/controlled/InputControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputControl.d.ts","sourceRoot":"","sources":["../../../src/components/controlled/InputControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,iBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC;IAC/C,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,eAAO,MAAM,YAAY,4FA0BvB,CAAA"}

package/packages/forms/dist/components/controlled/index.d.ts

@@ -1,6 +1,6 @@
 export { CheckboxGroup } from './CheckboxGroup';
 export { RadioGroup } from './RadioGroup';
 export { SelectControl } from './SelectControl';
-export { TextControl } from './TextControl';
+export { InputControl } from './InputControl';
 export { TextareaControl } from './TextareaControl';
 //# sourceMappingURL=index.d.ts.map

package/packages/forms/dist/components/controlled/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/controlled/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/controlled/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA"}

package/packages/forms/dist/components/index.d.ts

@@ -1,7 +1,7 @@
 export { Checkbox } from './Checkbox';
 export { Radio } from './Radio';
 export { Select } from './Select';
-export { Text } from './Text';
+export { Input } from './Input';
 export { Textarea } from './Textarea';
 export { LabelControl } from './LabelControl';
 export { FieldsetControl } from './FieldsetControl';

package/packages/forms/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA"}