@stokelp/styled-system 1.0.1

package/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"] }
+     },
+     utility: {
+       
+       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/recipes/drawer.d.ts

@@ -0,0 +1,28 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface DrawerVariant {
+  variant: "left" | "right"
+}
+
+type DrawerVariantMap = {
+  [key in keyof DrawerVariant]: Array<DrawerVariant[key]>
+}
+
+export type DrawerVariantProps = {
+  [key in keyof DrawerVariant]?: ConditionalValue<DrawerVariant[key]> | undefined
+}
+
+export interface DrawerRecipe {
+  __type: DrawerVariantProps
+  (props?: DrawerVariantProps): Pretty<Record<"trigger" | "backdrop" | "positioner" | "content" | "title" | "description" | "closeTrigger" | "header" | "body" | "footer", 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
+}
+
+
+export declare const drawer: DrawerRecipe

package/recipes/drawer.mjs

@@ -0,0 +1,77 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
+import { createRecipe } from './create-recipe.mjs';
+
+const drawerDefaultVariants = {
+  "variant": "right"
+}
+const drawerCompoundVariants = []
+
+const drawerSlotNames = [
+  [
+    "trigger",
+    "drawer__trigger"
+  ],
+  [
+    "backdrop",
+    "drawer__backdrop"
+  ],
+  [
+    "positioner",
+    "drawer__positioner"
+  ],
+  [
+    "content",
+    "drawer__content"
+  ],
+  [
+    "title",
+    "drawer__title"
+  ],
+  [
+    "description",
+    "drawer__description"
+  ],
+  [
+    "closeTrigger",
+    "drawer__closeTrigger"
+  ],
+  [
+    "header",
+    "drawer__header"
+  ],
+  [
+    "body",
+    "drawer__body"
+  ],
+  [
+    "footer",
+    "drawer__footer"
+  ]
+]
+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 = [
+  "variant"
+]
+const getVariantProps = (variants) => ({ ...drawerDefaultVariants, ...compact(variants) })
+
+export const drawer = /* @__PURE__ */ Object.assign(drawerFn, {
+  __recipe__: false,
+  __name__: 'drawer',
+  raw: (props) => props,
+  variantKeys: drawerVariantKeys,
+  variantMap: {
+  "variant": [
+    "left",
+    "right"
+  ]
+},
+  splitVariantProps(props) {
+    return splitProps(props, drawerVariantKeys)
+  },
+  getVariantProps
+})

package/recipes/form-control.d.ts

@@ -0,0 +1,28 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface FormControlVariant {
+  
+}
+
+type FormControlVariantMap = {
+  [key in keyof FormControlVariant]: Array<FormControlVariant[key]>
+}
+
+export type FormControlVariantProps = {
+  [key in keyof FormControlVariant]?: ConditionalValue<FormControlVariant[key]> | undefined
+}
+
+export interface FormControlRecipe {
+  __type: FormControlVariantProps
+  (props?: FormControlVariantProps): string
+  raw: (props?: FormControlVariantProps) => FormControlVariantProps
+  variantMap: FormControlVariantMap
+  variantKeys: Array<keyof FormControlVariant>
+  splitVariantProps<Props extends FormControlVariantProps>(props: Props): [FormControlVariantProps, Pretty<DistributiveOmit<Props, keyof FormControlVariantProps>>]
+  getVariantProps: (props?: FormControlVariantProps) => FormControlVariantProps
+}
+
+/** The styles for the FormControl component */
+export declare const formControl: FormControlRecipe

package/recipes/form-control.mjs

@@ -0,0 +1,24 @@
+import { memo, splitProps } from '../helpers.mjs';
+import { createRecipe, mergeRecipes } from './create-recipe.mjs';
+
+const formControlFn = /* @__PURE__ */ createRecipe('form-control', {}, [])
+
+const formControlVariantMap = {}
+
+const formControlVariantKeys = Object.keys(formControlVariantMap)
+
+export const formControl = /* @__PURE__ */ Object.assign(memo(formControlFn.recipeFn), {
+  __recipe__: true,
+  __name__: 'formControl',
+  __getCompoundVariantCss__: formControlFn.__getCompoundVariantCss__,
+  raw: (props) => props,
+  variantKeys: formControlVariantKeys,
+  variantMap: formControlVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe)
+  },
+  splitVariantProps(props) {
+    return splitProps(props, formControlVariantKeys)
+  },
+  getVariantProps: formControlFn.getVariantProps,
+})

package/recipes/form-helper-text.d.ts

