thread-ui 0.1.3 → 0.1.6

package/dist/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/dist/styled-system/recipes/button.d.ts

@@ -0,0 +1,43 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface ButtonVariant {
+  /**
+ * @default "primary"
+ */
+color: "primary" | "secondary" | "tertiary" | "black" | "gray" | "success" | "error" | "info" | "text"
+/**
+ * @default "md"
+ */
+size: "sm" | "md" | "lg"
+/**
+ * @default false
+ */
+fullWidth: boolean
+/**
+ * @default false
+ */
+disabled: boolean
+}
+
+type ButtonVariantMap = {
+  [key in keyof ButtonVariant]: Array<ButtonVariant[key]>
+}
+
+export type ButtonVariantProps = {
+  [key in keyof ButtonVariant]?: 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
+}
+
+
+export declare const button: ButtonRecipe

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

@@ -0,0 +1,154 @@
+import { memo, splitProps } from '../helpers.mjs';
+import { createRecipe, mergeRecipes } from './create-recipe.mjs';
+
+const buttonFn = /* @__PURE__ */ createRecipe('button', {
+  "color": "primary",
+  "size": "md",
+  "fullWidth": false,
+  "disabled": false
+}, [
+  {
+    "color": "primary",
+    "disabled": true,
+    "css": {
+      "_hover": {
+        "backgroundColor": "primary.main",
+        "color": "background",
+        "borderColor": "primary.main"
+      }
+    }
+  },
+  {
+    "color": "secondary",
+    "disabled": true,
+    "css": {
+      "_hover": {
+        "backgroundColor": "secondary.main",
+        "color": "background",
+        "borderColor": "secondary.main"
+      }
+    }
+  },
+  {
+    "color": "tertiary",
+    "disabled": true,
+    "css": {
+      "_hover": {
+        "backgroundColor": "tertiary.main",
+        "color": "background",
+        "borderColor": "tertiary.main"
+      }
+    }
+  },
+  {
+    "color": "gray",
+    "disabled": true,
+    "css": {
+      "_hover": {
+        "backgroundColor": "gray.main",
+        "color": "background",
+        "borderColor": "gray.main"
+      }
+    }
+  },
+  {
+    "color": "success",
+    "disabled": true,
+    "css": {
+      "_hover": {
+        "backgroundColor": "success.main",
+        "color": "background",
+        "borderColor": "success.main"
+      }
+    }
+  },
+  {
+    "color": "error",
+    "disabled": true,
+    "css": {
+      "_hover": {
+        "backgroundColor": "error.main",
+        "color": "background",
+        "borderColor": "error.main"
+      }
+    }
+  },
+  {
+    "color": "info",
+    "disabled": true,
+    "css": {
+      "_hover": {
+        "backgroundColor": "info.main",
+        "color": "background",
+        "borderColor": "info.main"
+      }
+    }
+  },
+  {
+    "color": "text",
+    "disabled": true,
+    "css": {
+      "_hover": {
+        "backgroundColor": "text.standard",
+        "color": "background",
+        "borderColor": "text.standard"
+      }
+    }
+  },
+  {
+    "color": "black",
+    "disabled": true,
+    "css": {
+      "_hover": {
+        "backgroundColor": "black",
+        "color": "background",
+        "borderColor": "white"
+      }
+    }
+  }
+])
+
+const buttonVariantMap = {
+  "color": [
+    "primary",
+    "secondary",
+    "tertiary",
+    "black",
+    "gray",
+    "success",
+    "error",
+    "info",
+    "text"
+  ],
+  "size": [
+    "sm",
+    "md",
+    "lg"
+  ],
+  "fullWidth": [
+    "true",
+    "false"
+  ],
+  "disabled": [
+    "true",
+    "false"
+  ]
+}
+
+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/dist/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: {
+       prefix: "thread-ui",
+       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/dist/styled-system/recipes/index.d.ts

@@ -0,0 +1,2 @@
+/* eslint-disable */
+export * from './button';

package/dist/styled-system/recipes/index.mjs

@@ -0,0 +1 @@
+export * from './button.mjs';