@sakura-ui/sakura-ui 0.1.17 → 0.1.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sakura-ui/sakura-ui",
-  "version": "0.1.17",
+  "version": "0.1.20",
   "keywords": [],
   "author": "glassonion1",
   "homepage": "https://github.com/glassonion1/sakura-ui",
@@ -24,5 +24,20 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tailwindcss": "^3.2.7"
+  },
+  "devDependencies": {
+    "@types/node": "^18.16.19",
+    "@typescript-eslint/eslint-plugin": "^6.4.1",
+    "@typescript-eslint/parser": "^6.4.1",
+    "@vitejs/plugin-react-swc": "^3.3.2",
+    "eslint": "^8.47.0",
+    "eslint-config-prettier": "^9.0.0",
+    "npm-run-all2": "^6.1.2",
+    "rimraf": "^5.0.5",
+    "ts-node": "^10.9.1",
+    "tsc-alias": "^1.8.7",
+    "typescript": "^5.1.6",
+    "vite": "^4.4.2",
+    "vitest": "^1.3.1"
   }
 }

package/packages/config/package.json

@@ -1,11 +1,22 @@
 {
   "name": "@sakura-ui/config",
-  "version": "0.1.8",
+  "version": "0.1.10",
+  "description": "",
+  "keywords": [],
+  "author": "glassonion1",
+  "homepage": "https://github.com/glassonion1/sakura-ui",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com:glassonion1/sakura-ui.git",
+    "directory": "packages/config"
+  },
+  "license": "MIT",
+  "type": "module",
   "main": "dist/index.cjs.js",
-  "types": "dist/index.d.ts",
+  "types": "dist/types/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
+      "types": "./dist/types/index.d.ts",
       "require": "./dist/index.cjs.js",
       "import": "./dist/index.es.js"
     }
@@ -14,38 +25,22 @@
   "files": [
     "dist"
   ],
-  "publishConfig": {
-    "access": "public"
-  },
   "scripts": {
+    "lint": "run-s lint:*",
+    "lint:eslint": "eslint . --ext .ts,.tsx --fix",
+    "lint:prettier": "prettier --write --ignore-path .gitignore './src/*.ts'",
+    "prebuild": "rimraf dist",
     "build": "run-p build:*",
     "build:scripts": "vite build",
-    "build:types": "tsc",
-    "test": "jest"
+    "build:types": "tsc && tsc-alias",
+    "test": "vitest"
   },
-  "keywords": [],
-  "author": "glassonion1",
-  "homepage": "https://github.com/glassonion1/sakura-ui",
-  "repository": {
-    "type": "git",
-    "url": "git+ssh://git@github.com:glassonion1/sakura-ui.git",
-    "directory": "packages/config"
-  },
-  "license": "MIT",
   "peerDependencies": {
     "tailwindcss": "^3.2.7"
   },
   "devDependencies": {
-    "@types/jest": "^29.5.2",
-    "@types/node": "^18.16.19",
-    "autoprefixer": "^10.4.14",
-    "jest": "^29.6.1",
-    "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.25",
-    "tailwindcss": "^3.3.2",
-    "ts-jest": "^29.1.1",
-    "ts-node": "^10.9.1",
-    "typescript": "^5.1.6",
-    "vite": "^4.4.2"
+    "autoprefixer": "^10.4.17",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1"
   }
 }

package/packages/config/src/index.ts

@@ -1,7 +1,38 @@
 import plugin from 'tailwindcss/plugin'
 