@@ -0,0 +1,28 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface FormHelperTextVariant {
+  
+}
+
+type FormHelperTextVariantMap = {
+  [key in keyof FormHelperTextVariant]: Array<FormHelperTextVariant[key]>
+}
+
+export type FormHelperTextVariantProps = {
+  [key in keyof FormHelperTextVariant]?: ConditionalValue<FormHelperTextVariant[key]> | undefined
+}
+
+export interface FormHelperTextRecipe {
+  __type: FormHelperTextVariantProps
+  (props?: FormHelperTextVariantProps): string
+  raw: (props?: FormHelperTextVariantProps) => FormHelperTextVariantProps
+  variantMap: FormHelperTextVariantMap
+  variantKeys: Array<keyof FormHelperTextVariant>
+  splitVariantProps<Props extends FormHelperTextVariantProps>(props: Props): [FormHelperTextVariantProps, Pretty<DistributiveOmit<Props, keyof FormHelperTextVariantProps>>]
+  getVariantProps: (props?: FormHelperTextVariantProps) => FormHelperTextVariantProps
+}
+
+/** The styles for the FormHelperText component */
+export declare const formHelperText: FormHelperTextRecipe

package/recipes/form-helper-text.mjs

@@ -0,0 +1,24 @@
+import { memo, splitProps } from '../helpers.mjs';
+import { createRecipe, mergeRecipes } from './create-recipe.mjs';
+
+const formHelperTextFn = /* @__PURE__ */ createRecipe('form-helper-text', {}, [])
+
+const formHelperTextVariantMap = {}
+
+const formHelperTextVariantKeys = Object.keys(formHelperTextVariantMap)
+
+export const formHelperText = /* @__PURE__ */ Object.assign(memo(formHelperTextFn.recipeFn), {
+  __recipe__: true,
+  __name__: 'formHelperText',
+  __getCompoundVariantCss__: formHelperTextFn.__getCompoundVariantCss__,
+  raw: (props) => props,
+  variantKeys: formHelperTextVariantKeys,
+  variantMap: formHelperTextVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe)
+  },
+  splitVariantProps(props) {
+    return splitProps(props, formHelperTextVariantKeys)
+  },
+  getVariantProps: formHelperTextFn.getVariantProps,
+})

package/recipes/form-label.d.ts

@@ -0,0 +1,28 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface FormLabelVariant {
+  
+}
+
+type FormLabelVariantMap = {
+  [key in keyof FormLabelVariant]: Array<FormLabelVariant[key]>
+}
+
+export type FormLabelVariantProps = {
+  [key in keyof FormLabelVariant]?: ConditionalValue<FormLabelVariant[key]> | undefined
+}
+
+export interface FormLabelRecipe {
+  __type: FormLabelVariantProps
+  (props?: FormLabelVariantProps): Pretty<Record<"root" | "addon", string>>
+  raw: (props?: FormLabelVariantProps) => FormLabelVariantProps
+  variantMap: FormLabelVariantMap
+  variantKeys: Array<keyof FormLabelVariant>
+  splitVariantProps<Props extends FormLabelVariantProps>(props: Props): [FormLabelVariantProps, Pretty<DistributiveOmit<Props, keyof FormLabelVariantProps>>]
+  getVariantProps: (props?: FormLabelVariantProps) => FormLabelVariantProps
+}
+
+/** The styles for the FormLabel component */
+export declare const formLabel: FormLabelRecipe

package/recipes/form-label.mjs

