@becket-ui/tokens 0.1.0

package/styled-system/recipes/field.mjs

@@ -0,0 +1,61 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
+import { createRecipe } from './create-recipe.mjs';
+
+const fieldDefaultVariants = {
+  "size": "md",
+  "fullWidth": false
+}
+const fieldCompoundVariants = []
+
+const fieldSlotNames = [
+  [
+    "root",
+    "field__root"
+  ],
+  [
+    "label",
+    "field__label"
+  ],
+  [
+    "helper",
+    "field__helper"
+  ],
+  [
+    "error",
+    "field__error"
+  ]
+]
+const fieldSlotFns = /* @__PURE__ */ fieldSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, fieldDefaultVariants, getSlotCompoundVariant(fieldCompoundVariants, slotName))])
+
+const fieldFn = memo((props = {}) => {
+  return Object.fromEntries(fieldSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
+})
+
+const fieldVariantKeys = [
+  "size",
+  "fullWidth"
+]
+const getVariantProps = (variants) => ({ ...fieldDefaultVariants, ...compact(variants) })
+
+export const field = /* @__PURE__ */ Object.assign(fieldFn, {
+  __recipe__: false,
+  __name__: 'field',
+  raw: (props) => props,
+  classNameMap: {},
+  variantKeys: fieldVariantKeys,
+  variantMap: {
+  "size": [
+    "sm",
+    "md",
+    "lg"
+  ],
+  "fullWidth": [
+    "true",
+    "false"
+  ]
+},
+  splitVariantProps(props) {
+    return splitProps(props, fieldVariantKeys)
+  },
+  getVariantProps
+})

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

@@ -0,0 +1,40 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface HeadingVariant {
+  /**
+ * @default "xl"
+ */
+size: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl"
+/**
+ * @default false
+ */
+withGradient: boolean
+}
+
+type HeadingVariantMap = {
+  [key in keyof HeadingVariant]: Array<HeadingVariant[key]>
+}
+
+
+
+export type HeadingVariantProps = {
+  [key in keyof HeadingVariant]?: HeadingVariant[key] | undefined
+}
+
+export interface HeadingRecipe {
+  
+  __type: HeadingVariantProps
+  (props?: HeadingVariantProps): string
+  raw: (props?: HeadingVariantProps) => HeadingVariantProps
+  variantMap: HeadingVariantMap
+  variantKeys: Array<keyof HeadingVariant>
+  splitVariantProps<Props extends HeadingVariantProps>(props: Props): [HeadingVariantProps, Pretty<DistributiveOmit<Props, keyof HeadingVariantProps>>]
+  getVariantProps: (props?: HeadingVariantProps) => HeadingVariantProps
+}
+
+/**
+ * The styles for the Heading component
+ */
+export declare const heading: HeadingRecipe

package/styled-system/recipes/heading.mjs

@@ -0,0 +1,54 @@
+import { memo, splitProps } from '../helpers.mjs';
+import { createRecipe, mergeRecipes } from './create-recipe.mjs';
+
+const headingFn = /* @__PURE__ */ createRecipe('heading', {
+  "size": "xl",
+  "withGradient": false
+}, [
+  {
+    "withGradient": true,
+    "css": {
+      "display": "inline",
+      "color": "transparent",
+      "backgroundImage": "{gradients.primary}",
+      "backgroundClip": "text",
+      "WebkitBackgroundClip": "text"
+    }
+  }
+])
+
+const headingVariantMap = {
+  "size": [
+    "sm",
+    "md",
+    "lg",
+    "xl",
+    "2xl",
+    "3xl",
+    "4xl",
+    "5xl",
+    "6xl"
+  ],
+  "withGradient": [
+    "false",
+    "true"
+  ]
+}
+
+const headingVariantKeys = Object.keys(headingVariantMap)
+
+export const heading = /* @__PURE__ */ Object.assign(memo(headingFn.recipeFn), {
+  __recipe__: true,
+  __name__: 'heading',
+  __getCompoundVariantCss__: headingFn.__getCompoundVariantCss__,
+  raw: (props) => props,
+  variantKeys: headingVariantKeys,
+  variantMap: headingVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe)
+  },
+  splitVariantProps(props) {
+    return splitProps(props, headingVariantKeys)
+  },
+  getVariantProps: headingFn.getVariantProps,
+})

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