+const booleans = [
+  'atomic',
+  'busy',
+  'checked',
+  'current',
+  'disabled',
+  'expanded',
+  'grabbed',
+  'haspopup',
+  'hidden',
+  'invalid',
+  'live',
+  'modal',
+  'multiline',
+  'multiselectable',
+  'pressed',
+  'readonly',
+  'required',
+  'selected'
+]
+
+const enumerables = {
+  autocomplete: ['both', 'inline', 'list', 'none'],
+  current: ['date', 'location', 'page', 'step', 'time'],
+  dropeffect: ['copy', 'execute', 'link', 'move', 'none', 'popup'],
+  haspopup: ['dialog', 'grid', 'listbox', 'menu', 'tree'],
+  orientation: ['horizontal', 'undefined', 'vertial'],
+  relevant: ['additions', 'all', 'removals', 'text'],
+  sort: ['ascending', 'descending', 'none', 'other']
+}
+
 const sakuraPlugin = plugin(
-  ({ addBase }) => {
+  ({ addBase, addVariant }) => {
     addBase({
       '@font-face': {
         fontFamily: 'Material Symbols Outlined',
@@ -9,6 +40,32 @@ const sakuraPlugin = plugin(
         fontStyle: 'normal'
       }
     })
+    const addAriaVariant = (name: string, value: string) => {
+      addVariant(name, `[${name}="${value}"]&`)
+      addVariant(`peer-${name}`, `:merge(.peer)[${name}="${value}"] ~ &`)
+      addVariant(`group-${name}`, `:merge(.group)[${name}="${value}"] &`)
+    }
+    const addAriaEnumVariant = (name: string, value: string) => {
+      addVariant(`${name}-${value}`, `[${name}="${value}"]&`)
+      addVariant(
+        `peer-${name}-${value}`,
+        `:merge(.peer)[${name}="${value}"] ~ &`
+      )
+      addVariant(
+        `group-${name}-${value}`,
+        `:merge(.group)[${name}="${value}"] &`
+      )
+    }
+
+    for (const attribute of booleans) {
+      addAriaVariant(`aria-${attribute}`, 'true')
+    }
+
+    for (const [attribute, values] of Object.entries(enumerables)) {
+      for (const value of values) {
+        addAriaEnumVariant(`aria-${attribute}`, value)
+      }
+    }
   },
   {
     theme: {

package/packages/config/tests/index.test.ts

@@ -1,7 +1,7 @@
 import sakuraPlugin from '../src'
 
 describe('run tests', () => {
-  it('tests the sakuraCOnfig', () => {
+  it('tests the sakuraConfig', () => {
     const config = {
       mode: 'jit',
       content: ['./src/components/**/*.{js,ts,jsx,tsx}'],

package/packages/config/tsconfig.json

@@ -1,21 +1,13 @@
 {
+  "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "target": "ESNext",
-    "module": "ESNext",
-    "lib": ["ESNext", "DOM"],
-    "moduleResolution": "node",
-    "useDefineForClassFields": true,
-    "strict": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "esModuleInterop": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noImplicitReturns": true,
-    "skipLibCheck": true,
-    "outDir": "dist",
-    "declaration": true,
-    "declarationMap": true
+    "declarationDir": "./dist/types",
+    "outDir": "./dist",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
   },
-  "include": ["src"]
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
 }

package/packages/config/tsconfig.node.json

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "composite": true
+  },
+  "include": ["vite.config.ts"]
+}

package/packages/config/vite.config.ts

@@ -1,3 +1,4 @@
+/// <reference types="vitest" />
 import { resolve } from 'path'
 import { defineConfig } from 'vite'
 import { peerDependencies } from './package.json'
@@ -17,8 +18,9 @@ export default defineConfig({
     },
     rollupOptions: {
       external: [...Object.keys(peerDependencies)]
-    },
-    target: 'esnext',
-    sourcemap: true
+    }
+  },
+  test: {
+    globals: true
   }
 })

package/packages/core/package.json

@@ -1,12 +1,22 @@
 {
   "name": "@sakura-ui/core",
-  "version": "0.1.27",
+  "version": "0.1.36",
+  "description": "",
+  "keywords": [],
+  "author": "glassonion1",
+  "homepage": "https://github.com/glassonion1/sakura-ui",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com:glassonion1/sakura-ui.git",
+    "directory": "packages/core"
+  },
+  "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs.js",
-  "types": "dist/index.d.ts",
+  "types": "dist/types/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
+      "types": "./dist/types/index.d.ts",
       "require": "./dist/index.cjs.js",
       "import": "./dist/index.es.js"
     }
@@ -15,61 +25,33 @@
   "files": [
     "dist"
   ],
-  "publishConfig": {
-    "access": "public"
-  },
   "scripts": {
-    "dev": "vite",
+    "lint": "run-s lint:*",
+    "lint:eslint": "eslint . --ext .ts,.tsx --fix",
+    "lint:prettier": "prettier --write --ignore-path .gitignore './src/*.ts'",
+    "prebuild": "rimraf dist",
     "build": "run-p build:*",
     "build:scripts": "vite build",
     "build:types": "tsc && tsc-alias",
-    "test": "jest",
-    "lint": "run-p lint:*",
-    "lint:prettier": "prettier --write .",
-    "lint:eslint": "eslint --ext \".ts,.tsx\" --fix src"
+    "test": "vitest"
   },
-  "keywords": [],
-  "author": "glassonion1",
-  "homepage": "https://github.com/glassonion1/sakura-ui",
-  "repository": {
-    "type": "git",
-    "url": "git+ssh://git@github.com:glassonion1/sakura-ui.git",
-    "directory": "packages/core"
-  },
-  "license": "MIT",
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tailwindcss": "^3.2.7"
   },
   "devDependencies": {
-    "@jest/types": "^29.6.1",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.0.0",
-    "@types/jest": "^29.5.2",
-    "@types/node": "^18.16.19",
-    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.6",
-    "@types/testing-library__jest-dom": "^5.14.7",
-    "@typescript-eslint/eslint-plugin": "^6.4.1",
-    "@typescript-eslint/parser": "^6.4.1",
-    "@vitejs/plugin-react-swc": "^3.3.2",
-    "autoprefixer": "^10.4.14",
-    "eslint": "^8.47.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
+    "@types/react": "^18.2.60",
+    "@types/react-dom": "^18.2.19",
+    "autoprefixer": "^10.4.17",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.33.2",
-    "jest": "^29.6.1",
-    "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.25",
-    "prettier": "^3.0.2",
+    "jsdom": "^24.0.0",
+    "postcss": "^8.4.35",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "tailwindcss": "^3.3.2",
-    "ts-jest": "^29.1.1",
-    "ts-node": "^10.9.1",
-    "tsc-alias": "^1.8.7",
-    "typescript": "^5.1.6",
-    "vite": "^4.4.2"
+    "tailwindcss": "^3.4.1"
   }
 }

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

@@ -23,6 +23,8 @@ export const Card = (props: CardProps) => {
     sm:rounded-3xl
     text-sumi-900
     overflow-hidden
+    flex flex-col
+    gap-2
   `
 
   return (
@@ -38,7 +40,22 @@ export const Card = (props: CardProps) => {
   )
 }
 
-export interface CardHeaderProps extends React.ComponentPropsWithoutRef<'h2'> {}
+export interface CardImgProps extends React.ComponentPropsWithoutRef<'img'> {}
+
+export const CardImg = (props: CardImgProps) => {
+  const { className, children, ...restProps } = props
+
+  const ctx = React.useContext(IdContext)
+
+  const style = `
+    object-cover
+  `
+
+  return <img id={ctx.id} className={cx(style, className)} {...restProps} />
+}
+
+export interface CardHeaderProps
+  extends React.ComponentPropsWithoutRef<'div'> {}
 
 export const CardHeader = (props: CardHeaderProps) => {
   const { className, children, ...restProps } = props
@@ -46,12 +63,11 @@ export const CardHeader = (props: CardHeaderProps) => {
   const ctx = React.useContext(IdContext)
 
   const style = `
-    px-6
-    first:pt-6
-    last:pb-6
-    py-3
     text-base
     font-medium
+    first:pt-4
+    last:pb-4
+    px-6
   `
 
   return (
@@ -67,11 +83,10 @@ export const CardBody = (props: CardBodyProps) => {
   const { className, children, ...restProps } = props
 
   const style = `
-    px-6
-    first:pt-6
-    last:pb-6
-    pb-3
     text-base-sm
+    first:pt-4
+    last:pb-4
+    px-6
   `
 
   return (
@@ -88,10 +103,10 @@ export const CardFooter = (props: CardFooterProps) => {
   const { className, children, ...restProps } = props
 
   const style = `
-    px-6
-    first:pt-6
-    last:pb-6
     text-base-sm
+    first:pt-4
+    last:pb-4
+    px-6
   `
 
   return (

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

@@ -3,10 +3,11 @@ import { cx } from '../libs/cx'
 
 export interface IconProps extends React.ComponentPropsWithRef<'span'> {
   icon: string
+  srText?: string
 }
 
 export const Icon = React.forwardRef<HTMLElement, IconProps>((props, ref) => {
-  const { className, icon, ...restProps } = props
+  const { className, icon, srText, ...restProps } = props
 
   const style = `
     inline
@@ -16,9 +17,17 @@ export const Icon = React.forwardRef<HTMLElement, IconProps>((props, ref) => {
   `
 
   return (
-    <span className={cx(style, className)} {...restProps} ref={ref}>
-      {icon}
-    </span>
+    <>
+      <span
+        aria-hidden="true"
+        className={cx(style, className)}
+        {...restProps}
+        ref={ref}
+      >
+        {icon}
+      </span>
+      <span className="sr-only">{srText}</span>
+    </>
   )
 })
 

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

@@ -1,4 +1,3 @@
-import { useState, useEffect } from 'react'
 import { cx } from '../libs/cx'
 import { ComponentWithAs } from '../types/component'
 import { forwardRef } from '../libs/forward-ref'
@@ -20,6 +19,7 @@ export const Link: ComponentWithAs<'a', LinkProps> = forwardRef(
       underline-offset-[0.125em]
     `
 
+    // Make lines break at each word
     const style = `
       rounded-sm
       cursor-pointer
@@ -31,6 +31,7 @@ export const Link: ComponentWithAs<'a', LinkProps> = forwardRef(
       focus:outline-2
       focus:outline-wood-500
       disabled:border-sumi-500
+      [overflow-wrap:anywhere]
     `
 
     const styleIcon = `
@@ -43,17 +44,6 @@ export const Link: ComponentWithAs<'a', LinkProps> = forwardRef(
       antialiased
     `
 
-    const [iconLabel, setIconLabel] = useState('')
-    useEffect(() => {
-      const language =
-        (window.navigator.languages && window.navigator.languages[0]) ||
-        window.navigator.language
-      if (language === 'ja') {
-        setIconLabel('新規タブで開きます')
-      }
-      setIconLabel('Opens in new tab')
-    }, [])
-
     if (href?.startsWith('http')) {
       return (
         <Component
@@ -65,9 +55,10 @@ export const Link: ComponentWithAs<'a', LinkProps> = forwardRef(
           ref={ref}
         >
           <span className={styleUnderLine}>{children}</span>
-          <span className={cx(styleIcon)} aria-label={iconLabel}>
+          <span className={cx(styleIcon)} aria-hidden="true">
             open_in_new
           </span>
+          <span className="sr-only">Opens in new tab</span>
         </Component>
       )
     }

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

@@ -6,7 +6,7 @@ export interface TableProps extends React.ComponentPropsWithoutRef<'table'> {}
 const styleBorder = `
   border
   border-collapse
-  border-sumi-900
+  border-[#cccccc]
 `
 
 export const Table = (props: TableProps) => {
@@ -71,7 +71,8 @@ export const Th = (props: ThProps) => {
 
   const style = `
     p-2
-    bg-sumi-100
+    bg-[#f8f8fb]
+    text-base
     text-left
   `
   return (

package/packages/core/src/components/buttonStyle.ts

@@ -1,9 +1,10 @@
-//   select-none
 export const base = `
   inline-block
   text-button
   text-center
   cursor-pointer
+  select-none
+  touch-manipulation
   whitespace-nowrap
   outline-offset-2
   border

package/packages/core/src/components/index.ts

@@ -1,7 +1,8 @@
 export { Button, type ButtonProps } from './Button'
-export { Card, CardHeader, CardBody, CardFooter } from './Card'
+export { Card, CardImg, CardHeader, CardBody, CardFooter } from './Card'
 export type {
   CardProps,
+  CardImgProps,
   CardHeaderProps,
   CardBodyProps,
   CardFooterProps

package/packages/core/src/index.ts

@@ -1,6 +1,7 @@
 export {
   Button,
   Card,
+  CardImg,
   CardHeader,
   CardBody,
   CardFooter,
@@ -33,6 +34,7 @@ export {
 export type {
   ButtonProps,
   CardProps,
+  CardImgProps,
   CardHeaderProps,
   CardBodyProps,
   CardFooterProps,

package/packages/core/tsconfig.json

@@ -1,7 +1,8 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "outDir": "dist",
+    "declarationDir": "./dist/types",
+    "outDir": "./dist",
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"]

package/packages/core/tsconfig.node.json

@@ -1,9 +1,6 @@
 {
   "compilerOptions": {
-    "composite": true,
-    "module": "ESNext",
-    "moduleResolution": "node",
-    "allowSyntheticDefaultImports": true
+    "composite": true
   },
   "include": ["vite.config.ts"]
 }

package/packages/core/vite.config.ts

@@ -1,3 +1,4 @@
+/// <reference types="vitest" />
 import { resolve } from 'path'
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react-swc'
@@ -19,8 +20,10 @@ export default defineConfig({
     },
     rollupOptions: {
       external: [...Object.keys(peerDependencies)]
-    },
-    target: 'esnext',
-    sourcemap: true
+    }
+  },
+  test: {
+    globals: true,
+    environment: 'jsdom'
   }
 })

package/packages/forms/dist/components/Checkbox.js

@@ -40,7 +40,7 @@ export const Checkbox = React.forwardRef((props, ref) => {
       peer-focus-visible:ring-offset-2
       peer-focus-visible:ring-wood-500
     `;
-    return (_jsx("label", { htmlFor: restProps.id, className: cx(style, className), children: _jsxs("span", { className: "flex items-center", children: [_jsx("input", { className: styleInput, type: "checkbox", "aria-describedby": ctx.helperTextId, "aria-errormessage": ctx.errorMessageId, "aria-invalid": ctx.isInvalid ?? false, ...restProps, ref: ref }), _jsx("span", { className: styleCheck, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", children: _jsx("path", { d: "m9.55 17.65-5.325-5.325 1.05-1.075 4.275 4.275 9.175-9.175 1.05 1.075Z" }) }) }), _jsx("span", { className: "peer-disabled:text-sumi-500", children: children })] }) }));
+    return (_jsx("label", { htmlFor: restProps.id, className: cx(style, className), children: _jsxs("span", { className: "flex items-center", children: [_jsx("input", { className: styleInput, type: "checkbox", "aria-describedby": ctx.helperTextId, "aria-errormessage": ctx.errorMessageId, "aria-invalid": ctx.isInvalid ?? false, "aria-required": ctx.isRequired ?? false, ...restProps, ref: ref }), _jsx("span", { className: styleCheck, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", children: _jsx("path", { d: "m9.55 17.65-5.325-5.325 1.05-1.075 4.275 4.275 9.175-9.175 1.05 1.075Z" }) }) }), _jsx("span", { className: "peer-disabled:text-sumi-500", children: children })] }) }));
 });
 Checkbox.displayName = 'Checkbox';
 //# sourceMappingURL=Checkbox.js.map

package/packages/forms/dist/components/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAA;AACnC,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAI7C,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CACtC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACb,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAA;IACnD,MAAM,GAAG,GAAG,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAA;IAC/C,IAAI,GAAG,CAAC,UAAU,EAAE;QAClB,SAAS,CAAC,QAAQ,GAAG,IAAI,CAAA;KAC1B;IACD,IAAI,GAAG,CAAC,SAAS,EAAE;QACjB,SAAS,CAAC,IAAI,GAAG,GAAG,CAAC,SAAS,CAAA;KAC/B;IAED,MAAM,KAAK,GAAG;;;;;;KAMb,CAAA;IAED,MAAM,UAAU,GAAG;;;KAGlB,CAAA;IAED,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;KAiBlB,CAAA;IAED,OAAO,CACL,gBAAO,OAAO,EAAE,SAAS,CAAC,EAAE,EAAE,SAAS,EAAE,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,YAC3D,gBAAM,SAAS,EAAC,mBAAmB,aACjC,gBACE,SAAS,EAAE,UAAU,EACrB,IAAI,EAAC,UAAU,sBACG,GAAG,CAAC,YAAY,uBACf,GAAG,CAAC,cAAc,kBACvB,GAAG,CAAC,SAAS,IAAI,KAAK,KAChC,SAAS,EACb,GAAG,EAAE,GAAG,GACR,EACF,eAAM,SAAS,EAAE,UAAU,YACzB,cAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,YAC5D,eAAM,CAAC,EAAC,wEAAwE,GAAG,GAC/E,GACD,EACP,eAAM,SAAS,EAAC,6BAA6B,YAAE,QAAQ,GAAQ,IAC1D,GACD,CACT,CAAA;AACH,CAAC,CACF,CAAA;AAED,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA"}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAA;AACnC,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAI7C,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CACtC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACb,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAA;IACnD,MAAM,GAAG,GAAG,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAA;IAC/C,IAAI,GAAG,CAAC,UAAU,EAAE;QAClB,SAAS,CAAC,QAAQ,GAAG,IAAI,CAAA;KAC1B;IACD,IAAI,GAAG,CAAC,SAAS,EAAE;QACjB,SAAS,CAAC,IAAI,GAAG,GAAG,CAAC,SAAS,CAAA;KAC/B;IAED,MAAM,KAAK,GAAG;;;;;;KAMb,CAAA;IAED,MAAM,UAAU,GAAG;;;KAGlB,CAAA;IAED,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;KAiBlB,CAAA;IAED,OAAO,CACL,gBAAO,OAAO,EAAE,SAAS,CAAC,EAAE,EAAE,SAAS,EAAE,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,YAC3D,gBAAM,SAAS,EAAC,mBAAmB,aACjC,gBACE,SAAS,EAAE,UAAU,EACrB,IAAI,EAAC,UAAU,sBACG,GAAG,CAAC,YAAY,uBACf,GAAG,CAAC,cAAc,kBACvB,GAAG,CAAC,SAAS,IAAI,KAAK,mBACrB,GAAG,CAAC,UAAU,IAAI,KAAK,KAClC,SAAS,EACb,GAAG,EAAE,GAAG,GACR,EACF,eAAM,SAAS,EAAE,UAAU,YACzB,cAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,YAC5D,eAAM,CAAC,EAAC,wEAAwE,GAAG,GAC/E,GACD,EACP,eAAM,SAAS,EAAC,6BAA6B,YAAE,QAAQ,GAAQ,IAC1D,GACD,CACT,CAAA;AACH,CAAC,CACF,CAAA;AAED,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA"}

package/packages/forms/dist/components/FileInput.js

@@ -8,12 +8,14 @@ export const FileInput = React.forwardRef((props, ref) => {
     if (ctx.isRequired) {
         restProps.required = true;
     }
-    const invalidStyle = ctx.isInvalid ? 'text-sun-800' : 'text-sumi-900';
     const base = `
+      file:mr-2
       file:inline-block
       file:text-button
       file:text-center
       file:cursor-pointer
+      file:select-none
+      file:touch-manipulation
       file:whitespace-nowrap
       file:border
       file:border-solid
@@ -41,11 +43,13 @@ export const FileInput = React.forwardRef((props, ref) => {
     const styleInput = `
       rounded-lg
       outline-offset-2
+      text-sumi-900
       focus:outline
       focus:outline-2
       focus:outline-wood-600
+      aria-invalid:text-sun-800
     `;
-    return (_jsx("input", { type: "file", id: restProps.id ?? ctx.id, className: cx(base, secondary, styleLg, styleInput, invalidStyle, className), "aria-describedby": ctx.helperTextId, "aria-errormessage": ctx.errorMessageId, "aria-invalid": ctx.isInvalid ?? false, ref: ref, ...restProps }));
+    return (_jsx("input", { type: "file", id: restProps.id ?? ctx.id, className: cx(base, secondary, styleLg, styleInput, className), "aria-describedby": ctx.helperTextId, "aria-errormessage": ctx.errorMessageId, "aria-invalid": ctx.isInvalid ?? false, "aria-required": ctx.isRequired ?? false, ref: ref, ...restProps }));
 });
 FileInput.displayName = 'FileInput';
 //# sourceMappingURL=FileInput.js.map