@becket-ui/tokens 0.1.0

package/styled-system/recipes/button.mjs

@@ -0,0 +1,122 @@
+import { memo, splitProps } from '../helpers.mjs';
+import { createRecipe, mergeRecipes } from './create-recipe.mjs';
+
+const buttonFn = /* @__PURE__ */ createRecipe('button', {
+  "visual": "outline",
+  "size": "md",
+  "borderRadius": "md",
+  "withGradient": false,
+  "fullWidth": false
+}, [
+  {
+    "visual": "primary",
+    "withGradient": true,
+    "css": {
+      "borderWidth": "0px",
+      "borderStyle": "solid",
+      "borderColor": "transparent",
+      "backgroundColor": "transparent",
+      "backgroundImage": "{gradients.primary}",
+      "backgroundOrigin": "border-box",
+      "backgroundClip": "border-box",
+      "backgroundRepeat": "no-repeat",
+      "backgroundSize": "100% 100%",
+      "color": "neutral.50",
+      "_hover": {
+        "backgroundImage": "{gradients.primaryHover}"
+      }
+    }
+  },
+  {
+    "visual": "secondary",
+    "withGradient": true,
+    "css": {
+      "borderWidth": "0px",
+      "borderStyle": "solid",
+      "borderColor": "transparent",
+      "backgroundColor": "transparent",
+      "backgroundImage": "{gradients.secondary}",
+      "backgroundOrigin": "border-box",
+      "backgroundClip": "border-box",
+      "backgroundRepeat": "no-repeat",
+      "backgroundSize": "100% 100%",
+      "color": "neutral.50"
+    }
+  },
+  {
+    "visual": "neutral",
+    "withGradient": true,
+    "css": {
+      "borderWidth": "0px",
+      "borderStyle": "solid",
+      "borderColor": "transparent",
+      "backgroundColor": "transparent",
+      "backgroundImage": "{gradients.neutral}",
+      "backgroundOrigin": "border-box",
+      "backgroundClip": "border-box",
+      "backgroundRepeat": "no-repeat",
+      "backgroundSize": "100% 100%",
+      "color": "text"
+    }
+  },
+  {
+    "visual": "outline",
+    "withGradient": true,
+    "css": {
+      "borderWidth": "2px",
+      "borderStyle": "solid",
+      "borderColor": "transparent",
+      "backgroundImage": "linear-gradient({colors.background}, {colors.background}), {gradients.primary}",
+      "backgroundOrigin": "border-box",
+      "backgroundClip": "padding-box, border-box",
+      "color": "secondary"
+    }
+  }
+])
+
+const buttonVariantMap = {
+  "visual": [
+    "primary",
+    "secondary",
+    "neutral",
+    "outline"
+  ],
+  "size": [
+    "sm",
+    "md"
+  ],
+  "borderRadius": [
+    "none",
+    "sm",
+    "md",
+    "lg",
+    "xl",
+    "full"
+  ],
+  "withGradient": [
+    "false",
+    "true"
+  ],
+  "fullWidth": [
+    "true",
+    "false"
+  ]
+}
+
+const buttonVariantKeys = Object.keys(buttonVariantMap)
+
+export const button = /* @__PURE__ */ Object.assign(memo(buttonFn.recipeFn), {
+  __recipe__: true,
+  __name__: 'button',
+  __getCompoundVariantCss__: buttonFn.__getCompoundVariantCss__,
+  raw: (props) => props,
+  variantKeys: buttonVariantKeys,
+  variantMap: buttonVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe)
+  },
+  splitVariantProps(props) {
+    return splitProps(props, buttonVariantKeys)
+  },
+  getVariantProps: buttonFn.getVariantProps,
+})

