Feat/update checkbox

ui-parts/checkbox/package.json

@@ -13,11 +13,12 @@
     "postpack": "rm -rf dist"
   },
   "dependencies": {
+    "@atls-ui-parts/icons": "workspace:*",
     "@atls-ui-parts/theme": "workspace:*",
+    "@atls-ui/theme": "workspace:*",
     "clsx": "2.1.1"
   },
   "devDependencies": {
-    "@atls-ui-generators/appearance": "workspace:*",
     "@atls-ui-parts/layout": "workspace:*",
     "@storybook/react": "10.4.6",
     "@types/react": "19.1.2",
@@ -30,6 +31,7 @@
   },
   "peerDependencies": {
     "@vanilla-extract/css": "*",
+    "@vanilla-extract/dynamic": "*",
     "react": "*",
     "react-dom": "*"
   },

ui-parts/checkbox/src/box/index.ts

@@ -1,2 +1,2 @@
-export type * from './box.interfaces.js'
-export *      from './styles/index.js'
+export *                 from './styles/index.js'
+export type { BoxShape } from './styles/shape/interfaces.js'

ui-parts/checkbox/src/box/styles/appearance/interfaces.ts

@@ -0,0 +1,5 @@
+export interface BoxAppearance {
+  backgroundColor: string
+  borderColor: string
+  shadow: string
+}

ui-parts/checkbox/src/box/styles/appearance/styles.css.ts

@@ -0,0 +1,50 @@
+import { createThemeContract } from '@vanilla-extract/css'
+import { style }               from '@vanilla-extract/css'
+
+import { hiddenInputStyles }   from '../../../hidden-input/index.js'
+
+export const boxAppearanceVariables = createThemeContract({
+  default: {
+    backgroundColor: null,
+    borderColor: null,
+    shadow: null,
+  },
+  hover: {
+    backgroundColor: null,
+    borderColor: null,
+    shadow: null,
+  },
+  disabled: {
+    backgroundColor: null,
+    borderColor: null,
+    shadow: null,
+  },
+  focused: {
+    backgroundColor: null,
+    borderColor: null,
+    shadow: null,
+  },
+})
+
+export const boxAppearanceStyles = style({
+  backgroundColor: boxAppearanceVariables.default.backgroundColor,
+  borderColor: boxAppearanceVariables.default.borderColor,
+  boxShadow: boxAppearanceVariables.default.shadow,
+  selectors: {
+    [`${hiddenInputStyles}:hover:not(:disabled) + &`]: {
+      backgroundColor: boxAppearanceVariables.hover.backgroundColor,
+      borderColor: boxAppearanceVariables.hover.borderColor,
+      boxShadow: boxAppearanceVariables.hover.shadow,
+    },
+    [`${hiddenInputStyles}:focus-visible:not(:disabled) + &`]: {
+      backgroundColor: boxAppearanceVariables.focused.backgroundColor,
+      borderColor: boxAppearanceVariables.focused.borderColor,
+      boxShadow: boxAppearanceVariables.focused.shadow,
+    },
+    [`${hiddenInputStyles}:disabled + &`]: {
+      backgroundColor: boxAppearanceVariables.disabled.backgroundColor,
+      borderColor: boxAppearanceVariables.disabled.borderColor,
+      boxShadow: boxAppearanceVariables.disabled.shadow,
+    },
+  },
+})

ui-parts/checkbox/src/box/styles/index.ts

@@ -1,3 +1,4 @@
-export * from './appearance.css.js'
-export * from './base.css.js'
-export * from './shape.css.js'
+export *      from './appearance/styles.css.js'
+export type * from './appearance/interfaces.js'
+export *      from './base.css.js'
+export *      from './shape/variants.css.js'

ui-parts/checkbox/src/box/styles/shape/interfaces.ts

@@ -0,0 +1,7 @@
+import type { CSSProperties } from 'react'
+
+export interface BoxShape {
+  className: string
+  elevationSize: 'md' | 'sm' | 'xs'
+  padding?: CSSProperties['padding']
+}

ui-parts/checkbox/src/box/styles/shape/variants.css.ts

@@ -0,0 +1,40 @@
+import type { BoxShape } from './interfaces.js'
+
+import { style }         from '@vanilla-extract/css'
+
+import { spacing }       from '@atls-ui/theme'
+import { borderWidths }  from '@atls-ui/theme/tokens'
+import { radii }         from '@atls-ui/theme/tokens'
+
+export const boxShapeStyles: Record<'lg' | 'md' | 'sm', BoxShape> = {
+  sm: {
+    className: style({
+      width: '18px',
+      height: '18px',
+      borderRadius: radii.xs2,
+      borderWidth: borderWidths.sm,
+    }),
+    elevationSize: 'xs',
+    padding: spacing.component.none,
+  },
+  md: {
+    className: style({
+      width: '24px',
+      height: '24px',
+      borderRadius: radii.xs2,
+      borderWidth: borderWidths.sm,
+    }),
+    elevationSize: 'sm',
+    padding: spacing.component.none,
+  },
+  lg: {
+    className: style({
+      width: '28px',
+      height: '28px',
+      borderRadius: radii.xs2,
+      borderWidth: borderWidths.sm,
+    }),
+    elevationSize: 'md',
+    padding: spacing.component.none,
+  },
+}

