@tuuject/koi-react 0.0.0-stage → 0.1.0

package/styled-system/patterns/wrap.js

@@ -0,0 +1,26 @@
+import { getPatternStyles, patternFns } from './runtime';
+import { memo } from '../helpers';
+import { css } from '../css/index';
+
+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/styled-system/recipes/alert.d.ts

@@ -0,0 +1,19 @@
+import type { ConditionalValue } from '../types/system';
+import type { SlotRecipeRuntimeFn, RecipeVariantMap } from '../types/recipe';
+
+export type AlertVariant = {
+  closable?: boolean
+  tone?: "error" | "info" | "warning"
+}
+
+export type AlertVariantProps = {
+  [K in keyof AlertVariant]?: ConditionalValue<AlertVariant[K]>
+}
+
+export type AlertVariantMap = RecipeVariantMap<AlertVariant>
+
+export type AlertSlot = "root" | "icon" | "content" | "title" | "body" | "action" | "close"
+
+export type AlertRecipe = SlotRecipeRuntimeFn<AlertSlot, AlertVariantProps, AlertVariantMap>
+
+export declare const alert: AlertRecipe;

package/styled-system/recipes/alert.js

@@ -0,0 +1,5 @@
+import { createSlotRecipe } from './runtime';
+
+const alertConfig = {"name":"alert","className":"koi-alert","slots":["root","icon","content","title","body","action","close"],"defaultVariants":{"closable":false,"tone":"info"},"variantMap":{"closable":["false","true"],"tone":["error","info","warning"]}}
+
+export const alert = /* @__PURE__ */ createSlotRecipe(alertConfig)

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

@@ -0,0 +1,19 @@
+import type { ConditionalValue } from '../types/system';
+import type { SlotRecipeRuntimeFn, RecipeVariantMap } from '../types/recipe';
+
+export type AvatarVariant = {
+  shape?: "circle" | "square"
+  size?: "lg" | "md" | "sm" | "xl"
+}
+
+export type AvatarVariantProps = {
+  [K in keyof AvatarVariant]?: ConditionalValue<AvatarVariant[K]>
+}
+
+export type AvatarVariantMap = RecipeVariantMap<AvatarVariant>
+
+export type AvatarSlot = "root" | "image" | "fallback"
+
+export type AvatarRecipe = SlotRecipeRuntimeFn<AvatarSlot, AvatarVariantProps, AvatarVariantMap>
+
+export declare const avatar: AvatarRecipe;

package/styled-system/recipes/avatar.js

@@ -0,0 +1,5 @@
+import { createSlotRecipe } from './runtime';
+
+const avatarConfig = {"name":"avatar","className":"koi-avatar","slots":["root","image","fallback"],"defaultVariants":{"shape":"circle","size":"md"},"variantMap":{"shape":["circle","square"],"size":["lg","md","sm","xl"]}}
+
+export const avatar = /* @__PURE__ */ createSlotRecipe(avatarConfig)

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

@@ -0,0 +1,18 @@
+import type { ConditionalValue } from '../types/system';
+import type { SlotRecipeRuntimeFn, RecipeVariantMap } from '../types/recipe';
+
+export type BadgeVariant = {
+  tone?: "accent" | "error" | "neutral" | "primary" | "solid" | "warning"
+}
+
+export type BadgeVariantProps = {
+  [K in keyof BadgeVariant]?: ConditionalValue<BadgeVariant[K]>
+}
+
+export type BadgeVariantMap = RecipeVariantMap<BadgeVariant>
+
+export type BadgeSlot = "root" | "dot"
+
+export type BadgeRecipe = SlotRecipeRuntimeFn<BadgeSlot, BadgeVariantProps, BadgeVariantMap>
+
+export declare const badge: BadgeRecipe;

package/styled-system/recipes/badge.js

@@ -0,0 +1,5 @@
+import { createSlotRecipe } from './runtime';
+
+const badgeConfig = {"name":"badge","className":"koi-badge","slots":["root","dot"],"defaultVariants":{"tone":"neutral"},"variantMap":{"tone":["accent","error","neutral","primary","solid","warning"]}}
+
+export const badge = /* @__PURE__ */ createSlotRecipe(badgeConfig)

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