@@ -0,0 +1,38 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface HideVariant {
+  below: "sm" | "md" | "lg" | "xl" | "2xl"
+from: "sm" | "md" | "lg" | "xl" | "2xl"
+/**
+ * @default true
+ */
+asContents: boolean
+}
+
+type HideVariantMap = {
+  [key in keyof HideVariant]: Array<HideVariant[key]>
+}
+
+
+
+export type HideVariantProps = {
+  [key in keyof HideVariant]?: HideVariant[key] | undefined
+}
+
+export interface HideRecipe {
+  
+  __type: HideVariantProps
+  (props?: HideVariantProps): string
+  raw: (props?: HideVariantProps) => HideVariantProps
+  variantMap: HideVariantMap
+  variantKeys: Array<keyof HideVariant>
+  splitVariantProps<Props extends HideVariantProps>(props: Props): [HideVariantProps, Pretty<DistributiveOmit<Props, keyof HideVariantProps>>]
+  getVariantProps: (props?: HideVariantProps) => HideVariantProps
+}
+
+/**
+ * Hide children below or from a breakpoint (CSS media queries)
+ */
+export declare const hide: HideRecipe

package/styled-system/recipes/hide.mjs

@@ -0,0 +1,246 @@
+import { memo, splitProps } from '../helpers.mjs';
+import { createRecipe, mergeRecipes } from './create-recipe.mjs';
+
+const hideFn = /* @__PURE__ */ createRecipe('hide', {
+  "asContents": true
+}, [
+  {
+    "below": "sm",
+    "asContents": true,
+    "css": {
+      "display": {
+        "base": "none",
+        "sm": "contents"
+      }
+    }
+  },
+  {
+    "below": "sm",
+    "asContents": false,
+    "css": {
+      "display": {
+        "base": "none",
+        "sm": "block"
+      }
+    }
+  },
+  {
+    "from": "sm",
+    "asContents": true,
+    "css": {
+      "display": {
+        "base": "contents",
+        "sm": "none"
+      }
+    }
+  },
+  {
+    "from": "sm",
+    "asContents": false,
+    "css": {
+      "display": {
+        "base": "block",
+        "sm": "none"
+      }
+    }
+  },
+  {
+    "below": "md",
+    "asContents": true,
+    "css": {
+      "display": {
+        "base": "none",
+        "md": "contents"
+      }
+    }
+  },
+  {
+    "below": "md",
+    "asContents": false,
+    "css": {
+      "display": {
+        "base": "none",
+        "md": "block"
+      }
+    }
+  },
+  {
+    "from": "md",
+    "asContents": true,
+    "css": {
+      "display": {
+        "base": "contents",
+        "md": "none"
+      }
+    }
+  },
+  {
+    "from": "md",
+    "asContents": false,
+    "css": {
+      "display": {
+        "base": "block",
+        "md": "none"
+      }
+    }
+  },
+  {
+    "below": "lg",
+    "asContents": true,
+    "css": {
+      "display": {
+        "base": "none",
+        "lg": "contents"
+      }
+    }
+  },
+  {
+    "below": "lg",
+    "asContents": false,
+    "css": {
+      "display": {
+        "base": "none",
+        "lg": "block"
+      }
+    }
+  },
+  {
+    "from": "lg",
+    "asContents": true,
+    "css": {
+      "display": {
+        "base": "contents",
+        "lg": "none"
+      }
+    }
+  },
+  {
+    "from": "lg",
+    "asContents": false,
+    "css": {
+      "display": {
+        "base": "block",
+        "lg": "none"
+      }
+    }
+  },
+  {
+    "below": "xl",
+    "asContents": true,
+    "css": {
+      "display": {
+        "base": "none",
+        "xl": "contents"
+      }
+    }
+  },
+  {
+    "below": "xl",
+    "asContents": false,
+    "css": {
+      "display": {
+        "base": "none",
+        "xl": "block"
+      }
+    }
+  },
+  {
+    "from": "xl",
+    "asContents": true,
+    "css": {
+      "display": {
+        "base": "contents",
+        "xl": "none"
+      }
+    }
+  },
+  {
+    "from": "xl",
+    "asContents": false,
+    "css": {
+      "display": {
+        "base": "block",
+        "xl": "none"
+      }
+    }
+  },
+  {
+    "below": "2xl",
+    "asContents": true,
+    "css": {
+      "display": {
+        "base": "none",
+        "2xl": "contents"
+      }
+    }
+  },
+  {
+    "below": "2xl",
+    "asContents": false,
+    "css": {
+      "display": {
+        "base": "none",
+        "2xl": "block"
+      }
+    }
+  },
+  {
+    "from": "2xl",
+    "asContents": true,
+    "css": {
+      "display": {
+        "base": "contents",
+        "2xl": "none"
+      }
+    }
+  },
+  {
+    "from": "2xl",
+    "asContents": false,
+    "css": {
+      "display": {
+        "base": "block",
+        "2xl": "none"
+      }
+    }
+  }
+])
+
+const hideVariantMap = {
+  "below": [
+    "sm",
+    "md",
+    "lg",
+    "xl",
+    "2xl"
+  ],
+  "from": [
+    "sm",
+    "md",
+    "lg",
+    "xl",
+    "2xl"
+  ],
+  "asContents": [
+    "true",
+    "false"
+  ]
+}
+
+const hideVariantKeys = Object.keys(hideVariantMap)
+
+export const hide = /* @__PURE__ */ Object.assign(memo(hideFn.recipeFn), {
+  __recipe__: true,
+  __name__: 'hide',
+  __getCompoundVariantCss__: hideFn.__getCompoundVariantCss__,
+  raw: (props) => props,
+  variantKeys: hideVariantKeys,
+  variantMap: hideVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe)
+  },
+  splitVariantProps(props) {
+    return splitProps(props, hideVariantKeys)
+  },
+  getVariantProps: hideFn.getVariantProps,
+})

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