ui-parts/checkbox/src/check/appearance/interfaces.ts

@@ -0,0 +1,3 @@
+export interface CheckAppearance {
+  color: string
+}

ui-parts/checkbox/src/check/appearance/styles.css.ts

@@ -0,0 +1,35 @@
+import { createThemeContract } from '@vanilla-extract/css'
+import { style }               from '@vanilla-extract/css'
+
+import { boxBaseStyles }       from '../../box/styles/base.css.js'
+import { hiddenInputStyles }   from '../../hidden-input/index.js'
+
+export const checkAppearanceVariables = createThemeContract({
+  default: {
+    color: null,
+  },
+  hover: {
+    color: null,
+  },
+  disabled: {
+    color: null,
+  },
+  focused: {
+    color: null,
+  },
+})
+
+export const checkAppearanceStyles = style({
+  color: checkAppearanceVariables.default.color,
+  selectors: {
+    [`${hiddenInputStyles}:hover:not(:disabled) + ${boxBaseStyles} &`]: {
+      color: checkAppearanceVariables.hover.color,
+    },
+    [`${hiddenInputStyles}:focus-visible:not(:disabled) + ${boxBaseStyles} &`]: {
+      color: checkAppearanceVariables.focused.color,
+    },
+    [`${hiddenInputStyles}:disabled + ${boxBaseStyles} &`]: {
+      color: checkAppearanceVariables.disabled.color,
+    },
+  },
+})

ui-parts/checkbox/src/check/base.css.ts

@@ -0,0 +1,15 @@
+import { style } from '@vanilla-extract/css'
+
+export const checkBaseStyles = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  visibility: 'hidden',
+  width: '100%',
+  height: '100%',
+  lineHeight: 1,
+})
+
+export const checkVisibleStyles = style({
+  visibility: 'visible',
+})

ui-parts/checkbox/src/check/component.tsx

@@ -0,0 +1,45 @@
+import type { ReactNode }           from 'react'
+
+import type { CheckProps }          from './interfaces.js'
+
+import { assignInlineVars }         from '@vanilla-extract/dynamic'
+import { clsx }                     from 'clsx'
+
+import { CheckIcon }                from '@atls-ui-parts/icons'
+import { MinusIcon }                from '@atls-ui-parts/icons'
+
+import { checkAppearanceStyles }    from './appearance/styles.css.js'
+import { checkAppearanceVariables } from './appearance/styles.css.js'
+import { checkBaseStyles }          from './base.css.js'
+import { checkVisibleStyles }       from './base.css.js'
+
+export const Check = ({
+  appearance,
+  checked,
+  checkedIcon,
+  className,
+  indeterminate,
+  indeterminateIcon,
+  shape,
+}: CheckProps): ReactNode => {
+  let icon = checkedIcon ?? <CheckIcon />
+
+  if (indeterminate) {
+    icon = indeterminateIcon ?? <MinusIcon />
+  }
+
+  return (
+    <div
+      style={assignInlineVars(checkAppearanceVariables, appearance)}
+      className={clsx(
+        checkBaseStyles,
+        checkAppearanceStyles,
+        shape,
+        (checked || indeterminate) && checkVisibleStyles,
+        className
+      )}
+    >
+      {icon}
+    </div>
+  )
+}

ui-parts/checkbox/src/check/index.ts

@@ -1,2 +1,4 @@
-export * from './appearance.css.js'
-export * from './check.css.js'
+export *      from './base.css.js'
+export *      from './shape.css.js'
+export *      from './appearance/styles.css.js'
+export type * from './appearance/interfaces.js'

ui-parts/checkbox/src/check/interfaces.ts

@@ -0,0 +1,13 @@
+import type { ReactNode }                from 'react'
+
+import type { CheckboxAppearanceStates } from '../styles/appearance/interfaces.js'
+
+export interface CheckProps {
+  appearance: CheckboxAppearanceStates['check']
+  checked: boolean
+  checkedIcon?: ReactNode
+  className?: string
+  indeterminate?: boolean
+  indeterminateIcon?: ReactNode
+  shape: string
+}

ui-parts/checkbox/src/check/shape.css.ts

@@ -0,0 +1,35 @@
+import { globalStyle } from '@vanilla-extract/css'
+import { style }       from '@vanilla-extract/css'
+
+const checkSmallShapeStyles = style({
+  fontSize: '12px',
+})
+
+const checkMediumShapeStyles = style({
+  fontSize: '14px',
+})
+
+const checkLargeShapeStyles = style({
+  fontSize: '18px',
+})
+
+globalStyle(`${checkSmallShapeStyles} > svg`, {
+  width: '12px',
+  height: '12px',
+})
+
+globalStyle(`${checkMediumShapeStyles} > svg`, {
+  width: '14px',
+  height: '14px',
+})
+
+globalStyle(`${checkLargeShapeStyles} > svg`, {
+  width: '18px',
+  height: '18px',
+})
+
+export const checkShapeStyles = {
+  sm: checkSmallShapeStyles,
+  md: checkMediumShapeStyles,
+  lg: checkLargeShapeStyles,
+}