@@ -0,0 +1,36 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
+import { createRecipe } from './create-recipe.mjs';
+
+const formLabelDefaultVariants = {}
+const formLabelCompoundVariants = []
+
+const formLabelSlotNames = [
+  [
+    "root",
+    "form-label__root"
+  ],
+  [
+    "addon",
+    "form-label__addon"
+  ]
+]
+const formLabelSlotFns = /* @__PURE__ */ formLabelSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, formLabelDefaultVariants, getSlotCompoundVariant(formLabelCompoundVariants, slotName))])
+
+const formLabelFn = memo((props = {}) => {
+  return Object.fromEntries(formLabelSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
+})
+
+const formLabelVariantKeys = []
+const getVariantProps = (variants) => ({ ...formLabelDefaultVariants, ...compact(variants) })
+
+export const formLabel = /* @__PURE__ */ Object.assign(formLabelFn, {
+  __recipe__: false,
+  __name__: 'formLabel',
+  raw: (props) => props,
+  variantKeys: formLabelVariantKeys,
+  variantMap: {},
+  splitVariantProps(props) {
+    return splitProps(props, formLabelVariantKeys)
+  },
+  getVariantProps
+})

package/recipes/heading.d.ts

@@ -0,0 +1,30 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface HeadingVariant {
+  italic: boolean
+underline: boolean
+size: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
+}
+
+type HeadingVariantMap = {
+  [key in keyof HeadingVariant]: Array<HeadingVariant[key]>
+}
+
+export type HeadingVariantProps = {
+  [key in keyof HeadingVariant]?: ConditionalValue<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
+}
+
+
+export declare const heading: HeadingRecipe

package/recipes/heading.mjs

@@ -0,0 +1,41 @@
+import { memo, splitProps } from '../helpers.mjs';
+import { createRecipe, mergeRecipes } from './create-recipe.mjs';
+
+const headingFn = /* @__PURE__ */ createRecipe('heading', {
+  "size": "h2"
+}, [])
+
+const headingVariantMap = {
+  "italic": [
+    "true"
+  ],
+  "underline": [
+    "true"
+  ],
+  "size": [
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6"
+  ]
+}
+
+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/recipes/index.d.ts

@@ -0,0 +1,12 @@
+/* eslint-disable */
+export * from './button';
+export * from './heading';
+export * from './switch-recipe';
+export * from './text';
+export * from './textarea';
+export * from './form-control';
+export * from './form-helper-text';
+export * from './drawer';
+export * from './accordion';
+export * from './form-label';
+export * from './checkbox';

package/recipes/index.mjs

@@ -0,0 +1,11 @@
+export * from './button.mjs';
+export * from './heading.mjs';
+export * from './switch-recipe.mjs';
+export * from './text.mjs';
+export * from './textarea.mjs';
+export * from './form-control.mjs';
+export * from './form-helper-text.mjs';
+export * from './drawer.mjs';
+export * from './accordion.mjs';
+export * from './form-label.mjs';
+export * from './checkbox.mjs';

package/recipes/switch-recipe.d.ts

@@ -0,0 +1,28 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface SwitchRecipeVariant {
+  size: "md"
+}
+
+type SwitchRecipeVariantMap = {
+  [key in keyof SwitchRecipeVariant]: Array<SwitchRecipeVariant[key]>
+}
+
+export type SwitchRecipeVariantProps = {
+  [key in keyof SwitchRecipeVariant]?: ConditionalValue<SwitchRecipeVariant[key]> | undefined
+}
+
+export interface SwitchRecipeRecipe {
+  __type: SwitchRecipeVariantProps
+  (props?: SwitchRecipeVariantProps): Pretty<Record<"root" | "label" | "control" | "thumb", string>>
+  raw: (props?: SwitchRecipeVariantProps) => SwitchRecipeVariantProps
+  variantMap: SwitchRecipeVariantMap
+  variantKeys: Array<keyof SwitchRecipeVariant>
+  splitVariantProps<Props extends SwitchRecipeVariantProps>(props: Props): [SwitchRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof SwitchRecipeVariantProps>>]
+  getVariantProps: (props?: SwitchRecipeVariantProps) => SwitchRecipeVariantProps
+}
+
+
+export declare const switchRecipe: SwitchRecipeRecipe

package/recipes/switch-recipe.mjs

@@ -0,0 +1,52 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
+import { createRecipe } from './create-recipe.mjs';
+
+const switchRecipeDefaultVariants = {
+  "size": "md"
+}
+const switchRecipeCompoundVariants = []
+
+const switchRecipeSlotNames = [
+  [
+    "root",
+    "switch__root"
+  ],
+  [
+    "label",
+    "switch__label"
+  ],
+  [
+    "control",
+    "switch__control"
+  ],
+  [
+    "thumb",
+    "switch__thumb"
+  ]
+]
+const switchRecipeSlotFns = /* @__PURE__ */ switchRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, switchRecipeDefaultVariants, getSlotCompoundVariant(switchRecipeCompoundVariants, slotName))])
+
+const switchRecipeFn = memo((props = {}) => {
+  return Object.fromEntries(switchRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
+})
+
+const switchRecipeVariantKeys = [
+  "size"
+]
+const getVariantProps = (variants) => ({ ...switchRecipeDefaultVariants, ...compact(variants) })
+
+export const switchRecipe = /* @__PURE__ */ Object.assign(switchRecipeFn, {
+  __recipe__: false,
+  __name__: 'switchRecipe',
+  raw: (props) => props,
+  variantKeys: switchRecipeVariantKeys,
+  variantMap: {
+  "size": [
+    "md"
+  ]
+},
+  splitVariantProps(props) {
+    return splitProps(props, switchRecipeVariantKeys)
+  },
+  getVariantProps
+})

package/recipes/text.d.ts

@@ -0,0 +1,31 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface TextVariant {
+  bold: boolean
+italic: boolean
+underline: boolean
+size: "lg" | "md" | "sm"
+}
+
+type TextVariantMap = {
+  [key in keyof TextVariant]: Array<TextVariant[key]>
+}
+
+export type TextVariantProps = {
+  [key in keyof TextVariant]?: ConditionalValue<TextVariant[key]> | undefined
+}
+
+export interface TextRecipe {
+  __type: TextVariantProps
+  (props?: TextVariantProps): string
+  raw: (props?: TextVariantProps) => TextVariantProps
+  variantMap: TextVariantMap
+  variantKeys: Array<keyof TextVariant>
+  splitVariantProps<Props extends TextVariantProps>(props: Props): [TextVariantProps, Pretty<DistributiveOmit<Props, keyof TextVariantProps>>]
+  getVariantProps: (props?: TextVariantProps) => TextVariantProps
+}
+
+
+export declare const text: TextRecipe

package/recipes/text.mjs

@@ -0,0 +1,41 @@
+import { memo, splitProps } from '../helpers.mjs';
+import { createRecipe, mergeRecipes } from './create-recipe.mjs';
+
+const textFn = /* @__PURE__ */ createRecipe('text', {
+  "size": "md"
+}, [])
+
+const textVariantMap = {
+  "bold": [
+    "true"
+  ],
+  "italic": [
+    "true"
+  ],
+  "underline": [
+    "true"
+  ],
+  "size": [
+    "lg",
+    "md",
+    "sm"
+  ]
+}
+
+const textVariantKeys = Object.keys(textVariantMap)
+
+export const text = /* @__PURE__ */ Object.assign(memo(textFn.recipeFn), {
+  __recipe__: true,
+  __name__: 'text',
+  __getCompoundVariantCss__: textFn.__getCompoundVariantCss__,
+  raw: (props) => props,
+  variantKeys: textVariantKeys,
+  variantMap: textVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe)
+  },
+  splitVariantProps(props) {
+    return splitProps(props, textVariantKeys)
+  },
+  getVariantProps: textFn.getVariantProps,
+})