@@ -0,0 +1,20 @@
+import type { RecipeRuntimeFn, RecipeVariantMap } from '../types/recipe';
+
+export type ButtonVariant = {
+  color?: "accent" | "error" | "primary" | "secondary" | "warning"
+  fullWidth?: boolean
+  iconOnly?: boolean
+  shape?: "pill" | "rounded"
+  size?: "lg" | "md" | "sm"
+  variant?: "ghost" | "outline" | "soft" | "solid"
+}
+
+export type ButtonVariantProps = {
+  [K in keyof ButtonVariant]?: ButtonVariant[K] | undefined
+}
+
+export type ButtonVariantMap = RecipeVariantMap<ButtonVariant>
+
+export type ButtonRecipe = RecipeRuntimeFn<ButtonVariantProps, ButtonVariantMap>
+
+export declare const button: ButtonRecipe;

package/styled-system/recipes/button.js

@@ -0,0 +1,5 @@
+import { createRecipe } from './runtime';
+
+const buttonConfig = {"name":"button","className":"koi-btn","defaultVariants":{"color":"primary","iconOnly":false,"shape":"rounded","size":"md","variant":"solid"},"compoundVariants":[{"color":"primary","variant":"solid","className":"koi-btn--compound__color_primary__variant_solid"},{"color":"primary","variant":"soft","className":"koi-btn--compound__color_primary__variant_soft"},{"color":"primary","variant":"outline","className":"koi-btn--compound__color_primary__variant_outline"},{"color":"primary","variant":"ghost","className":"koi-btn--compound__color_primary__variant_ghost"},{"color":"accent","variant":"solid","className":"koi-btn--compound__color_accent__variant_solid"},{"color":"accent","variant":"soft","className":"koi-btn--compound__color_accent__variant_soft"},{"color":"accent","variant":"outline","className":"koi-btn--compound__color_accent__variant_outline"},{"color":"accent","variant":"ghost","className":"koi-btn--compound__color_accent__variant_ghost"},{"color":"secondary","variant":"solid","className":"koi-btn--compound__color_secondary__variant_solid"},{"color":"secondary","variant":"soft","className":"koi-btn--compound__color_secondary__variant_soft"},{"color":"secondary","variant":"outline","className":"koi-btn--compound__color_secondary__variant_outline"},{"color":"secondary","variant":"ghost","className":"koi-btn--compound__color_secondary__variant_ghost"},{"color":"warning","variant":"solid","className":"koi-btn--compound__color_warning__variant_solid"},{"color":"warning","variant":"soft","className":"koi-btn--compound__color_warning__variant_soft"},{"color":"warning","variant":"outline","className":"koi-btn--compound__color_warning__variant_outline"},{"color":"warning","variant":"ghost","className":"koi-btn--compound__color_warning__variant_ghost"},{"color":"error","variant":"solid","className":"koi-btn--compound__color_error__variant_solid"},{"color":"error","variant":"soft","className":"koi-btn--compound__color_error__variant_soft"},{"color":"error","variant":"outline","className":"koi-btn--compound__color_error__variant_outline"},{"color":"error","variant":"ghost","className":"koi-btn--compound__color_error__variant_ghost"},{"iconOnly":false,"shape":"rounded","size":"sm","className":"koi-btn--compound__iconOnly_false__shape_rounded__size_sm"},{"iconOnly":true,"className":"koi-btn--compound__iconOnly_true"}],"variantMap":{"color":["accent","error","primary","secondary","warning"],"fullWidth":["true"],"iconOnly":["false","true"],"shape":["pill","rounded"],"size":["lg","md","sm"],"variant":["ghost","outline","soft","solid"]}}
+
+export const button = /* @__PURE__ */ createRecipe(buttonConfig)

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