package/styled-system/recipes/card.d.ts

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface CardVariant {
+  /**
+ * @default "md"
+ */
+size: "sm" | "md" | "lg"
+/**
+ * @default "subtle"
+ */
+visual: "outline" | "subtle" | "elevated"
+/**
+ * @default false
+ */
+fullWidth: boolean
+}
+
+type CardVariantMap = {
+  [key in keyof CardVariant]: Array<CardVariant[key]>
+}
+
+type CardSlot = "root" | "header" | "body" | "footer" | "title" | "description"
+
+export type CardVariantProps = {
+  [key in keyof CardVariant]?: ConditionalValue<CardVariant[key]> | undefined
+}
+
+export interface CardRecipe {
+  __slot: CardSlot
+  __type: CardVariantProps
+  (props?: CardVariantProps): Pretty<Record<CardSlot, string>>
+  raw: (props?: CardVariantProps) => CardVariantProps
+  variantMap: CardVariantMap
+  variantKeys: Array<keyof CardVariant>
+  splitVariantProps<Props extends CardVariantProps>(props: Props): [CardVariantProps, Pretty<DistributiveOmit<Props, keyof CardVariantProps>>]
+  getVariantProps: (props?: CardVariantProps) => CardVariantProps
+}
+
+/**
+ * Card container with header, body, and footer slots
+ */
+export declare const card: CardRecipe

package/styled-system/recipes/card.mjs

