@discourser/design-system 0.1.0

package/styled-system/patterns/stack.mjs

@@ -0,0 +1,24 @@
+import { getPatternStyles, patternFns } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
+
+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:'10px'}}
+
+export const getStackStyle = (styles = {}) => {
+  const _styles = getPatternStyles(stackConfig, styles)
+  return stackConfig.transform(_styles, patternFns)
+}
+
+export const stack = (styles) => css(getStackStyle(styles))
+stack.raw = getStackStyle

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

@@ -0,0 +1,21 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { SystemProperties } from '../types/style-props';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
+
+export interface VisuallyHiddenProperties {
+   
+}
+
+
+interface VisuallyHiddenStyles extends VisuallyHiddenProperties, DistributiveOmit<SystemStyleObject, keyof VisuallyHiddenProperties > {}
+
+interface VisuallyHiddenPatternFn {
+  (styles?: VisuallyHiddenStyles): string
+  raw: (styles?: VisuallyHiddenStyles) => SystemStyleObject
+}
+
+
+export declare const visuallyHidden: VisuallyHiddenPatternFn;

package/styled-system/patterns/visually-hidden.mjs

@@ -0,0 +1,18 @@
+import { getPatternStyles, patternFns } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
+
+const visuallyHiddenConfig = {
+transform(props) {
+  return {
+    srOnly: true,
+    ...props
+  };
+}}
+
+export const getVisuallyHiddenStyle = (styles = {}) => {
+  const _styles = getPatternStyles(visuallyHiddenConfig, styles)
+  return visuallyHiddenConfig.transform(_styles, patternFns)
+}
+
+export const visuallyHidden = (styles) => css(getVisuallyHiddenStyle(styles))
+visuallyHidden.raw = getVisuallyHiddenStyle

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

@@ -0,0 +1,22 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { SystemProperties } from '../types/style-props';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
+
+export interface VstackProperties {
+   justify?: SystemProperties["justifyContent"]
+	gap?: SystemProperties["gap"]
+}
+
+
+interface VstackStyles extends VstackProperties, DistributiveOmit<SystemStyleObject, keyof VstackProperties > {}
+
+interface VstackPatternFn {
+  (styles?: VstackStyles): string
+  raw: (styles?: VstackStyles) => SystemStyleObject
+}
+
+
+export declare const vstack: VstackPatternFn;

package/styled-system/patterns/vstack.mjs

@@ -0,0 +1,24 @@
+import { getPatternStyles, patternFns } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
+
+const vstackConfig = {
+transform(props) {
+  const { justify, gap, ...rest } = props;
+  return {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: justify,
+    gap,
+    flexDirection: "column",
+    ...rest
+  };
+},
+defaultValues:{gap:'10px'}}
+
+export const getVstackStyle = (styles = {}) => {
+  const _styles = getPatternStyles(vstackConfig, styles)
+  return vstackConfig.transform(_styles, patternFns)
+}
+
+export const vstack = (styles) => css(getVstackStyle(styles))
+vstack.raw = getVstackStyle

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

@@ -0,0 +1,25 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { SystemProperties } from '../types/style-props';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
+
+export interface WrapProperties {
+   gap?: SystemProperties["gap"]
+	rowGap?: SystemProperties["gap"]
+	columnGap?: SystemProperties["gap"]
+	align?: SystemProperties["alignItems"]
+	justify?: SystemProperties["justifyContent"]
+}
+
+
+interface WrapStyles extends WrapProperties, DistributiveOmit<SystemStyleObject, keyof WrapProperties > {}
+
+interface WrapPatternFn {
+  (styles?: WrapStyles): string
+  raw: (styles?: WrapStyles) => SystemStyleObject
+}
+
+
+export declare const wrap: WrapPatternFn;

package/styled-system/patterns/wrap.mjs