@@ -0,0 +1,19 @@
+import type { ConditionalValue } from '../types/system';
+import type { SlotRecipeRuntimeFn, RecipeVariantMap } from '../types/recipe';
+
+export type CardVariant = {
+  padding?: "default" | "none"
+  variant?: "filled" | "glass" | "outlined"
+}
+
+export type CardVariantProps = {
+  [K in keyof CardVariant]?: ConditionalValue<CardVariant[K]>
+}
+
+export type CardVariantMap = RecipeVariantMap<CardVariant>
+
+export type CardSlot = "root" | "media" | "head" | "title" | "description" | "body" | "footer"
+
+export type CardRecipe = SlotRecipeRuntimeFn<CardSlot, CardVariantProps, CardVariantMap>
+
+export declare const card: CardRecipe;

package/styled-system/recipes/card.js

@@ -0,0 +1,5 @@
+import { createSlotRecipe } from './runtime';
+
+const cardConfig = {"name":"card","className":"koi-card","slots":["root","media","head","title","description","body","footer"],"defaultVariants":{"padding":"default","variant":"outlined"},"variantMap":{"padding":["default","none"],"variant":["filled","glass","outlined"]}}
+
+export const card = /* @__PURE__ */ createSlotRecipe(cardConfig)

package/styled-system/recipes/chat-bubble.d.ts

@@ -0,0 +1,16 @@
+import type { ConditionalValue } from '../types/system';
+import type { RecipeRuntimeFn, RecipeVariantMap } from '../types/recipe';
+
+export type ChatBubbleVariant = {
+  side?: "received" | "sent"
+}
+
+export type ChatBubbleVariantProps = {
+  [K in keyof ChatBubbleVariant]?: ConditionalValue<ChatBubbleVariant[K]>
+}
+
+export type ChatBubbleVariantMap = RecipeVariantMap<ChatBubbleVariant>
+
+export type ChatBubbleRecipe = RecipeRuntimeFn<ChatBubbleVariantProps, ChatBubbleVariantMap>
+
+export declare const chatBubble: ChatBubbleRecipe;

package/styled-system/recipes/chat-bubble.js

@@ -0,0 +1,5 @@
+import { createRecipe } from './runtime';
+
+const chatBubbleConfig = {"name":"chatBubble","className":"koi-chat-bubble","defaultVariants":{"side":"received"},"variantMap":{"side":["received","sent"]}}
+
+export const chatBubble = /* @__PURE__ */ createRecipe(chatBubbleConfig)

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

@@ -0,0 +1,16 @@
+import type { ConditionalValue } from '../types/system';
+import type { SlotRecipeRuntimeFn, RecipeVariantMap } from '../types/recipe';
+
+export type CheckboxVariant = {}
+
+export type CheckboxVariantProps = {
+  [K in keyof CheckboxVariant]?: ConditionalValue<CheckboxVariant[K]>
+}
+
+export type CheckboxVariantMap = RecipeVariantMap<CheckboxVariant>
+
+export type CheckboxSlot = "root" | "control" | "indicator" | "text" | "label" | "description"
+
+export type CheckboxRecipe = SlotRecipeRuntimeFn<CheckboxSlot, CheckboxVariantProps, CheckboxVariantMap>
+
+export declare const checkbox: CheckboxRecipe;

package/styled-system/recipes/checkbox.js

@@ -0,0 +1,5 @@
+import { createSlotRecipe } from './runtime';
+
+const checkboxConfig = {"name":"checkbox","className":"koi-checkbox","slots":["root","control","indicator","text","label","description"]}
+
+export const checkbox = /* @__PURE__ */ createSlotRecipe(checkboxConfig)

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

@@ -0,0 +1,18 @@
+import type { ConditionalValue } from '../types/system';
+import type { SlotRecipeRuntimeFn, RecipeVariantMap } from '../types/recipe';
+
+export type DialogVariant = {
+  size?: "lg" | "md" | "sm"
+}
+
+export type DialogVariantProps = {
+  [K in keyof DialogVariant]?: ConditionalValue<DialogVariant[K]>
+}
+
+export type DialogVariantMap = RecipeVariantMap<DialogVariant>
+
+export type DialogSlot = "backdrop" | "viewport" | "popup" | "title" | "description" | "body" | "footer" | "close"
+
+export type DialogRecipe = SlotRecipeRuntimeFn<DialogSlot, DialogVariantProps, DialogVariantMap>
+
+export declare const dialog: DialogRecipe;

