@webflare/ui 0.0.0-stage → 0.1.0

package/dist/styled-system/patterns/index.js

@@ -0,0 +1,20 @@
+export * from './aspect-ratio.js';
+export * from './bleed.js';
+export * from './box.js';
+export * from './center.js';
+export * from './circle.js';
+export * from './container.js';
+export * from './cq.js';
+export * from './divider.js';
+export * from './flex.js';
+export * from './float.js';
+export * from './grid.js';
+export * from './grid-item.js';
+export * from './hstack.js';
+export * from './link-overlay.js';
+export * from './spacer.js';
+export * from './square.js';
+export * from './stack.js';
+export * from './visually-hidden.js';
+export * from './vstack.js';
+export * from './wrap.js';

package/dist/styled-system/patterns/link-overlay.d.ts

@@ -0,0 +1,17 @@
+import type { SystemStyleObject } from '../types/system.js';
+
+export interface LinkOverlayProperties {}
+
+type LinkOverlayRestStyles = Omit<SystemStyleObject, keyof LinkOverlayProperties>
+
+interface LinkOverlayStyles extends LinkOverlayProperties, LinkOverlayRestStyles {}
+
+interface LinkOverlayPatternFn {
+  (styles?: LinkOverlayStyles): string
+  raw: (styles?: LinkOverlayStyles) => SystemStyleObject
+  propKeys: Array<keyof LinkOverlayProperties>
+}
+
+export declare function linkOverlayRaw(styles?: LinkOverlayStyles): SystemStyleObject;
+
+export declare const linkOverlay: LinkOverlayPatternFn;

package/dist/styled-system/patterns/link-overlay.js

@@ -0,0 +1,25 @@
+import { getPatternStyles, patternFns } from './runtime.js';
+import { memo } from '../helpers.js';
+import { css } from '../css/index.js';
+
+const linkOverlayConfig = { transform(props) {
+  return {
+    _before: {
+      content: "\"\"",
+      position: "absolute",
+      inset: "0",
+      zIndex: "0",
+      ...props["_before"]
+    },
+    ...props
+  };
+} }
+
+export function linkOverlayRaw(styles) {
+  const s = getPatternStyles(linkOverlayConfig, styles || {})
+  return linkOverlayConfig.transform(s, patternFns)
+}
+
+export const linkOverlay = /* @__PURE__ */ Object.assign(/* @__PURE__ */ memo(function linkOverlay(styles = {}) {
+  return css(linkOverlayRaw(styles))
+}), { raw: linkOverlayRaw, propKeys: [] })

package/dist/styled-system/patterns/runtime.js

@@ -0,0 +1,25 @@
+import { mapObject, withDefaults } from '../helpers.js';
+
+const CSS_FUNCTION_REGEX = /^(min|max|clamp|calc)\(.*\)/
+const CSS_VAR_REGEX = /^var\(--.+\)$/
+const CSS_UNIT_REGEX = /^[+-]?[0-9]*.?[0-9]+(?:[eE][+-]?[0-9]+)?(?:cm|mm|Q|in|pc|pt|px|em|ex|ch|rem|lh|rlh|vw|vh|vmin|vmax|vb|vi|svw|svh|lvw|lvh|dvw|dvh|cqw|cqh|cqi|cqb|cqmin|cqmax|%)$/
+
+export function isCssFunction(v) {
+  return typeof v === "string" && CSS_FUNCTION_REGEX.test(v)
+}
+
+export function isCssVar(v) {
+  return typeof v === "string" && CSS_VAR_REGEX.test(v)
+}
+
+export function isCssUnit(v) {
+  return typeof v === "string" && CSS_UNIT_REGEX.test(v)
+}
+
+export const patternFns = { map: mapObject, isCssFunction, isCssVar, isCssUnit }
+
+export function getPatternStyles(pattern, styles) {
+  if (!pattern?.defaultValues) return styles
+  const defaults = typeof pattern.defaultValues === "function" ? pattern.defaultValues(styles) : pattern.defaultValues
+  return withDefaults(defaults, styles)
+}