package/recipes/textarea.d.ts

@@ -0,0 +1,28 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface TextareaVariant {
+  
+}
+
+type TextareaVariantMap = {
+  [key in keyof TextareaVariant]: Array<TextareaVariant[key]>
+}
+
+export type TextareaVariantProps = {
+  [key in keyof TextareaVariant]?: ConditionalValue<TextareaVariant[key]> | undefined
+}
+
+export interface TextareaRecipe {
+  __type: TextareaVariantProps
+  (props?: TextareaVariantProps): string
+  raw: (props?: TextareaVariantProps) => TextareaVariantProps
+  variantMap: TextareaVariantMap
+  variantKeys: Array<keyof TextareaVariant>
+  splitVariantProps<Props extends TextareaVariantProps>(props: Props): [TextareaVariantProps, Pretty<DistributiveOmit<Props, keyof TextareaVariantProps>>]
+  getVariantProps: (props?: TextareaVariantProps) => TextareaVariantProps
+}
+
+
+export declare const textarea: TextareaRecipe

package/recipes/textarea.mjs

@@ -0,0 +1,24 @@
+import { memo, splitProps } from '../helpers.mjs';
+import { createRecipe, mergeRecipes } from './create-recipe.mjs';
+
+const textareaFn = /* @__PURE__ */ createRecipe('textarea', {}, [])
+
+const textareaVariantMap = {}
+
+const textareaVariantKeys = Object.keys(textareaVariantMap)
+
+export const textarea = /* @__PURE__ */ Object.assign(memo(textareaFn.recipeFn), {
+  __recipe__: true,
+  __name__: 'textarea',
+  __getCompoundVariantCss__: textareaFn.__getCompoundVariantCss__,
+  raw: (props) => props,
+  variantKeys: textareaVariantKeys,
+  variantMap: textareaVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe)
+  },
+  splitVariantProps(props) {
+    return splitProps(props, textareaVariantKeys)
+  },
+  getVariantProps: textareaFn.getVariantProps,
+})

package/tokens/index.d.ts

@@ -0,0 +1,9 @@
+/* eslint-disable */
+import type { Token } from './tokens';
+
+export declare const token: {
+  (path: Token, fallback?: string): string
+  var: (path: Token, fallback?: string) => string
+}
+
+export * from './tokens';