package/styled-system/recipes/dialog.js

@@ -0,0 +1,5 @@
+import { createSlotRecipe } from './runtime';
+
+const dialogConfig = {"name":"dialog","className":"koi-dialog","slots":["backdrop","viewport","popup","title","description","body","footer","close"],"defaultVariants":{"size":"md"},"variantMap":{"size":["lg","md","sm"]}}
+
+export const dialog = /* @__PURE__ */ createSlotRecipe(dialogConfig)

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

@@ -0,0 +1,16 @@
+import type { ConditionalValue } from '../types/system';
+import type { SlotRecipeRuntimeFn, RecipeVariantMap } from '../types/recipe';
+
+export type FieldVariant = {}
+
+export type FieldVariantProps = {
+  [K in keyof FieldVariant]?: ConditionalValue<FieldVariant[K]>
+}
+
+export type FieldVariantMap = RecipeVariantMap<FieldVariant>
+
+export type FieldSlot = "root" | "label" | "required" | "optional" | "error" | "help"
+
+export type FieldRecipe = SlotRecipeRuntimeFn<FieldSlot, FieldVariantProps, FieldVariantMap>
+
+export declare const field: FieldRecipe;

package/styled-system/recipes/field.js

@@ -0,0 +1,5 @@
+import { createSlotRecipe } from './runtime';
+
+const fieldConfig = {"name":"field","className":"koi-field","slots":["root","label","required","optional","error","help"]}
+
+export const field = /* @__PURE__ */ createSlotRecipe(fieldConfig)

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

@@ -0,0 +1,27 @@
+export * from './button';
+export * from './chat-bubble';
+export * from './prose';
+export * from './separator';
+export * from './skeleton';
+export * from './textarea';
+export * from './alert';
+export * from './avatar';
+export * from './badge';
+export * from './card';
+export * from './checkbox';
+export * from './dialog';
+export * from './field';
+export * from './input';
+export * from './link';
+export * from './pagination';
+export * from './progress';
+export * from './radio-group';
+export * from './select';
+export * from './select-panel';
+export * from './spinner';
+export * from './switch-recipe';
+export * from './table';
+export * from './tabs';
+export * from './tag';
+export * from './toast';
+export * from './tooltip';

package/styled-system/recipes/index.js

@@ -0,0 +1,27 @@
+export * from './button';
+export * from './chat-bubble';
+export * from './prose';
+export * from './separator';
+export * from './skeleton';
+export * from './textarea';
+export * from './alert';
+export * from './avatar';
+export * from './badge';
+export * from './card';
+export * from './checkbox';
+export * from './dialog';
+export * from './field';
+export * from './input';
+export * from './link';
+export * from './pagination';
+export * from './progress';
+export * from './radio-group';
+export * from './select';
+export * from './select-panel';
+export * from './spinner';
+export * from './switch-recipe';
+export * from './table';
+export * from './tabs';
+export * from './tag';
+export * from './toast';
+export * from './tooltip';

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

@@ -0,0 +1,18 @@
+import type { ConditionalValue } from '../types/system';
+import type { SlotRecipeRuntimeFn, RecipeVariantMap } from '../types/recipe';
+
+export type InputVariant = {
+  size?: "lg" | "md" | "sm"
+}
+
+export type InputVariantProps = {
+  [K in keyof InputVariant]?: ConditionalValue<InputVariant[K]>
+}
+
+export type InputVariantMap = RecipeVariantMap<InputVariant>
+
+export type InputSlot = "root" | "el" | "icon"
+
+export type InputRecipe = SlotRecipeRuntimeFn<InputSlot, InputVariantProps, InputVariantMap>
+
+export declare const input: InputRecipe;