@@ -0,0 +1,23 @@
+/* eslint-disable */
+export * from './button';
+export * from './heading';
+export * from './hide';
+export * from './tag';
+export * from './badge';
+export * from './card';
+export * from './field';
+export * from './switch-recipe';
+export * from './text-field-recipe';
+export * from './checkbox';
+export * from './radio';
+export * from './select-recipe';
+export * from './textarea-recipe';
+export * from './dialog';
+export * from './drawer';
+export * from './menu';
+export * from './tabs';
+export * from './table';
+export * from './spinner';
+export * from './link';
+export * from './separator';
+export * from './tooltip';

package/styled-system/recipes/index.mjs

@@ -0,0 +1,22 @@
+export * from './button.mjs';
+export * from './heading.mjs';
+export * from './hide.mjs';
+export * from './tag.mjs';
+export * from './badge.mjs';
+export * from './card.mjs';
+export * from './field.mjs';
+export * from './switch-recipe.mjs';
+export * from './text-field-recipe.mjs';
+export * from './checkbox.mjs';
+export * from './radio.mjs';
+export * from './select-recipe.mjs';
+export * from './textarea-recipe.mjs';
+export * from './dialog.mjs';
+export * from './drawer.mjs';
+export * from './menu.mjs';
+export * from './tabs.mjs';
+export * from './table.mjs';
+export * from './spinner.mjs';
+export * from './link.mjs';
+export * from './separator.mjs';
+export * from './tooltip.mjs';

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

@@ -0,0 +1,40 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface LinkVariant {
+  /**
+ * @default "default"
+ */
+visual: "default" | "muted"
+/**
+ * @default false
+ */
+visited: boolean
+}
+
+type LinkVariantMap = {
+  [key in keyof LinkVariant]: Array<LinkVariant[key]>
+}
+
+
+
+export type LinkVariantProps = {
+  [key in keyof LinkVariant]?: ConditionalValue<LinkVariant[key]> | undefined
+}
+
+export interface LinkRecipe {
+  
+  __type: LinkVariantProps
+  (props?: LinkVariantProps): string
+  raw: (props?: LinkVariantProps) => LinkVariantProps
+  variantMap: LinkVariantMap
+  variantKeys: Array<keyof LinkVariant>
+  splitVariantProps<Props extends LinkVariantProps>(props: Props): [LinkVariantProps, Pretty<DistributiveOmit<Props, keyof LinkVariantProps>>]
+  getVariantProps: (props?: LinkVariantProps) => LinkVariantProps
+}
+
+/**
+ * Inline link
+ */
+export declare const link: LinkRecipe