@@ -0,0 +1,25 @@
+import { getPatternStyles, patternFns } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
+
+const wrapConfig = {
+transform(props) {
+  const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", align, justify, ...rest } = props;
+  return {
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: align,
+    justifyContent: justify,
+    gap,
+    columnGap,
+    rowGap,
+    ...rest
+  };
+}}
+
+export const getWrapStyle = (styles = {}) => {
+  const _styles = getPatternStyles(wrapConfig, styles)
+  return wrapConfig.transform(_styles, patternFns)
+}
+
+export const wrap = (styles) => css(getWrapStyle(styles))
+wrap.raw = getWrapStyle

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

@@ -0,0 +1,39 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface ButtonVariant {
+  /**
+ * @default "filled"
+ */
+variant: "filled" | "outlined" | "text" | "elevated" | "tonal"
+/**
+ * @default "md"
+ */
+size: "sm" | "md" | "lg"
+}
+
+type ButtonVariantMap = {
+  [key in keyof ButtonVariant]: Array<ButtonVariant[key]>
+}
+
+export type ButtonVariantProps = {
+  [key in keyof ButtonVariant]?: ConditionalValue<ButtonVariant[key]> | undefined
+}
+
+export interface ButtonRecipe {
+  __type: ButtonVariantProps
+  (props?: ButtonVariantProps): string
+  raw: (props?: ButtonVariantProps) => ButtonVariantProps
+  variantMap: ButtonVariantMap
+  variantKeys: Array<keyof ButtonVariant>
+  splitVariantProps<Props extends ButtonVariantProps>(props: Props): [ButtonVariantProps, Pretty<DistributiveOmit<Props, keyof ButtonVariantProps>>]
+  getVariantProps: (props?: ButtonVariantProps) => ButtonVariantProps
+}
+
+/**
+ * Material Design 3 button component
+
+
+ */
+export declare const button: ButtonRecipe

package/styled-system/recipes/button.mjs

@@ -0,0 +1,40 @@
+import { memo, splitProps } from '../helpers.mjs';
+import { createRecipe, mergeRecipes } from './create-recipe.mjs';
+
+const buttonFn = /* @__PURE__ */ createRecipe('button', {
+  "variant": "filled",
+  "size": "md"
+}, [])
+
+const buttonVariantMap = {
+  "variant": [
+    "filled",
+    "outlined",
+    "text",
+    "elevated",
+    "tonal"
+  ],
+  "size": [
+    "sm",
+    "md",
+    "lg"
+  ]
+}
+
+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,39 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface CardVariant {
+  /**
+ * @default "elevated"
+ */
+variant: "elevated" | "filled" | "outlined"
+/**
+ * @default false
+ */
+interactive: boolean
+}
+
+type CardVariantMap = {
+  [key in keyof CardVariant]: Array<CardVariant[key]>
+}
+
+export type CardVariantProps = {
+  [key in keyof CardVariant]?: ConditionalValue<CardVariant[key]> | undefined
+}
+
+export interface CardRecipe {
+  __type: CardVariantProps
+  (props?: CardVariantProps): 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
+}
+
+/**
+ * Material Design 3 card component
+
+
+ */
+export declare const card: CardRecipe

package/styled-system/recipes/card.mjs