package/styled-system/recipes/input.js

@@ -0,0 +1,5 @@
+import { createSlotRecipe } from './runtime';
+
+const inputConfig = {"name":"input","className":"koi-input","slots":["root","el","icon"],"defaultVariants":{"size":"md"},"variantMap":{"size":["lg","md","sm"]}}
+
+export const input = /* @__PURE__ */ createSlotRecipe(inputConfig)

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

@@ -0,0 +1,18 @@
+import type { ConditionalValue } from '../types/system';
+import type { SlotRecipeRuntimeFn, RecipeVariantMap } from '../types/recipe';
+
+export type LinkVariant = {
+  variant?: "plain" | "underline"
+}
+
+export type LinkVariantProps = {
+  [K in keyof LinkVariant]?: ConditionalValue<LinkVariant[K]>
+}
+
+export type LinkVariantMap = RecipeVariantMap<LinkVariant>
+
+export type LinkSlot = "root" | "external" | "srOnly"
+
+export type LinkRecipe = SlotRecipeRuntimeFn<LinkSlot, LinkVariantProps, LinkVariantMap>
+
+export declare const link: LinkRecipe;

package/styled-system/recipes/link.js

@@ -0,0 +1,5 @@
+import { createSlotRecipe } from './runtime';
+
+const linkConfig = {"name":"link","className":"koi-link","slots":["root","external","srOnly"],"defaultVariants":{"variant":"underline"},"variantMap":{"variant":["plain","underline"]}}
+
+export const link = /* @__PURE__ */ createSlotRecipe(linkConfig)

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

@@ -0,0 +1,19 @@
+import type { ConditionalValue } from '../types/system';
+import type { SlotRecipeRuntimeFn, RecipeVariantMap } from '../types/recipe';
+
+export type PaginationVariant = {
+  compact?: boolean
+  shape?: "pill" | "rounded"
+}
+
+export type PaginationVariantProps = {
+  [K in keyof PaginationVariant]?: ConditionalValue<PaginationVariant[K]>
+}
+
+export type PaginationVariantMap = RecipeVariantMap<PaginationVariant>
+
+export type PaginationSlot = "root" | "pages" | "page" | "gap" | "count"
+
+export type PaginationRecipe = SlotRecipeRuntimeFn<PaginationSlot, PaginationVariantProps, PaginationVariantMap>
+
+export declare const pagination: PaginationRecipe;

package/styled-system/recipes/pagination.js

@@ -0,0 +1,5 @@
+import { createSlotRecipe } from './runtime';
+
+const paginationConfig = {"name":"pagination","className":"koi-pagination","slots":["root","pages","page","gap","count"],"defaultVariants":{"compact":false,"shape":"rounded"},"variantMap":{"compact":["false","true"],"shape":["pill","rounded"]}}
+
+export const pagination = /* @__PURE__ */ createSlotRecipe(paginationConfig)

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

@@ -0,0 +1,18 @@
+import type { ConditionalValue } from '../types/system';
+import type { SlotRecipeRuntimeFn, RecipeVariantMap } from '../types/recipe';
+
+export type ProgressVariant = {
+  size?: "lg" | "md" | "sm"
+}
+
+export type ProgressVariantProps = {
+  [K in keyof ProgressVariant]?: ConditionalValue<ProgressVariant[K]>
+}
+
+export type ProgressVariantMap = RecipeVariantMap<ProgressVariant>
+
+export type ProgressSlot = "root" | "head" | "label" | "value" | "track" | "indicator"
+
+export type ProgressRecipe = SlotRecipeRuntimeFn<ProgressSlot, ProgressVariantProps, ProgressVariantMap>
+
+export declare const progress: ProgressRecipe;

package/styled-system/recipes/progress.js

@@ -0,0 +1,5 @@
+import { createSlotRecipe } from './runtime';
+
+const progressConfig = {"name":"progress","className":"koi-progress","slots":["root","head","label","value","track","indicator"],"defaultVariants":{"size":"md"},"variantMap":{"size":["lg","md","sm"]}}
+
+export const progress = /* @__PURE__ */ createSlotRecipe(progressConfig)

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