@@ -0,0 +1,76 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
+import { createRecipe } from './create-recipe.mjs';
+
+const cardDefaultVariants = {
+  "size": "md",
+  "visual": "subtle",
+  "fullWidth": false
+}
+const cardCompoundVariants = []
+
+const cardSlotNames = [
+  [
+    "root",
+    "card__root"
+  ],
+  [
+    "header",
+    "card__header"
+  ],
+  [
+    "body",
+    "card__body"
+  ],
+  [
+    "footer",
+    "card__footer"
+  ],
+  [
+    "title",
+    "card__title"
+  ],
+  [
+    "description",
+    "card__description"
+  ]
+]
+const cardSlotFns = /* @__PURE__ */ cardSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, cardDefaultVariants, getSlotCompoundVariant(cardCompoundVariants, slotName))])
+
+const cardFn = memo((props = {}) => {
+  return Object.fromEntries(cardSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
+})
+
+const cardVariantKeys = [
+  "size",
+  "visual",
+  "fullWidth"
+]
+const getVariantProps = (variants) => ({ ...cardDefaultVariants, ...compact(variants) })
+
+export const card = /* @__PURE__ */ Object.assign(cardFn, {
+  __recipe__: false,
+  __name__: 'card',
+  raw: (props) => props,
+  classNameMap: {},
+  variantKeys: cardVariantKeys,
+  variantMap: {
+  "size": [
+    "sm",
+    "md",
+    "lg"
+  ],
+  "visual": [
+    "outline",
+    "subtle",
+    "elevated"
+  ],
+  "fullWidth": [
+    "true",
+    "false"
+  ]
+},
+  splitVariantProps(props) {
+    return splitProps(props, cardVariantKeys)
+  },
+  getVariantProps
+})

package/styled-system/recipes/checkbox.d.ts

@@ -0,0 +1,36 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface CheckboxVariant {
+  /**
+ * @default "md"
+ */
+size: "sm" | "md"
+}
+
+type CheckboxVariantMap = {
+  [key in keyof CheckboxVariant]: Array<CheckboxVariant[key]>
+}
+
+type CheckboxSlot = "root" | "control" | "indicator" | "text" | "label" | "description"
+
+export type CheckboxVariantProps = {
+  [key in keyof CheckboxVariant]?: ConditionalValue<CheckboxVariant[key]> | undefined
+}
+
+export interface CheckboxRecipe {
+  __slot: CheckboxSlot
+  __type: CheckboxVariantProps
+  (props?: CheckboxVariantProps): Pretty<Record<CheckboxSlot, string>>
+  raw: (props?: CheckboxVariantProps) => CheckboxVariantProps
+  variantMap: CheckboxVariantMap
+  variantKeys: Array<keyof CheckboxVariant>
+  splitVariantProps<Props extends CheckboxVariantProps>(props: Props): [CheckboxVariantProps, Pretty<DistributiveOmit<Props, keyof CheckboxVariantProps>>]
+  getVariantProps: (props?: CheckboxVariantProps) => CheckboxVariantProps
+}
+
+/**
+ * Native checkbox with visible control, label, and optional description
+ */
+export declare const checkbox: CheckboxRecipe

package/styled-system/recipes/checkbox.mjs

@@ -0,0 +1,62 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
+import { createRecipe } from './create-recipe.mjs';
+
+const checkboxDefaultVariants = {
+  "size": "md"
+}
+const checkboxCompoundVariants = []
+
+const checkboxSlotNames = [
+  [
+    "root",
+    "checkbox__root"
+  ],
+  [
+    "control",
+    "checkbox__control"
+  ],
+  [
+    "indicator",
+    "checkbox__indicator"
+  ],
+  [
+    "text",
+    "checkbox__text"
+  ],
+  [
+    "label",
+    "checkbox__label"
+  ],
+  [
+    "description",
+    "checkbox__description"
+  ]
+]
+const checkboxSlotFns = /* @__PURE__ */ checkboxSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, checkboxDefaultVariants, getSlotCompoundVariant(checkboxCompoundVariants, slotName))])
+
+const checkboxFn = memo((props = {}) => {
+  return Object.fromEntries(checkboxSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
+})
+
+const checkboxVariantKeys = [
+  "size"
+]
+const getVariantProps = (variants) => ({ ...checkboxDefaultVariants, ...compact(variants) })
+
+export const checkbox = /* @__PURE__ */ Object.assign(checkboxFn, {
+  __recipe__: false,
+  __name__: 'checkbox',
+  raw: (props) => props,
+  classNameMap: {},
+  variantKeys: checkboxVariantKeys,
+  variantMap: {
+  "size": [
+    "sm",
+    "md"
+  ]
+},
+  splitVariantProps(props) {
+    return splitProps(props, checkboxVariantKeys)
+  },
+  getVariantProps
+})

package/styled-system/recipes/create-recipe.mjs

@@ -0,0 +1,82 @@
+import { finalizeConditions, sortConditions } from '../css/conditions.mjs';
+import { css } from '../css/css.mjs';
+import { assertCompoundVariant, getCompoundVariantCss } from '../css/cva.mjs';
+import { cx } from '../css/cx.mjs';
+import { compact, createCss, splitProps, uniq, withoutSpace } from '../helpers.mjs';
+
+export const createRecipe = (name, defaultVariants, compoundVariants) => {
+ const getVariantProps = (variants) => {
+   return {
+     [name]: '__ignore__',
+     ...defaultVariants,
+     ...compact(variants),
+   };
+ };
+
+  const recipeFn = (variants, withCompoundVariants = true) => {
+   const transform = (prop, value) => {
+     assertCompoundVariant(name, compoundVariants, variants, prop)
+
+      if (value === '__ignore__') {
+        return { className: name }
+      }
+
+      value = withoutSpace(value)
+      return { className: `${name}--${prop}_${value}` }
+   }
+
+   const recipeCss = createCss({
+     
+     conditions: {
+       shift: sortConditions,
+       finalize: finalizeConditions,
+       breakpoints: { keys: ["base","sm","md","lg","xl","2xl"] }
+     },
+     utility: {
+       prefix: "beckui-",
+       toHash: (path, hashFn) => hashFn(path.join(":")),
+       transform,
+     }
+   })
+
+   const recipeStyles = getVariantProps(variants)
+
+   if (withCompoundVariants) {
+     const compoundVariantStyles = getCompoundVariantCss(compoundVariants, recipeStyles)
+     return cx(recipeCss(recipeStyles), css(compoundVariantStyles))
+   }
+
+   return recipeCss(recipeStyles)
+  }
+
+   return {
+     recipeFn,
+     getVariantProps,
+     __getCompoundVariantCss__: (variants) => {
+       return getCompoundVariantCss(compoundVariants, getVariantProps(variants));
+     },
+   }
+}
+
+export const mergeRecipes = (recipeA, recipeB) => {
+ if (recipeA && !recipeB) return recipeA
+ if (!recipeA && recipeB) return recipeB
+
+ const recipeFn = (...args) => cx(recipeA(...args), recipeB(...args))
+ const variantKeys = uniq(recipeA.variantKeys, recipeB.variantKeys)
+ const variantMap = variantKeys.reduce((acc, key) => {
+   acc[key] = uniq(recipeA.variantMap[key], recipeB.variantMap[key])
+   return acc
+ }, {})
+
+ return Object.assign(recipeFn, {
+   __recipe__: true,
+   __name__: `${recipeA.__name__} ${recipeB.__name__}`,
+   raw: (props) => props,
+   variantKeys,
+   variantMap,
+   splitVariantProps(props) {
+     return splitProps(props, variantKeys)
+   },
+ })
+ }

package/styled-system/recipes/dialog.d.ts

@@ -0,0 +1,33 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface DialogVariant {
+  
+}
+
+type DialogVariantMap = {
+  [key in keyof DialogVariant]: Array<DialogVariant[key]>
+}
+
+type DialogSlot = "root" | "header" | "body" | "footer" | "title" | "close"
+
+export type DialogVariantProps = {
+  [key in keyof DialogVariant]?: ConditionalValue<DialogVariant[key]> | undefined
+}
+
+export interface DialogRecipe {
+  __slot: DialogSlot
+  __type: DialogVariantProps
+  (props?: DialogVariantProps): Pretty<Record<DialogSlot, string>>
+  raw: (props?: DialogVariantProps) => DialogVariantProps
+  variantMap: DialogVariantMap
+  variantKeys: Array<keyof DialogVariant>
+  splitVariantProps<Props extends DialogVariantProps>(props: Props): [DialogVariantProps, Pretty<DistributiveOmit<Props, keyof DialogVariantProps>>]
+  getVariantProps: (props?: DialogVariantProps) => DialogVariantProps
+}
+
+/**
+ * Native dialog overlay with header, body, and footer slots
+ */
+export declare const dialog: DialogRecipe

package/styled-system/recipes/dialog.mjs

@@ -0,0 +1,53 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
+import { createRecipe } from './create-recipe.mjs';
+
+const dialogDefaultVariants = {}
+const dialogCompoundVariants = []
+
+const dialogSlotNames = [
+  [
+    "root",
+    "dialog__root"
+  ],
+  [
+    "header",
+    "dialog__header"
+  ],
+  [
+    "body",
+    "dialog__body"
+  ],
+  [
+    "footer",
+    "dialog__footer"
+  ],
+  [
+    "title",
+    "dialog__title"
+  ],
+  [
+    "close",
+    "dialog__close"
+  ]
+]
+const dialogSlotFns = /* @__PURE__ */ dialogSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, dialogDefaultVariants, getSlotCompoundVariant(dialogCompoundVariants, slotName))])
+
+const dialogFn = memo((props = {}) => {
+  return Object.fromEntries(dialogSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
+})
+
+const dialogVariantKeys = []
+const getVariantProps = (variants) => ({ ...dialogDefaultVariants, ...compact(variants) })
+
+export const dialog = /* @__PURE__ */ Object.assign(dialogFn, {
+  __recipe__: false,
+  __name__: 'dialog',
+  raw: (props) => props,
+  classNameMap: {},
+  variantKeys: dialogVariantKeys,
+  variantMap: {},
+  splitVariantProps(props) {
+    return splitProps(props, dialogVariantKeys)
+  },
+  getVariantProps
+})

package/styled-system/recipes/drawer.d.ts

@@ -0,0 +1,36 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface DrawerVariant {
+  /**
+ * @default "end"
+ */
+placement: "start" | "end"
+}
+
+type DrawerVariantMap = {
+  [key in keyof DrawerVariant]: Array<DrawerVariant[key]>
+}
+
+type DrawerSlot = "root" | "header" | "body" | "footer" | "title" | "close"
+
+export type DrawerVariantProps = {
+  [key in keyof DrawerVariant]?: ConditionalValue<DrawerVariant[key]> | undefined
+}
+
+export interface DrawerRecipe {
+  __slot: DrawerSlot
+  __type: DrawerVariantProps
+  (props?: DrawerVariantProps): Pretty<Record<DrawerSlot, string>>
+  raw: (props?: DrawerVariantProps) => DrawerVariantProps
+  variantMap: DrawerVariantMap
+  variantKeys: Array<keyof DrawerVariant>
+  splitVariantProps<Props extends DrawerVariantProps>(props: Props): [DrawerVariantProps, Pretty<DistributiveOmit<Props, keyof DrawerVariantProps>>]
+  getVariantProps: (props?: DrawerVariantProps) => DrawerVariantProps
+}
+
+/**
+ * Side overlay built on native dialog
+ */
+export declare const drawer: DrawerRecipe

package/styled-system/recipes/drawer.mjs

@@ -0,0 +1,62 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
+import { createRecipe } from './create-recipe.mjs';
+
+const drawerDefaultVariants = {
+  "placement": "end"
+}
+const drawerCompoundVariants = []
+
+const drawerSlotNames = [
+  [
+    "root",
+    "drawer__root"
+  ],
+  [
+    "header",
+    "drawer__header"
+  ],
+  [
+    "body",
+    "drawer__body"
+  ],
+  [
+    "footer",
+    "drawer__footer"
+  ],
+  [
+    "title",
+    "drawer__title"
+  ],
+  [
+    "close",
+    "drawer__close"
+  ]
+]
+const drawerSlotFns = /* @__PURE__ */ drawerSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, drawerDefaultVariants, getSlotCompoundVariant(drawerCompoundVariants, slotName))])
+
+const drawerFn = memo((props = {}) => {
+  return Object.fromEntries(drawerSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
+})
+
+const drawerVariantKeys = [
+  "placement"
+]
+const getVariantProps = (variants) => ({ ...drawerDefaultVariants, ...compact(variants) })
+
+export const drawer = /* @__PURE__ */ Object.assign(drawerFn, {
+  __recipe__: false,
+  __name__: 'drawer',
+  raw: (props) => props,
+  classNameMap: {},
+  variantKeys: drawerVariantKeys,
+  variantMap: {
+  "placement": [
+    "start",
+    "end"
+  ]
+},
+  splitVariantProps(props) {
+    return splitProps(props, drawerVariantKeys)
+  },
+  getVariantProps
+})

package/styled-system/recipes/field.d.ts

@@ -0,0 +1,40 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface FieldVariant {
+  /**
+ * @default "md"
+ */
+size: "sm" | "md" | "lg"
+/**
+ * @default false
+ */
+fullWidth: boolean
+}
+
+type FieldVariantMap = {
+  [key in keyof FieldVariant]: Array<FieldVariant[key]>
+}
+
+type FieldSlot = "root" | "label" | "helper" | "error"
+
+export type FieldVariantProps = {
+  [key in keyof FieldVariant]?: ConditionalValue<FieldVariant[key]> | undefined
+}
+
+export interface FieldRecipe {
+  __slot: FieldSlot
+  __type: FieldVariantProps
+  (props?: FieldVariantProps): Pretty<Record<FieldSlot, string>>
+  raw: (props?: FieldVariantProps) => FieldVariantProps
+  variantMap: FieldVariantMap
+  variantKeys: Array<keyof FieldVariant>
+  splitVariantProps<Props extends FieldVariantProps>(props: Props): [FieldVariantProps, Pretty<DistributiveOmit<Props, keyof FieldVariantProps>>]
+  getVariantProps: (props?: FieldVariantProps) => FieldVariantProps
+}
+
+/**
+ * Field composition: label, helper, and error around a control
+ */
+export declare const field: FieldRecipe