package/dist/styled-system/patterns/spacer.d.ts

@@ -0,0 +1,20 @@
+import type { TokenValue } from '../types/tokens.js';
+import type { ConditionalValue, SystemStyleObject } from '../types/system.js';
+
+export interface SpacerProperties {
+  size?: ConditionalValue<TokenValue<"spacing">>
+}
+
+type SpacerRestStyles = Omit<SystemStyleObject, keyof SpacerProperties>
+
+interface SpacerStyles extends SpacerProperties, SpacerRestStyles {}
+
+interface SpacerPatternFn {
+  (styles?: SpacerStyles): string
+  raw: (styles?: SpacerStyles) => SystemStyleObject
+  propKeys: Array<keyof SpacerProperties>
+}
+
+export declare function spacerRaw(styles?: SpacerStyles): SystemStyleObject;
+
+export declare const spacer: SpacerPatternFn;

package/dist/styled-system/patterns/spacer.js

@@ -0,0 +1,25 @@
+import { getPatternStyles, patternFns } from './runtime.js';
+import { memo } from '../helpers.js';
+import { css } from '../css/index.js';
+
+const spacerConfig = { transform(props, { map, isCssUnit, isCssVar }) {
+  const { size, ...rest } = props;
+  return {
+    alignSelf: "stretch",
+    justifySelf: "stretch",
+    flex: map(size, (v) => {
+      if (v == null) return "1";
+      return `0 0 ${isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`}`;
+    }),
+    ...rest
+  };
+} }
+
+export function spacerRaw(styles) {
+  const s = getPatternStyles(spacerConfig, styles || {})
+  return spacerConfig.transform(s, patternFns)
+}
+
+export const spacer = /* @__PURE__ */ Object.assign(/* @__PURE__ */ memo(function spacer(styles = {}) {
+  return css(spacerRaw(styles))
+}), { raw: spacerRaw, propKeys: ["size"] })

package/dist/styled-system/patterns/square.d.ts

@@ -0,0 +1,19 @@
+import type { SystemProperties, SystemStyleObject } from '../types/system.js';
+
+export interface SquareProperties {
+  size?: SystemProperties["width"]
+}
+
+type SquareRestStyles = Omit<SystemStyleObject, keyof SquareProperties>
+
+interface SquareStyles extends SquareProperties, SquareRestStyles {}
+
+interface SquarePatternFn {
+  (styles?: SquareStyles): string
+  raw: (styles?: SquareStyles) => SystemStyleObject
+  propKeys: Array<keyof SquareProperties>
+}
+
+export declare function squareRaw(styles?: SquareStyles): SystemStyleObject;
+
+export declare const square: SquarePatternFn;

package/dist/styled-system/patterns/square.js

@@ -0,0 +1,25 @@
+import { getPatternStyles, patternFns } from './runtime.js';
+import { memo } from '../helpers.js';
+import { css } from '../css/index.js';
+
+const squareConfig = { transform(props) {
+  const { size, ...rest } = props;
+  return {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flex: "0 0 auto",
+    width: size,
+    height: size,
+    ...rest
+  };
+} }
+
+export function squareRaw(styles) {
+  const s = getPatternStyles(squareConfig, styles || {})
+  return squareConfig.transform(s, patternFns)
+}
+
+export const square = /* @__PURE__ */ Object.assign(/* @__PURE__ */ memo(function square(styles = {}) {
+  return css(squareRaw(styles))
+}), { raw: squareRaw, propKeys: ["size"] })

package/dist/styled-system/patterns/stack.d.ts

@@ -0,0 +1,22 @@
+import type { SystemProperties, SystemStyleObject } from '../types/system.js';
+
+export interface StackProperties {
+  align?: SystemProperties["alignItems"]
+  direction?: SystemProperties["flexDirection"]
+  gap?: SystemProperties["gap"]
+  justify?: SystemProperties["justifyContent"]
+}
+
+type StackRestStyles = Omit<SystemStyleObject, keyof StackProperties>
+
+interface StackStyles extends StackProperties, StackRestStyles {}
+
+interface StackPatternFn {
+  (styles?: StackStyles): string
+  raw: (styles?: StackStyles) => SystemStyleObject
+  propKeys: Array<keyof StackProperties>
+}
+
+export declare function stackRaw(styles?: StackStyles): SystemStyleObject;
+
+export declare const stack: StackPatternFn;

package/dist/styled-system/patterns/stack.js

@@ -0,0 +1,30 @@
+import { getPatternStyles, patternFns } from './runtime.js';
+import { memo } from '../helpers.js';
+import { css } from '../css/index.js';
+
+const stackConfig = {
+  transform(props) {
+    const { align, justify, direction, gap, ...rest } = props;
+    return {
+      display: "flex",
+      flexDirection: direction,
+      alignItems: align,
+      justifyContent: justify,
+      gap,
+      ...rest
+    };
+  },
+  defaultValues: {
+    direction: "column",
+    gap: "8px"
+  }
+}
+
+export function stackRaw(styles) {
+  const s = getPatternStyles(stackConfig, styles || {})
+  return stackConfig.transform(s, patternFns)
+}
+
+export const stack = /* @__PURE__ */ Object.assign(/* @__PURE__ */ memo(function stack(styles = {}) {
+  return css(stackRaw(styles))
+}), { raw: stackRaw, propKeys: ["align","direction","gap","justify"] })

package/dist/styled-system/patterns/visually-hidden.d.ts

@@ -0,0 +1,17 @@
+import type { SystemStyleObject } from '../types/system.js';
+
+export interface VisuallyHiddenProperties {}
+
+type VisuallyHiddenRestStyles = Omit<SystemStyleObject, keyof VisuallyHiddenProperties>
+
+interface VisuallyHiddenStyles extends VisuallyHiddenProperties, VisuallyHiddenRestStyles {}
+
+interface VisuallyHiddenPatternFn {
+  (styles?: VisuallyHiddenStyles): string
+  raw: (styles?: VisuallyHiddenStyles) => SystemStyleObject
+  propKeys: Array<keyof VisuallyHiddenProperties>
+}
+
+export declare function visuallyHiddenRaw(styles?: VisuallyHiddenStyles): SystemStyleObject;
+
+export declare const visuallyHidden: VisuallyHiddenPatternFn;

package/dist/styled-system/patterns/visually-hidden.js

@@ -0,0 +1,19 @@
+import { getPatternStyles, patternFns } from './runtime.js';
+import { memo } from '../helpers.js';
+import { css } from '../css/index.js';
+
+const visuallyHiddenConfig = { transform(props) {
+  return {
+    srOnly: true,
+    ...props
+  };
+} }
+
+export function visuallyHiddenRaw(styles) {
+  const s = getPatternStyles(visuallyHiddenConfig, styles || {})
+  return visuallyHiddenConfig.transform(s, patternFns)
+}
+
+export const visuallyHidden = /* @__PURE__ */ Object.assign(/* @__PURE__ */ memo(function visuallyHidden(styles = {}) {
+  return css(visuallyHiddenRaw(styles))
+}), { raw: visuallyHiddenRaw, propKeys: [] })

package/dist/styled-system/patterns/vstack.d.ts

@@ -0,0 +1,20 @@
+import type { SystemProperties, SystemStyleObject } from '../types/system.js';
+
+export interface VstackProperties {
+  gap?: SystemProperties["gap"]
+  justify?: SystemProperties["justifyContent"]
+}
+
+type VstackRestStyles = Omit<SystemStyleObject, keyof VstackProperties>
+
+interface VstackStyles extends VstackProperties, VstackRestStyles {}
+
+interface VstackPatternFn {
+  (styles?: VstackStyles): string
+  raw: (styles?: VstackStyles) => SystemStyleObject
+  propKeys: Array<keyof VstackProperties>
+}
+
+export declare function vstackRaw(styles?: VstackStyles): SystemStyleObject;
+
+export declare const vstack: VstackPatternFn;

package/dist/styled-system/patterns/vstack.js

@@ -0,0 +1,27 @@
+import { getPatternStyles, patternFns } from './runtime.js';
+import { memo } from '../helpers.js';
+import { css } from '../css/index.js';
+
+const vstackConfig = {
+  transform(props) {
+    const { justify, gap, ...rest } = props;
+    return {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: justify,
+      gap,
+      flexDirection: "column",
+      ...rest
+    };
+  },
+  defaultValues: { gap: "8px" }
+}
+
+export function vstackRaw(styles) {
+  const s = getPatternStyles(vstackConfig, styles || {})
+  return vstackConfig.transform(s, patternFns)
+}
+
+export const vstack = /* @__PURE__ */ Object.assign(/* @__PURE__ */ memo(function vstack(styles = {}) {
+  return css(vstackRaw(styles))
+}), { raw: vstackRaw, propKeys: ["gap","justify"] })

package/dist/styled-system/patterns/wrap.d.ts

@@ -0,0 +1,23 @@
+import type { SystemProperties, SystemStyleObject } from '../types/system.js';
+
+export interface WrapProperties {
+  align?: SystemProperties["alignItems"]
+  columnGap?: SystemProperties["gap"]
+  gap?: SystemProperties["gap"]
+  justify?: SystemProperties["justifyContent"]
+  rowGap?: SystemProperties["gap"]
+}
+
+type WrapRestStyles = Omit<SystemStyleObject, keyof WrapProperties>
+
+interface WrapStyles extends WrapProperties, WrapRestStyles {}
+
+interface WrapPatternFn {
+  (styles?: WrapStyles): string
+  raw: (styles?: WrapStyles) => SystemStyleObject
+  propKeys: Array<keyof WrapProperties>
+}
+
+export declare function wrapRaw(styles?: WrapStyles): SystemStyleObject;
+
+export declare const wrap: WrapPatternFn;

package/dist/styled-system/patterns/wrap.js

@@ -0,0 +1,26 @@
+import { getPatternStyles, patternFns } from './runtime.js';
+import { memo } from '../helpers.js';
+import { css } from '../css/index.js';
+
+const wrapConfig = { transform(props) {
+  const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "8px", align, justify, ...rest } = props;
+  return {
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: align,
+    justifyContent: justify,
+    gap,
+    columnGap,
+    rowGap,
+    ...rest
+  };
+} }
+
+export function wrapRaw(styles) {
+  const s = getPatternStyles(wrapConfig, styles || {})
+  return wrapConfig.transform(s, patternFns)
+}
+
+export const wrap = /* @__PURE__ */ Object.assign(/* @__PURE__ */ memo(function wrap(styles = {}) {
+  return css(wrapRaw(styles))
+}), { raw: wrapRaw, propKeys: ["align","columnGap","gap","justify","rowGap"] })

package/dist/styled-system/recipes/runtime.js

@@ -0,0 +1,133 @@
+import { createSerializeCss, getCompoundVariantClassNames, getSlotCompoundVariant, memo, splitProps, toHash, uniq, withDefaults, withoutSpace } from '../helpers.js';
+import { breakpointKeys, finalizeConditions, sortConditions } from '../css/conditions.js';
+import { cx } from '../css/cx.js';
+
+function normalize(config) {
+  const variantMap = config.variantMap ?? {}
+  return {
+    name: config.name,
+    className: config.className ?? config.name,
+    slots: config.slots ?? [],
+    variantMap,
+    variantKeys: Object.keys(variantMap),
+    defaults: config.defaultVariants ?? {},
+    compounds: config.compoundVariants ?? [],
+  }
+}
+
+export function createRecipe(config) {
+  const { name, className, variantMap, variantKeys, defaults, compounds } = normalize(config)
+  const classPrefix = null
+
+  const recipeCss = /* @__PURE__ */ createSerializeCss({
+    hash: false,
+    conditions: {
+      shift: sortConditions,
+      finalize: finalizeConditions,
+      breakpoints: { keys: breakpointKeys },
+    },
+    utility: {
+      prefix: classPrefix,
+      toHash(path, hashFn) {
+        return hashFn(path.join(":"))
+      },
+      transform(prop, value) {
+        return { className: value === "__ignore__" ? className : `${className}--${prop}_${withoutSpace(value)}` }
+      },
+    },
+  })
+  const formatClassName = (name) => {
+    const next = false ? toHash(name) : name
+    return classPrefix ? `${classPrefix}-${next}` : next
+  }
+
+  function resolve(props = {}) {
+    return { [className]: "__ignore__", ...withDefaults(defaults, props) }
+  }
+
+  function assertNoConditions(props) {
+    if (compounds.length === 0) return
+    for (const key of variantKeys) {
+      const value = props[key]
+      if (value != null && typeof value === "object") {
+        throw new Error(`[recipe:${className}:${key}] Conditions are not supported when using compound variants.`)
+      }
+    }
+  }
+
+  function compoundClasses(props) {
+    return getCompoundVariantClassNames(compounds, resolve(props), formatClassName)
+  }
+
+  const recipe = attach(memo(function recipeFn(props = {}, withCompoundVariants = true) {
+    assertNoConditions(props)
+    const recipeClass = recipeCss(resolve(props))
+    if (!withCompoundVariants) return recipeClass
+    const compoundsClass = compoundClasses(props)
+    return cx(recipeClass, compoundsClass)
+  }), name, variantKeys, variantMap, resolve)
+  recipe.__recipe__ = true
+  recipe.__getCompoundVariantClasses__ = compoundClasses
+  recipe.merge = function merge(other) {
+    return mergeRecipes(recipe, other)
+  }
+  return recipe
+}
+
+export function createSlotRecipe(config) {
+  const { name, className, slots, variantMap, variantKeys, defaults, compounds } = normalize(config)
+
+  const slotFns = slots.map(function toSlotRecipe(slot) {
+    return [slot, createRecipe({
+      name,
+      className: `${className}__${slot}`,
+      variantMap,
+      defaultVariants: defaults,
+      compoundVariants: getSlotCompoundVariant(compounds, slot),
+    })]
+  })
+
+  const recipe = memo(function slotRecipeFn(props = {}) {
+    const result = {}
+    for (const [slot, slotFn] of slotFns) result[slot] = slotFn(props)
+    return result
+  })
+  attach(recipe, name, variantKeys, variantMap, function getVariantProps(props = {}) {
+    return withDefaults(defaults, props)
+  })
+  recipe.__recipe__ = false
+  recipe.classNameMap = {}
+  return recipe
+}
+
+function mergeRecipes(recipeA, recipeB) {
+  if (recipeA && !recipeB) return recipeA
+  if (!recipeA && recipeB) return recipeB
+  function merged(...args) {
+    const classA = recipeA(...args)
+    const classB = recipeB(...args)
+    return classA && classB ? `${classA} ${classB}` : classA || classB
+  }
+  const variantKeys = uniq(recipeA.variantKeys, recipeB.variantKeys)
+  const variantMap = {}
+  for (const key of variantKeys) variantMap[key] = uniq(recipeA.variantMap[key], recipeB.variantMap[key])
+  attach(merged, `${recipeA.__name__} ${recipeB.__name__}`, variantKeys, variantMap, function getVariantProps(props) {
+    return props
+  })
+  merged.__recipe__ = true
+  return merged
+}
+
+function attach(recipe, name, variantKeys, variantMap, getVariantProps) {
+  recipe.__name__ = name
+  recipe.raw = function raw(props) {
+    return props
+  }
+  recipe.variantKeys = variantKeys
+  recipe.variantMap = variantMap
+  recipe.splitVariantProps = function splitVariantProps(props) {
+    return splitProps(props, variantKeys)
+  }
+  recipe.getVariantProps = getVariantProps
+  return recipe
+}

package/dist/styled-system/tokens/index.d.ts

@@ -0,0 +1,8 @@
+import type { Token, TokenPath } from '../types/tokens.js';
+
+interface TokenFn {
+  (path: TokenPath, fallback?: string): string
+  var: (path: Token, fallback?: string) => string
+}
+
+export declare const token: TokenFn;

package/dist/styled-system/tokens/index.js

@@ -0,0 +1,18 @@
+import { colorMix, toCssVar } from '../helpers.js';
+
+const tokens = {"breakpoints.2xl":"1440px","breakpoints.2xs":"420px","breakpoints.3xl":"1640px","breakpoints.3xs":"360px","breakpoints.4xl":"1920px","breakpoints.lg":"1024px","breakpoints.md":"768px","breakpoints.sm":"640px","breakpoints.xl":"1280px","breakpoints.xs":"520px","colors.accent-border":"","colors.accent-subtle":"","colors.accent-text":"","colors.black":"#000000","colors.blue.100":"#dbeafe","colors.blue.200":"#bfdbfe","colors.blue.300":"#93c5fd","colors.blue.400":"#60a5fa","colors.blue.50":"#eff6ff","colors.blue.500":"#3b82f6","colors.blue.600":"#2563eb","colors.blue.700":"#1d4ed8","colors.blue.800":"#1e40af","colors.blue.900":"#1e3a8a","colors.blue.950":"#172554","colors.border":"","colors.border.card":"","colors.border.hover":"","colors.border.subtle":"","colors.brand.100":"#FFD9CE","colors.brand.200":"#FFBAAA","colors.brand.300":"#FD9B85","colors.brand.400":"#f87960","colors.brand.50":"#FDF1EB","colors.brand.500":"#E75F45","colors.brand.600":"#C6543F","colors.brand.700":"#A44C3B","colors.brand.800":"#834235","colors.brand.900":"#66382E","colors.colorPalette":"","colors.colorPalette.100":"","colors.colorPalette.200":"","colors.colorPalette.300":"","colors.colorPalette.400":"","colors.colorPalette.50":"","colors.colorPalette.500":"","colors.colorPalette.600":"","colors.colorPalette.700":"","colors.colorPalette.800":"","colors.colorPalette.900":"","colors.colorPalette.950":"","colors.colorPalette.card":"","colors.colorPalette.hover":"","colors.colorPalette.inverse":"","colors.colorPalette.light":"","colors.colorPalette.muted":"","colors.colorPalette.placeholder":"","colors.colorPalette.raised":"","colors.colorPalette.subtle":"","colors.colorPalette.subtle.light":"","colors.colorPalette.text":"","colors.colorPalette.track":"","colors.danger":"","colors.danger.subtle":"","colors.danger.subtle.light":"","colors.danger.text":"var(--colors-red-900)","colors.green.100":"#dcfce7","colors.green.200":"#bbf7d0","colors.green.300":"#86efac","colors.green.400":"#4ade80","colors.green.50":"#f0fdf4","colors.green.500":"#22c55e","colors.green.600":"#16a34a","colors.green.700":"#15803d","colors.green.800":"#166534","colors.green.900":"#14532d","colors.green.950":"#052e16","colors.grey.100":"#e5e5e5","colors.grey.200":"#d4d4d4","colors.grey.300":"#a3a3a3","colors.grey.400":"#737373","colors.grey.50":"#fafafa","colors.grey.500":"#525252","colors.grey.600":"#404040","colors.grey.700":"#333333","colors.grey.800":"#262626","colors.grey.900":"#1d1d1d","colors.grey.950":"#171717","colors.info":"","colors.info.subtle":"","colors.info.subtle.light":"","colors.info.text":"var(--colors-blue-900)","colors.input-bg":"","colors.input-border":"","colors.input-color":"var(--colors-grey-400)","colors.input-disabled-bg":"","colors.loader.track":"","colors.muted":"","colors.neutral":"","colors.neutral.inverse":"","colors.neutral.light":"var(--colors-grey-400)","colors.neutral.subtle":"","colors.primary":"var(--colors-brand-400)","colors.primary-pale":"var(--colors-brand-50)","colors.red.100":"#fee2e2","colors.red.200":"#fecaca","colors.red.300":"#fca5a5","colors.red.400":"#f87171","colors.red.50":"#fef2f2","colors.red.500":"#ef4444","colors.red.600":"#dc2626","colors.red.700":"#b91c1c","colors.red.800":"#991b1b","colors.red.900":"#7f1d1d","colors.red.950":"#450a0a","colors.success":"","colors.success.subtle":"","colors.success.subtle.light":"","colors.success.text":"var(--colors-green-900)","colors.surface":"","colors.surface-muted":"","colors.surface.raised":"","colors.text.muted":"","colors.text.placeholder":"","colors.transparent":"#00000000","colors.warning":"","colors.warning.subtle":"","colors.warning.subtle.light":"","colors.warning.text":"var(--colors-yellow-900)","colors.white":"#FFFFFF","colors.yellow.100":"#fef3c7","colors.yellow.200":"#fde68a","colors.yellow.300":"#fcd34d","colors.yellow.400":"#fbbf24","colors.yellow.50":"#fffbeb","colors.yellow.500":"#f59e0b","colors.yellow.600":"#d97706","colors.yellow.700":"#b45309","colors.yellow.800":"#92400e","colors.yellow.900":"#78350f","colors.yellow.950":"#451a03","durations.fast":"150ms","durations.normal":"300ms","durations.slow":"600ms","easings.default":"cubic-bezier(0.4, 0, 0.2, 1)","easings.out":"cubic-bezier(0.16, 1, 0.3, 1)","fontSizes.2xl":"32px","fontSizes.3xl":"40px","fontSizes.4xl":"48px","fontSizes.5xl":"64px","fontSizes.lg":"20px","fontSizes.md":"16px","fontSizes.sm":"14px","fontSizes.xl":"24px","fontSizes.xs":"12px","fontWeights.bold":"700","fontWeights.extrabold":"800","fontWeights.medium":"500","fontWeights.normal":"400","fontWeights.regular":"400","fontWeights.semibold":"600","fonts.body":"var(--fonts-sans)","fonts.mono":"ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace","fonts.sans":"Figtree, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"","fonts.serif":"ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif","letterSpacings.normal":"0","letterSpacings.tight":"-0.02em","letterSpacings.tighter":"-0.035em","letterSpacings.wide":"0.08em","lineHeights.heading":"1.08","lineHeights.none":"1","lineHeights.normal":"1.5","lineHeights.relaxed":"1.65","lineHeights.tight":"1.25","opacity.color.neutral":"","opacity.color.neutral.lighter":"","opacity.color.status":"","opacity.color.status.lighter":"25%","radii.2xl":"20px","radii.3xl":"24px","radii.4xl":"32px","radii.5xl":"40px","radii.lg":"10px","radii.md":"6px","radii.pill":"99rem","radii.sm":"4px","radii.xl":"16px","shadows.card":"","shadows.float":"","shadows.focus":"0 0 0 4px color-mix(in srgb, var(--colors-primary) 30%, transparent)","shadows.focus-danger":"0 0 0 4px color-mix(in srgb, var(--colors-red-600) 30%, transparent)","shadows.focus-success":"0 0 0 4px color-mix(in srgb, var(--colors-green-600) 30%, transparent)","sizes.breakpoint-2xl":"1440px","sizes.breakpoint-2xs":"420px","sizes.breakpoint-3xl":"1640px","sizes.breakpoint-3xs":"360px","sizes.breakpoint-4xl":"1920px","sizes.breakpoint-lg":"1024px","sizes.breakpoint-md":"768px","sizes.breakpoint-sm":"640px","sizes.breakpoint-xl":"1280px","sizes.breakpoint-xs":"520px","sizes.container":"1200px","sizes.prose":"44rem","spacing.-10xl":"calc(var(--spacing-10xl) * -1)","spacing.-11xl":"calc(var(--spacing-11xl) * -1)","spacing.-12xl":"calc(var(--spacing-12xl) * -1)","spacing.-2xl":"calc(var(--spacing-2xl) * -1)","spacing.-2xs":"calc(var(--spacing-2xs) * -1)","spacing.-3xl":"calc(var(--spacing-3xl) * -1)","spacing.-3xs":"calc(var(--spacing-3xs) * -1)","spacing.-4xl":"calc(var(--spacing-4xl) * -1)","spacing.-5xl":"calc(var(--spacing-5xl) * -1)","spacing.-6xl":"calc(var(--spacing-6xl) * -1)","spacing.-7xl":"calc(var(--spacing-7xl) * -1)","spacing.-8xl":"calc(var(--spacing-8xl) * -1)","spacing.-9xl":"calc(var(--spacing-9xl) * -1)","spacing.-lg":"calc(var(--spacing-lg) * -1)","spacing.-md":"calc(var(--spacing-md) * -1)","spacing.-sm":"calc(var(--spacing-sm) * -1)","spacing.-xl":"calc(var(--spacing-xl) * -1)","spacing.-xs":"calc(var(--spacing-xs) * -1)","spacing.10xl":"128px","spacing.11xl":"144px","spacing.12xl":"160px","spacing.2xl":"32px","spacing.2xs":"4px","spacing.3xl":"40px","spacing.3xs":"2px","spacing.4xl":"48px","spacing.5xl":"56px","spacing.6xl":"64px","spacing.7xl":"72px","spacing.8xl":"80px","spacing.9xl":"96px","spacing.lg":"20px","spacing.md":"16px","spacing.sm":"12px","spacing.xl":"24px","spacing.xs":"8px"}
+
+const tokenVars = {"spacing.-10xl":"var(--spacing-10xl)","spacing.-11xl":"var(--spacing-11xl)","spacing.-12xl":"var(--spacing-12xl)","spacing.-2xl":"var(--spacing-2xl)","spacing.-2xs":"var(--spacing-2xs)","spacing.-3xl":"var(--spacing-3xl)","spacing.-3xs":"var(--spacing-3xs)","spacing.-4xl":"var(--spacing-4xl)","spacing.-5xl":"var(--spacing-5xl)","spacing.-6xl":"var(--spacing-6xl)","spacing.-7xl":"var(--spacing-7xl)","spacing.-8xl":"var(--spacing-8xl)","spacing.-9xl":"var(--spacing-9xl)","spacing.-lg":"var(--spacing-lg)","spacing.-md":"var(--spacing-md)","spacing.-sm":"var(--spacing-sm)","spacing.-xl":"var(--spacing-xl)","spacing.-xs":"var(--spacing-xs)"}
+const resolveVar = (path) => tokenVars[path] || toCssVar(path)
+
+export const token = /* @__PURE__ */ Object.assign(
+  function token(path, fallback) {
+    const value = tokens[path]
+    return value === undefined ? colorMix(tokens, path, resolveVar) || fallback : value || resolveVar(path)
+  },
+  {
+    var: function tokenVar(path, fallback) {
+      return tokens[path] === undefined ? fallback : resolveVar(path)
+    },
+  },
+)

package/dist/styled-system/types/index.d.ts

@@ -0,0 +1,5 @@
+export * from './register.js';
+export * from './tokens.js';
+export * from './system.js';
+export * from './pattern.js';
+export * from './recipe.js';

package/dist/styled-system/types/pattern.d.ts

@@ -0,0 +1,26 @@
+import type { ConditionalValue, SystemProperties, SystemStyleObject } from './system.js';
+
+export type PatternPrimitive = string | number | boolean
+
+export type PatternPropertyValue<Property extends keyof SystemProperties> = SystemProperties[Property]
+
+export type PatternTokenValue<Value> = ConditionalValue<Value>
+
+export interface PatternHelpers {
+  map(value: unknown, fn: (value: string) => string | undefined): unknown
+  isCssUnit(value: unknown): boolean
+  isCssVar(value: unknown): boolean
+  isCssFunction(value: unknown): boolean
+}
+
+export interface PatternConfig<Props extends object = object> {
+  properties?: Props
+  defaultValues?: Partial<Props> | ((props: Props) => Partial<Props>)
+  transform?: (props: Props, helpers: PatternHelpers) => SystemStyleObject
+  strict?: boolean
+  blocklist?: Array<keyof SystemProperties>
+}
+
+export interface PatternRuntimeConfig<Props extends object = object> extends PatternConfig<Props> {
+  transform: (props: Props, helpers: PatternHelpers) => SystemStyleObject
+}