@stokelp/styled-system 1.7.0 → 1.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokelp/styled-system",
-  "version": "1.7.0",
+  "version": "1.9.0",
   "description": "Stokelp UI styled-system",
   "type": "module",
   "publishConfig": {

package/panda.buildinfo.json

@@ -2,7 +2,6 @@
   "schemaVersion": "0.37.2",
   "styles": {
     "atomic": [
-      "marginLeft]___[value:auto",
       "padding]___[value:space-8",
       "background]___[value:error.500]___[cond:_disabled<___>_hover",
       "background]___[value:error.500]___[cond:_disabled<___>_active",
@@ -28,6 +27,7 @@
       "background]___[value:error.100]___[cond:_hover",
       "color]___[value:error.700]___[cond:_hover",
       "color]___[value:error.700]___[cond:_active",
+      "marginLeft]___[value:auto",
       "truncate]___[value:true",
       "width]___[value:20",
       "height]___[value:20",
@@ -37,6 +37,10 @@
       "paddingInline]___[value:space-8",
       "textAlign]___[value:center",
       "display]___[value:flex",
+      "alignItems]___[value:center",
+      "justifyContent]___[value:center",
+      "flex]___[value:0 0 auto",
+      "borderRadius]___[value:9999px",
       "alignItems]___[value:flex-start",
       "gap]___[value:0",
       "flexDirection]___[value:column",
@@ -44,17 +48,23 @@
       "gap]___[value:space-16",
       "borderColor]___[value:primary.100",
       "marginBlock]___[value:space-24",
-      "alignItems]___[value:center",
       "gap]___[value:10px"
     ],
     "recipes": {
       "checkbox": [
         "size]___[value:md]___[recipe:checkbox"
       ],
+      "inputGroup": [],
+      "input": [
+        "size]___[value:md]___[recipe:input"
+      ],
+      "inputAddon": [],
       "button": [
+        "size]___[value:sm]___[recipe:button",
+        "variant]___[value:secondary]___[recipe:button",
+        "severity]___[value:none]___[recipe:button",
         "size]___[value:lg]___[recipe:button",
         "variant]___[value:tertiary]___[recipe:button",
-        "severity]___[value:none]___[recipe:button",
         "variant]___[value:primary]___[recipe:button"
       ],
       "formControl": [],
@@ -69,6 +79,13 @@
       "switchRecipe": [
         "size]___[value:md]___[recipe:switchRecipe"
       ],
+      "tag": [
+        "size]___[value:md]___[recipe:tag",
+        "severity]___[value:neutral]___[recipe:tag",
+        "severity]___[value:success]___[recipe:tag",
+        "severity]___[value:warning]___[recipe:tag",
+        "severity]___[value:error]___[recipe:tag"
+      ],
       "heading": [
         "size]___[value:h2]___[recipe:heading"
       ],
@@ -78,14 +95,10 @@
       "drawer": [
         "variant]___[value:right]___[recipe:drawer"
       ],
-      "inputGroup": [],
-      "inputAddon": [],
-      "input": [
-        "size]___[value:md]___[recipe:input"
-      ],
       "tabs": [
         "variant]___[value:line]___[recipe:tabs"
       ],
+      "datepicker": [],
       "formHelperText": [],
       "select": [
         "size]___[value:md]___[recipe:select"

package/patterns/aspect-ratio.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const aspectRatioConfig = {
-transform(props7, { map }) {
-  const { ratio = 4 / 3, ...rest } = props7;
+transform(props8, { map }) {
+  const { ratio = 4 / 3, ...rest } = props8;
   return {
     position: "relative",
     _before: {

package/patterns/bleed.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const bleedConfig = {
-transform(props7, { map, isCssUnit, isCssVar }) {
-  const { inline, block, ...rest } = props7;
+transform(props8, { map, isCssUnit, isCssVar }) {
+  const { inline, block, ...rest } = props8;
   const valueFn = (v) => isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`;
   return {
     "--bleed-x": map(inline, valueFn),

package/patterns/box.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const boxConfig = {
-transform(props7) {
-  return props7;
+transform(props8) {
+  return props8;
 }}
 
 export const getBoxStyle = (styles = {}) => {

package/patterns/center.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const centerConfig = {
-transform(props7) {
-  const { inline, ...rest } = props7;
+transform(props8) {
+  const { inline, ...rest } = props8;
   return {
     display: inline ? "inline-flex" : "flex",
     alignItems: "center",

package/patterns/circle.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const circleConfig = {
-transform(props7) {
-  const { size, ...rest } = props7;
+transform(props8) {
+  const { size, ...rest } = props8;
   return {
     display: "flex",
     alignItems: "center",

package/patterns/container.mjs

@@ -2,13 +2,13 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const containerConfig = {
-transform(props7) {
+transform(props8) {
   return {
     position: "relative",
     maxWidth: "8xl",
     mx: "auto",
     px: { base: "4", md: "6", lg: "8" },
-    ...props7
+    ...props8
   };
 }}
 

package/patterns/cq.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const cqConfig = {
-transform(props7) {
-  const { name, type, ...rest } = props7;
+transform(props8) {
+  const { name, type, ...rest } = props8;
   return {
     containerType: type,
     containerName: name,

package/patterns/divider.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const dividerConfig = {
-transform(props7, { map }) {
-  const { orientation, thickness, color, ...rest } = props7;
+transform(props8, { map }) {
+  const { orientation, thickness, color, ...rest } = props8;
   return {
     "--thickness": thickness,
     width: map(orientation, (v) => v === "vertical" ? void 0 : "100%"),

package/patterns/flex.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const flexConfig = {
-transform(props7) {
-  const { direction, align, justify, wrap: wrap22, basis, grow, shrink, ...rest } = props7;
+transform(props8) {
+  const { direction, align, justify, wrap: wrap22, basis, grow, shrink, ...rest } = props8;
   return {
     display: "flex",
     flexDirection: direction,

package/patterns/float.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const floatConfig = {
-transform(props7, { map }) {
-  const { offset, offsetX, offsetY, placement, ...rest } = props7;
+transform(props8, { map }) {
+  const { offset, offsetX, offsetY, placement, ...rest } = props8;
   return {
     display: "inline-flex",
     justifyContent: "center",
@@ -38,8 +38,8 @@ transform(props7, { map }) {
     ...rest
   };
 },
-defaultValues(props7) {
-  const offset = props7.offset || "0";
+defaultValues(props8) {
+  const offset = props8.offset || "0";
   return { offset, offsetX: offset, offsetY: offset, placement: "top-end" };
 }}
 

package/patterns/grid-item.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const gridItemConfig = {
-transform(props7, { map }) {
-  const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = props7;
+transform(props8, { map }) {
+  const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = props8;
   const spanFn = (v) => v === "auto" ? v : `span ${v}`;
   return {
     gridColumn: colSpan != null ? map(colSpan, spanFn) : void 0,

package/patterns/grid.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const gridConfig = {
-transform(props7, { map, isCssUnit }) {
-  const { columnGap, rowGap, gap, columns, minChildWidth, ...rest } = props7;
+transform(props8, { map, isCssUnit }) {
+  const { columnGap, rowGap, gap, columns, minChildWidth, ...rest } = props8;
   const getValue = (v) => isCssUnit(v) ? v : `token(sizes.${v}, ${v})`;
   return {
     display: "grid",
@@ -14,8 +14,8 @@ transform(props7, { map, isCssUnit }) {
     ...rest
   };
 },
-defaultValues(props7) {
-  return { gap: props7.columnGap || props7.rowGap ? void 0 : "10px" };
+defaultValues(props8) {
+  return { gap: props8.columnGap || props8.rowGap ? void 0 : "10px" };
 }}
 
 export const getGridStyle = (styles = {}) => {

package/patterns/hstack.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const hstackConfig = {
-transform(props7) {
-  const { justify, gap, ...rest } = props7;
+transform(props8) {
+  const { justify, gap, ...rest } = props8;
   return {
     display: "flex",
     alignItems: "center",

package/patterns/link-box.mjs

@@ -2,14 +2,14 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const linkBoxConfig = {
-transform(props7) {
+transform(props8) {
   return {
     position: "relative",
     "& :where(a, abbr)": {
       position: "relative",
       zIndex: "1"
     },
-    ...props7
+    ...props8
   };
 }}
 

package/patterns/link-overlay.mjs

@@ -2,7 +2,7 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const linkOverlayConfig = {
-transform(props7) {
+transform(props8) {
   return {
     position: "static",
     _before: {
@@ -12,9 +12,9 @@ transform(props7) {
       cursor: "inherit",
       inset: "0",
       zIndex: "0",
-      ...props7["_before"]
+      ...props8["_before"]
     },
-    ...props7
+    ...props8
   };
 }}
 

package/patterns/spacer.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const spacerConfig = {
-transform(props7, { map }) {
-  const { size, ...rest } = props7;
+transform(props8, { map }) {
+  const { size, ...rest } = props8;
   return {
     alignSelf: "stretch",
     justifySelf: "stretch",

package/patterns/square.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const squareConfig = {
-transform(props7) {
-  const { size, ...rest } = props7;
+transform(props8) {
+  const { size, ...rest } = props8;
   return {
     display: "flex",
     alignItems: "center",

package/patterns/stack.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const stackConfig = {
-transform(props7) {
-  const { align, justify, direction, gap, ...rest } = props7;
+transform(props8) {
+  const { align, justify, direction, gap, ...rest } = props8;
   return {
     display: "flex",
     flexDirection: direction,

package/patterns/visually-hidden.mjs

@@ -2,10 +2,10 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const visuallyHiddenConfig = {
-transform(props7) {
+transform(props8) {
   return {
     srOnly: true,
-    ...props7
+    ...props8
   };
 }}
 

package/patterns/vstack.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const vstackConfig = {
-transform(props7) {
-  const { justify, gap, ...rest } = props7;
+transform(props8) {
+  const { justify, gap, ...rest } = props8;
   return {
     display: "flex",
     alignItems: "center",

package/patterns/wrap.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const wrapConfig = {
-transform(props7) {
-  const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", align, justify, ...rest } = props7;
+transform(props8) {
+  const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", align, justify, ...rest } = props8;
   return {
     display: "flex",
     flexWrap: "wrap",

package/recipes/datepicker.d.ts

@@ -0,0 +1,28 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface DatepickerVariant {
+  
+}
+
+type DatepickerVariantMap = {
+  [key in keyof DatepickerVariant]: Array<DatepickerVariant[key]>
+}
+
+export type DatepickerVariantProps = {
+  [key in keyof DatepickerVariant]?: ConditionalValue<DatepickerVariant[key]> | undefined
+}
+
+export interface DatepickerRecipe {
+  __type: DatepickerVariantProps
+  (props?: DatepickerVariantProps): Pretty<Record<"root" | "label" | "clearTrigger" | "content" | "control" | "input" | "monthSelect" | "nextTrigger" | "positioner" | "prevTrigger" | "rangeText" | "table" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "trigger" | "viewTrigger" | "viewControl" | "yearSelect" | "presetTrigger" | "view", string>>
+  raw: (props?: DatepickerVariantProps) => DatepickerVariantProps
+  variantMap: DatepickerVariantMap
+  variantKeys: Array<keyof DatepickerVariant>
+  splitVariantProps<Props extends DatepickerVariantProps>(props: Props): [DatepickerVariantProps, Pretty<DistributiveOmit<Props, keyof DatepickerVariantProps>>]
+  getVariantProps: (props?: DatepickerVariantProps) => DatepickerVariantProps
+}
+
+
+export declare const datepicker: DatepickerRecipe

package/recipes/datepicker.mjs

@@ -0,0 +1,124 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
+import { createRecipe } from './create-recipe.mjs';
+
+const datepickerDefaultVariants = {}
+const datepickerCompoundVariants = []
+
+const datepickerSlotNames = [
+  [
+    "root",
+    "datepicker__root"
+  ],
+  [
+    "label",
+    "datepicker__label"
+  ],
+  [
+    "clearTrigger",
+    "datepicker__clearTrigger"
+  ],
+  [
+    "content",
+    "datepicker__content"
+  ],
+  [
+    "control",
+    "datepicker__control"
+  ],
+  [
+    "input",
+    "datepicker__input"
+  ],
+  [
+    "monthSelect",
+    "datepicker__monthSelect"
+  ],
+  [
+    "nextTrigger",
+    "datepicker__nextTrigger"
+  ],
+  [
+    "positioner",
+    "datepicker__positioner"
+  ],
+  [
+    "prevTrigger",
+    "datepicker__prevTrigger"
+  ],
+  [
+    "rangeText",
+    "datepicker__rangeText"
+  ],
+  [
+    "table",
+    "datepicker__table"
+  ],
+  [
+    "tableBody",
+    "datepicker__tableBody"
+  ],
+  [
+    "tableCell",
+    "datepicker__tableCell"
+  ],
+  [
+    "tableCellTrigger",
+    "datepicker__tableCellTrigger"
+  ],
+  [
+    "tableHead",
+    "datepicker__tableHead"
+  ],
+  [
+    "tableHeader",
+    "datepicker__tableHeader"
+  ],
+  [
+    "tableRow",
+    "datepicker__tableRow"
+  ],
+  [
+    "trigger",
+    "datepicker__trigger"
+  ],
+  [
+    "viewTrigger",
+    "datepicker__viewTrigger"
+  ],
+  [
+    "viewControl",
+    "datepicker__viewControl"
+  ],
+  [
+    "yearSelect",
+    "datepicker__yearSelect"
+  ],
+  [
+    "presetTrigger",
+    "datepicker__presetTrigger"
+  ],
+  [
+    "view",
+    "datepicker__view"
+  ]
+]
+const datepickerSlotFns = /* @__PURE__ */ datepickerSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, datepickerDefaultVariants, getSlotCompoundVariant(datepickerCompoundVariants, slotName))])
+
+const datepickerFn = memo((props = {}) => {
+  return Object.fromEntries(datepickerSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
+})
+
+const datepickerVariantKeys = []
+const getVariantProps = (variants) => ({ ...datepickerDefaultVariants, ...compact(variants) })
+
+export const datepicker = /* @__PURE__ */ Object.assign(datepickerFn, {
+  __recipe__: false,
+  __name__: 'datepicker',
+  raw: (props) => props,
+  variantKeys: datepickerVariantKeys,
+  variantMap: {},
+  splitVariantProps(props) {
+    return splitProps(props, datepickerVariantKeys)
+  },
+  getVariantProps
+})

package/recipes/index.d.ts

@@ -13,5 +13,7 @@ export * from './drawer';
 export * from './accordion';
 export * from './form-label';
 export * from './checkbox';
+export * from './datepicker';
 export * from './tabs';
+export * from './tag';
 export * from './select';

package/recipes/index.mjs

@@ -12,5 +12,7 @@ export * from './drawer.mjs';
 export * from './accordion.mjs';
 export * from './form-label.mjs';
 export * from './checkbox.mjs';
+export * from './datepicker.mjs';
 export * from './tabs.mjs';
+export * from './tag.mjs';
 export * from './select.mjs';

package/recipes/tag.d.ts

@@ -0,0 +1,29 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface TagVariant {
+  size: "lg" | "md" | "sm"
+severity: "success" | "warning" | "error" | "neutral"
+}
+
+type TagVariantMap = {
+  [key in keyof TagVariant]: Array<TagVariant[key]>
+}
+
+export type TagVariantProps = {
+  [key in keyof TagVariant]?: ConditionalValue<TagVariant[key]> | undefined
+}
+
+export interface TagRecipe {
+  __type: TagVariantProps
+  (props?: TagVariantProps): Pretty<Record<"root" | "badge", string>>
+  raw: (props?: TagVariantProps) => TagVariantProps
+  variantMap: TagVariantMap
+  variantKeys: Array<keyof TagVariant>
+  splitVariantProps<Props extends TagVariantProps>(props: Props): [TagVariantProps, Pretty<DistributiveOmit<Props, keyof TagVariantProps>>]
+  getVariantProps: (props?: TagVariantProps) => TagVariantProps
+}
+
+/** The styles for the Tag component */
+export declare const tag: TagRecipe

package/recipes/tag.mjs

@@ -0,0 +1,54 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
+import { createRecipe } from './create-recipe.mjs';
+
+const tagDefaultVariants = {
+  "size": "md",
+  "severity": "neutral"
+}
+const tagCompoundVariants = []
+
+const tagSlotNames = [
+  [
+    "root",
+    "tag__root"
+  ],
+  [
+    "badge",
+    "tag__badge"
+  ]
+]
+const tagSlotFns = /* @__PURE__ */ tagSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, tagDefaultVariants, getSlotCompoundVariant(tagCompoundVariants, slotName))])
+
+const tagFn = memo((props = {}) => {
+  return Object.fromEntries(tagSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
+})
+
+const tagVariantKeys = [
+  "size",
+  "severity"
+]
+const getVariantProps = (variants) => ({ ...tagDefaultVariants, ...compact(variants) })
+
+export const tag = /* @__PURE__ */ Object.assign(tagFn, {
+  __recipe__: false,
+  __name__: 'tag',
+  raw: (props) => props,
+  variantKeys: tagVariantKeys,
+  variantMap: {
+  "size": [
+    "lg",
+    "md",
+    "sm"
+  ],
+  "severity": [
+    "success",
+    "warning",
+    "error",
+    "neutral"
+  ]
+},
+  splitVariantProps(props) {
+    return splitProps(props, tagVariantKeys)
+  },
+  getVariantProps
+})