@@ -0,0 +1,36 @@
+import { memo, splitProps } from '../helpers.mjs';
+import { createRecipe, mergeRecipes } from './create-recipe.mjs';
+
+const cardFn = /* @__PURE__ */ createRecipe('card', {
+  "variant": "elevated",
+  "interactive": false
+}, [])
+
+const cardVariantMap = {
+  "variant": [
+    "elevated",
+    "filled",
+    "outlined"
+  ],
+  "interactive": [
+    "true"
+  ]
+}
+
+const cardVariantKeys = Object.keys(cardVariantMap)
+
+export const card = /* @__PURE__ */ Object.assign(memo(cardFn.recipeFn), {
+  __recipe__: true,
+  __name__: 'card',
+  __getCompoundVariantCss__: cardFn.__getCompoundVariantCss__,
+  raw: (props) => props,
+  variantKeys: cardVariantKeys,
+  variantMap: cardVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe)
+  },
+  splitVariantProps(props) {
+    return splitProps(props, cardVariantKeys)
+  },
+  getVariantProps: cardFn.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: {
+       
+       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,35 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface DialogVariant {
+  /**
+ * @default "md"
+ */
+size: "sm" | "md" | "lg" | "fullscreen"
+}
+
+type DialogVariantMap = {
+  [key in keyof DialogVariant]: Array<DialogVariant[key]>
+}
+
+export type DialogVariantProps = {
+  [key in keyof DialogVariant]?: ConditionalValue<DialogVariant[key]> | undefined
+}
+
+export interface DialogRecipe {
+  __type: DialogVariantProps
+  (props?: DialogVariantProps): Pretty<Record<"backdrop" | "positioner" | "content" | "title" | "description" | "closeTrigger", 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
+}
+
+/**
+ * Material Design 3 dialog component
+
+
+ */
+export declare const dialog: DialogRecipe

package/styled-system/recipes/dialog.mjs

@@ -0,0 +1,63 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
+import { createRecipe } from './create-recipe.mjs';
+
+const dialogDefaultVariants = {
+  "size": "md"
+}
+const dialogCompoundVariants = []
+
+const dialogSlotNames = [
+  [
+    "backdrop",
+    "dialog__backdrop"
+  ],
+  [
+    "positioner",
+    "dialog__positioner"
+  ],
+  [
+    "content",
+    "dialog__content"
+  ],
+  [
+    "title",
+    "dialog__title"
+  ],
+  [
+    "description",
+    "dialog__description"
+  ],
+  [
+    "closeTrigger",
+    "dialog__closeTrigger"
+  ]
+]
+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 = [
+  "size"
+]
+const getVariantProps = (variants) => ({ ...dialogDefaultVariants, ...compact(variants) })
+
+export const dialog = /* @__PURE__ */ Object.assign(dialogFn, {
+  __recipe__: false,
+  __name__: 'dialog',
+  raw: (props) => props,
+  variantKeys: dialogVariantKeys,
+  variantMap: {
+  "size": [
+    "sm",
+    "md",
+    "lg",
+    "fullscreen"
+  ]
+},
+  splitVariantProps(props) {
+    return splitProps(props, dialogVariantKeys)
+  },
+  getVariantProps
+})

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

@@ -0,0 +1,39 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface IconButtonVariant {
+  /**
+ * @default "standard"
+ */
+variant: "standard" | "filled" | "tonal" | "outlined"
+/**
+ * @default "md"
+ */
+size: "sm" | "md" | "lg"
+}
+
+type IconButtonVariantMap = {
+  [key in keyof IconButtonVariant]: Array<IconButtonVariant[key]>
+}
+
+export type IconButtonVariantProps = {
+  [key in keyof IconButtonVariant]?: ConditionalValue<IconButtonVariant[key]> | undefined
+}
+
+export interface IconButtonRecipe {
+  __type: IconButtonVariantProps
+  (props?: IconButtonVariantProps): string
+  raw: (props?: IconButtonVariantProps) => IconButtonVariantProps
+  variantMap: IconButtonVariantMap
+  variantKeys: Array<keyof IconButtonVariant>
+  splitVariantProps<Props extends IconButtonVariantProps>(props: Props): [IconButtonVariantProps, Pretty<DistributiveOmit<Props, keyof IconButtonVariantProps>>]
+  getVariantProps: (props?: IconButtonVariantProps) => IconButtonVariantProps
+}
+
+/**
+ * Material Design 3 icon button component
+
+
+ */
+export declare const iconButton: IconButtonRecipe

package/styled-system/recipes/icon-button.mjs

@@ -0,0 +1,39 @@
+import { memo, splitProps } from '../helpers.mjs';
+import { createRecipe, mergeRecipes } from './create-recipe.mjs';
+
+const iconButtonFn = /* @__PURE__ */ createRecipe('icon-button', {
+  "variant": "standard",
+  "size": "md"
+}, [])
+
+const iconButtonVariantMap = {
+  "variant": [
+    "standard",
+    "filled",
+    "tonal",
+    "outlined"
+  ],
+  "size": [
+    "sm",
+    "md",
+    "lg"
+  ]
+}
+
+const iconButtonVariantKeys = Object.keys(iconButtonVariantMap)
+
+export const iconButton = /* @__PURE__ */ Object.assign(memo(iconButtonFn.recipeFn), {
+  __recipe__: true,
+  __name__: 'iconButton',
+  __getCompoundVariantCss__: iconButtonFn.__getCompoundVariantCss__,
+  raw: (props) => props,
+  variantKeys: iconButtonVariantKeys,
+  variantMap: iconButtonVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe)
+  },
+  splitVariantProps(props) {
+    return splitProps(props, iconButtonVariantKeys)
+  },
+  getVariantProps: iconButtonFn.getVariantProps,
+})

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