@@ -0,0 +1,16 @@
+import type { ConditionalValue } from '../types/system';
+import type { RecipeRuntimeFn, RecipeVariantMap } from '../types/recipe';
+
+export type ProseVariant = {
+  size?: "md" | "sm"
+}
+
+export type ProseVariantProps = {
+  [K in keyof ProseVariant]?: ConditionalValue<ProseVariant[K]>
+}
+
+export type ProseVariantMap = RecipeVariantMap<ProseVariant>
+
+export type ProseRecipe = RecipeRuntimeFn<ProseVariantProps, ProseVariantMap>
+
+export declare const prose: ProseRecipe;

package/styled-system/recipes/prose.js

@@ -0,0 +1,5 @@
+import { createRecipe } from './runtime';
+
+const proseConfig = {"name":"prose","className":"koi-prose","defaultVariants":{"size":"md"},"variantMap":{"size":["md","sm"]}}
+
+export const prose = /* @__PURE__ */ createRecipe(proseConfig)

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

@@ -0,0 +1,18 @@
+import type { ConditionalValue } from '../types/system';
+import type { SlotRecipeRuntimeFn, RecipeVariantMap } from '../types/recipe';
+
+export type RadioGroupVariant = {
+  orientation?: "horizontal" | "vertical"
+}
+
+export type RadioGroupVariantProps = {
+  [K in keyof RadioGroupVariant]?: ConditionalValue<RadioGroupVariant[K]>
+}
+
+export type RadioGroupVariantMap = RecipeVariantMap<RadioGroupVariant>
+
+export type RadioGroupSlot = "root" | "item" | "control" | "indicator" | "text" | "label" | "description"
+
+export type RadioGroupRecipe = SlotRecipeRuntimeFn<RadioGroupSlot, RadioGroupVariantProps, RadioGroupVariantMap>
+
+export declare const radioGroup: RadioGroupRecipe;

package/styled-system/recipes/radio-group.js

@@ -0,0 +1,5 @@
+import { createSlotRecipe } from './runtime';
+
+const radioGroupConfig = {"name":"radioGroup","className":"koi-radio-group","slots":["root","item","control","indicator","text","label","description"],"defaultVariants":{"orientation":"vertical"},"variantMap":{"orientation":["horizontal","vertical"]}}
+
+export const radioGroup = /* @__PURE__ */ createSlotRecipe(radioGroupConfig)

package/styled-system/recipes/runtime.js

@@ -0,0 +1,133 @@
+import { createSerializeCss, getCompoundVariantClassNames, getSlotCompoundVariant, memo, splitProps, toHash, uniq, withDefaults, withoutSpace } from '../helpers';
+import { breakpointKeys, finalizeConditions, sortConditions } from '../css/conditions';
+import { cx } from '../css/cx';
+
+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/styled-system/recipes/select-panel.d.ts

@@ -0,0 +1,18 @@
+import type { ConditionalValue } from '../types/system';
+import type { SlotRecipeRuntimeFn, RecipeVariantMap } from '../types/recipe';
+
+export type SelectPanelVariant = {
+  size?: "lg" | "md" | "sm"
+}
+
+export type SelectPanelVariantProps = {
+  [K in keyof SelectPanelVariant]?: ConditionalValue<SelectPanelVariant[K]>
+}
+
+export type SelectPanelVariantMap = RecipeVariantMap<SelectPanelVariant>
+
+export type SelectPanelSlot = "trigger" | "value" | "icon" | "positioner" | "popup" | "search" | "searchInput" | "list" | "empty" | "item" | "itemText" | "itemIndicator" | "group" | "groupLabel" | "separator"
+
+export type SelectPanelRecipe = SlotRecipeRuntimeFn<SelectPanelSlot, SelectPanelVariantProps, SelectPanelVariantMap>
+
+export declare const selectPanel: SelectPanelRecipe;