thread-ui 0.7.14 → 0.8.1

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

@@ -0,0 +1,445 @@
+import { memo, splitProps } from '../helpers.js';
+import { createRecipe, mergeRecipes } from './create-recipe.js';
+
+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": "warning",
+    "disabled": true,
+    "css": {
+      "_hover": {
+        "backgroundColor": "warning.main",
+        "color": "background",
+        "borderColor": "warning.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": "neutral",
+    "disabled": true,
+    "css": {
+      "_hover": {
+        "backgroundColor": "background",
+        "color": "text.standard",
+        "borderColor": "text.standard",
+        "borderWidth": "md"
+      }
+    }
+  },
+  {
+    "color": "black",
+    "disabled": true,
+    "css": {
+      "_hover": {
+        "backgroundColor": "black",
+        "color": "background",
+        "borderColor": "white"
+      }
+    }
+  },
+  {
+    "textVariant": true,
+    "disabled": true,
+    "css": {
+      "_hover": {
+        "textDecoration": "none",
+        "backgroundColor": "transparent"
+      }
+    }
+  },
+  {
+    "textVariant": true,
+    "color": "primary",
+    "css": {
+      "color": "primary.main",
+      "_hover": {
+        "color": "primary.main"
+      }
+    }
+  },
+  {
+    "textVariant": true,
+    "color": "secondary",
+    "css": {
+      "color": "secondary.main",
+      "_hover": {
+        "color": "secondary.main"
+      }
+    }
+  },
+  {
+    "textVariant": true,
+    "color": "tertiary",
+    "css": {
+      "color": "tertiary.main",
+      "_hover": {
+        "color": "tertiary.main"
+      }
+    }
+  },
+  {
+    "textVariant": true,
+    "color": "gray",
+    "css": {
+      "color": "gray.main",
+      "_hover": {
+        "color": "gray.main"
+      }
+    }
+  },
+  {
+    "textVariant": true,
+    "color": "success",
+    "css": {
+      "color": "success.main",
+      "_hover": {
+        "color": "success.main"
+      }
+    }
+  },
+  {
+    "textVariant": true,
+    "color": "warning",
+    "css": {
+      "color": "warning.main",
+      "_hover": {
+        "color": "warning.main"
+      }
+    }
+  },
+  {
+    "textVariant": true,
+    "color": "error",
+    "css": {
+      "color": "error.main",
+      "_hover": {
+        "color": "error.main"
+      }
+    }
+  },
+  {
+    "textVariant": true,
+    "color": "info",
+    "css": {
+      "color": "info.main",
+      "_hover": {
+        "color": "info.main"
+      }
+    }
+  },
+  {
+    "textVariant": true,
+    "color": "neutral",
+    "css": {
+      "color": "text.standard",
+      "_hover": {
+        "color": "text.standard"
+      }
+    }
+  },
+  {
+    "textVariant": true,
+    "color": "black",
+    "css": {
+      "color": "black",
+      "_hover": {
+        "color": "black"
+      }
+    }
+  },
+  {
+    "textVariant": true,
+    "color": "text",
+    "css": {
+      "color": "text.standard",
+      "_hover": {
+        "color": "text.standard"
+      }
+    }
+  },
+  {
+    "highlightOnHover": true,
+    "disabled": false,
+    "textVariant": false,
+    "color": "primary",
+    "css": {
+      "_hover": {
+        "color": "white",
+        "backgroundColor": "primary.light",
+        "borderColor": "primary.main"
+      }
+    }
+  },
+  {
+    "highlightOnHover": true,
+    "disabled": false,
+    "textVariant": false,
+    "color": "secondary",
+    "css": {
+      "_hover": {
+        "color": "white",
+        "backgroundColor": "secondary.light",
+        "borderColor": "secondary.main"
+      }
+    }
+  },
+  {
+    "highlightOnHover": true,
+    "disabled": false,
+    "textVariant": false,
+    "color": "tertiary",
+    "css": {
+      "_hover": {
+        "color": "white",
+        "backgroundColor": "tertiary.light",
+        "borderColor": "tertiary.main"
+      }
+    }
+  },
+  {
+    "highlightOnHover": true,
+    "disabled": false,
+    "textVariant": false,
+    "color": "gray",
+    "css": {
+      "_hover": {
+        "backgroundColor": "gray.light",
+        "borderColor": "gray.main"
+      }
+    }
+  },
+  {
+    "highlightOnHover": true,
+    "disabled": false,
+    "textVariant": false,
+    "color": "success",
+    "css": {
+      "_hover": {
+        "color": "white",
+        "backgroundColor": "success.light",
+        "borderColor": "success.main"
+      }
+    }
+  },
+  {
+    "highlightOnHover": true,
+    "disabled": false,
+    "textVariant": false,
+    "color": "warning",
+    "css": {
+      "_hover": {
+        "color": "white",
+        "backgroundColor": "warning.light",
+        "borderColor": "warning.main"
+      }
+    }
+  },
+  {
+    "highlightOnHover": true,
+    "disabled": false,
+    "textVariant": false,
+    "color": "error",
+    "css": {
+      "_hover": {
+        "color": "white",
+        "backgroundColor": "error.light",
+        "borderColor": "error.main"
+      }
+    }
+  },
+  {
+    "highlightOnHover": true,
+    "disabled": false,
+    "textVariant": false,
+    "color": "info",
+    "css": {
+      "_hover": {
+        "color": "white",
+        "backgroundColor": "info.light",
+        "borderColor": "info.main"
+      }
+    }
+  },
+  {
+    "highlightOnHover": true,
+    "disabled": false,
+    "textVariant": false,
+    "color": "black",
+    "css": {
+      "_hover": {
+        "backgroundColor": "gray.light",
+        "borderColor": "white"
+      }
+    }
+  },
+  {
+    "highlightOnHover": true,
+    "disabled": false,
+    "textVariant": false,
+    "color": "text",
+    "css": {
+      "_hover": {
+        "backgroundColor": "surface",
+        "borderColor": "text.standard"
+      }
+    }
+  },
+  {
+    "highlightOnHover": true,
+    "disabled": false,
+    "textVariant": false,
+    "color": "neutral",
+    "css": {
+      "_hover": {
+        "backgroundColor": "surface",
+        "borderColor": "text.standard"
+      }
+    }
+  }
+])
+
+const buttonVariantMap = {
+  "color": [
+    "primary",
+    "secondary",
+    "tertiary",
+    "black",
+    "gray",
+    "success",
+    "warning",
+    "error",
+    "info",
+    "text",
+    "neutral"
+  ],
+  "size": [
+    "sm",
+    "md",
+    "lg"
+  ],
+  "fullWidth": [
+    "true",
+    "false"
+  ],
+  "disabled": [
+    "true",
+    "false"
+  ],
+  "textVariant": [
+    "true"
+  ],
+  "highlightOnHover": [
+    "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..js

@@ -0,0 +1,82 @@
+import { finalizeConditions, sortConditions } from '../css/conditions..js';
+import { css } from '../css/css..js';
+import { assertCompoundVariant, getCompoundVariantCss } from '../css/cva..js';
+import { cx } from '../css/cx..js';
+import { compact, createCss, splitProps, uniq, withoutSpace } from '../helpers..js';
+
+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/create-recipe.js

@@ -0,0 +1,82 @@
+import { finalizeConditions, sortConditions } from '../css/conditions.js';
+import { css } from '../css/css.js';
+import { assertCompoundVariant, getCompoundVariantCss } from '../css/cva.js';
+import { cx } from '../css/cx.js';
+import { compact, createCss, splitProps, uniq, withoutSpace } from '../helpers.js';
+
+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..js

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

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

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