@@ -0,0 +1,7 @@
+/* eslint-disable */
+export * from './button';
+export * from './card';
+export * from './icon-button';
+export * from './input';
+export * from './dialog';
+export * from './switch-control';

package/styled-system/recipes/index.mjs

@@ -0,0 +1,6 @@
+export * from './button.mjs';
+export * from './card.mjs';
+export * from './icon-button.mjs';
+export * from './input.mjs';
+export * from './dialog.mjs';
+export * from './switch-control.mjs';

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

@@ -0,0 +1,40 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface InputVariant {
+  /**
+ * @default "outlined"
+ */
+variant: "filled" | "outlined"
+/**
+ * @default "md"
+ */
+size: "sm" | "md"
+state: "error" | "disabled"
+}
+
+type InputVariantMap = {
+  [key in keyof InputVariant]: Array<InputVariant[key]>
+}
+
+export type InputVariantProps = {
+  [key in keyof InputVariant]?: ConditionalValue<InputVariant[key]> | undefined
+}
+
+export interface InputRecipe {
+  __type: InputVariantProps
+  (props?: InputVariantProps): string
+  raw: (props?: InputVariantProps) => InputVariantProps
+  variantMap: InputVariantMap
+  variantKeys: Array<keyof InputVariant>
+  splitVariantProps<Props extends InputVariantProps>(props: Props): [InputVariantProps, Pretty<DistributiveOmit<Props, keyof InputVariantProps>>]
+  getVariantProps: (props?: InputVariantProps) => InputVariantProps
+}
+
+/**
+ * Material Design 3 text field component
+
+
+ */
+export declare const input: InputRecipe

package/styled-system/recipes/input.mjs

@@ -0,0 +1,40 @@
+import { memo, splitProps } from '../helpers.mjs';
+import { createRecipe, mergeRecipes } from './create-recipe.mjs';
+
+const inputFn = /* @__PURE__ */ createRecipe('input', {
+  "variant": "outlined",
+  "size": "md"
+}, [])
+
+const inputVariantMap = {
+  "variant": [
+    "filled",
+    "outlined"
+  ],
+  "size": [
+    "sm",
+    "md"
+  ],
+  "state": [
+    "error",
+    "disabled"
+  ]
+}
+
+const inputVariantKeys = Object.keys(inputVariantMap)
+
+export const input = /* @__PURE__ */ Object.assign(memo(inputFn.recipeFn), {
+  __recipe__: true,
+  __name__: 'input',
+  __getCompoundVariantCss__: inputFn.__getCompoundVariantCss__,
+  raw: (props) => props,
+  variantKeys: inputVariantKeys,
+  variantMap: inputVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe)
+  },
+  splitVariantProps(props) {
+    return splitProps(props, inputVariantKeys)
+  },
+  getVariantProps: inputFn.getVariantProps,
+})