package/styled-system/recipes/link.mjs

@@ -0,0 +1,36 @@
+import { memo, splitProps } from '../helpers.mjs';
+import { createRecipe, mergeRecipes } from './create-recipe.mjs';
+
+const linkFn = /* @__PURE__ */ createRecipe('link', {
+  "visual": "default",
+  "visited": false
+}, [])
+
+const linkVariantMap = {
+  "visual": [
+    "default",
+    "muted"
+  ],
+  "visited": [
+    "true",
+    "false"
+  ]
+}
+
+const linkVariantKeys = Object.keys(linkVariantMap)
+
+export const link = /* @__PURE__ */ Object.assign(memo(linkFn.recipeFn), {
+  __recipe__: true,
+  __name__: 'link',
+  __getCompoundVariantCss__: linkFn.__getCompoundVariantCss__,
+  raw: (props) => props,
+  variantKeys: linkVariantKeys,
+  variantMap: linkVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe)
+  },
+  splitVariantProps(props) {
+    return splitProps(props, linkVariantKeys)
+  },
+  getVariantProps: linkFn.getVariantProps,
+})

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

@@ -0,0 +1,33 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface MenuVariant {
+  
+}
+
+type MenuVariantMap = {
+  [key in keyof MenuVariant]: Array<MenuVariant[key]>
+}
+
+type MenuSlot = "root" | "trigger" | "content" | "item"
+
+export type MenuVariantProps = {
+  [key in keyof MenuVariant]?: ConditionalValue<MenuVariant[key]> | undefined
+}
+
+export interface MenuRecipe {
+  __slot: MenuSlot
+  __type: MenuVariantProps
+  (props?: MenuVariantProps): Pretty<Record<MenuSlot, string>>
+  raw: (props?: MenuVariantProps) => MenuVariantProps
+  variantMap: MenuVariantMap
+  variantKeys: Array<keyof MenuVariant>
+  splitVariantProps<Props extends MenuVariantProps>(props: Props): [MenuVariantProps, Pretty<DistributiveOmit<Props, keyof MenuVariantProps>>]
+  getVariantProps: (props?: MenuVariantProps) => MenuVariantProps
+}
+
+/**
+ * Disclosure menu using details/summary
+ */
+export declare const menu: MenuRecipe

package/styled-system/recipes/menu.mjs

@@ -0,0 +1,45 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
+import { createRecipe } from './create-recipe.mjs';
+
+const menuDefaultVariants = {}
+const menuCompoundVariants = []
+
+const menuSlotNames = [
+  [
+    "root",
+    "menu__root"
+  ],
+  [
+    "trigger",
+    "menu__trigger"
+  ],
+  [
+    "content",
+    "menu__content"
+  ],
+  [
+    "item",
+    "menu__item"
+  ]
+]
+const menuSlotFns = /* @__PURE__ */ menuSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, menuDefaultVariants, getSlotCompoundVariant(menuCompoundVariants, slotName))])
+
+const menuFn = memo((props = {}) => {
+  return Object.fromEntries(menuSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
+})
+
+const menuVariantKeys = []
+const getVariantProps = (variants) => ({ ...menuDefaultVariants, ...compact(variants) })
+
+export const menu = /* @__PURE__ */ Object.assign(menuFn, {
+  __recipe__: false,
+  __name__: 'menu',
+  raw: (props) => props,
+  classNameMap: {},
+  variantKeys: menuVariantKeys,
+  variantMap: {},
+  splitVariantProps(props) {
+    return splitProps(props, menuVariantKeys)
+  },
+  getVariantProps
+})

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

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