@stokelp/styled-system 1.0.2 → 1.0.4

package/package.json

@@ -1,11 +1,15 @@
 {
   "name": "@stokelp/styled-system",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Stokelp UI styled-system",
   "type": "module",
   "publishConfig": {
     "access": "public"
   },
+  "scripts": {
+    "release": "semantic-release -e semantic-release-monorepo",
+    "release:dry": "semantic-release -e semantic-release-monorepo --dry-run"
+  },
   "files": [
     "css",
     "jsx",
@@ -53,5 +57,12 @@
   },
   "devDependencies": {
     "@pandacss/dev": "^0.37.2"
+  },
+  "release": {
+    "monorepo": {
+      "dependencies": [
+        "packages/ui"
+      ]
+    }
   }
 }

package/panda.buildinfo.json

@@ -44,7 +44,9 @@
         "size]___[value:md]___[recipe:checkbox"
       ],
       "formControl": [],
-      "formLabel": [],
+      "formLabel": [
+        "variant]___[value:absolute]___[recipe:formLabel"
+      ],
       "switchRecipe": [
         "size]___[value:md]___[recipe:switchRecipe"
       ],
@@ -68,6 +70,9 @@
         "severity]___[value:none]___[recipe:button",
         "variant]___[value:tertiary]___[recipe:button"
       ],
+      "tabs": [
+        "variant]___[value:line]___[recipe:tabs"
+      ],
       "textarea": [],
       "formHelperText": []
     }

package/patterns/aspect-ratio.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const aspectRatioConfig = {
-transform(props5, { map }) {
-  const { ratio = 4 / 3, ...rest } = props5;
+transform(props6, { map }) {
+  const { ratio = 4 / 3, ...rest } = props6;
   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(props5, { map, isCssUnit, isCssVar }) {
-  const { inline, block, ...rest } = props5;
+transform(props6, { map, isCssUnit, isCssVar }) {
+  const { inline, block, ...rest } = props6;
   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(props5) {
-  return props5;
+transform(props6) {
+  return props6;
 }}
 
 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(props5) {
-  const { inline, ...rest } = props5;
+transform(props6) {
+  const { inline, ...rest } = props6;
   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(props5) {
-  const { size, ...rest } = props5;
+transform(props6) {
+  const { size, ...rest } = props6;
   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(props5) {
+transform(props6) {
   return {
     position: "relative",
     maxWidth: "8xl",
     mx: "auto",
     px: { base: "4", md: "6", lg: "8" },
-    ...props5
+    ...props6
   };
 }}
 

package/patterns/cq.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const cqConfig = {
-transform(props5) {
-  const { name, type, ...rest } = props5;
+transform(props6) {
+  const { name, type, ...rest } = props6;
   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(props5, { map }) {
-  const { orientation, thickness, color, ...rest } = props5;
+transform(props6, { map }) {
+  const { orientation, thickness, color, ...rest } = props6;
   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(props5) {
-  const { direction, align, justify, wrap: wrap2, basis, grow, shrink, ...rest } = props5;
+transform(props6) {
+  const { direction, align, justify, wrap: wrap2, basis, grow, shrink, ...rest } = props6;
   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(props5, { map }) {
-  const { offset, offsetX, offsetY, placement, ...rest } = props5;
+transform(props6, { map }) {
+  const { offset, offsetX, offsetY, placement, ...rest } = props6;
   return {
     display: "inline-flex",
     justifyContent: "center",
@@ -38,8 +38,8 @@ transform(props5, { map }) {
     ...rest
   };
 },
-defaultValues(props5) {
-  const offset = props5.offset || "0";
+defaultValues(props6) {
+  const offset = props6.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(props5, { map }) {
-  const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = props5;
+transform(props6, { map }) {
+  const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = props6;
   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(props5, { map, isCssUnit }) {
-  const { columnGap, rowGap, gap, columns, minChildWidth, ...rest } = props5;
+transform(props6, { map, isCssUnit }) {
+  const { columnGap, rowGap, gap, columns, minChildWidth, ...rest } = props6;
   const getValue = (v) => isCssUnit(v) ? v : `token(sizes.${v}, ${v})`;
   return {
     display: "grid",
@@ -14,8 +14,8 @@ transform(props5, { map, isCssUnit }) {
     ...rest
   };
 },
-defaultValues(props5) {
-  return { gap: props5.columnGap || props5.rowGap ? void 0 : "10px" };
+defaultValues(props6) {
+  return { gap: props6.columnGap || props6.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(props5) {
-  const { justify, gap, ...rest } = props5;
+transform(props6) {
+  const { justify, gap, ...rest } = props6;
   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(props5) {
+transform(props6) {
   return {
     position: "relative",
     "& :where(a, abbr)": {
       position: "relative",
       zIndex: "1"
     },
-    ...props5
+    ...props6
   };
 }}
 

package/patterns/link-overlay.mjs

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

package/patterns/spacer.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const spacerConfig = {
-transform(props5, { map }) {
-  const { size, ...rest } = props5;
+transform(props6, { map }) {
+  const { size, ...rest } = props6;
   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(props5) {
-  const { size, ...rest } = props5;
+transform(props6) {
+  const { size, ...rest } = props6;
   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(props5) {
-  const { align, justify, direction, gap, ...rest } = props5;
+transform(props6) {
+  const { align, justify, direction, gap, ...rest } = props6;
   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(props5) {
+transform(props6) {
   return {
     srOnly: true,
-    ...props5
+    ...props6
   };
 }}
 

package/patterns/vstack.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const vstackConfig = {
-transform(props5) {
-  const { justify, gap, ...rest } = props5;
+transform(props6) {
+  const { justify, gap, ...rest } = props6;
   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(props5) {
-  const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", align, justify, ...rest } = props5;
+transform(props6) {
+  const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", align, justify, ...rest } = props6;
   return {
     display: "flex",
     flexWrap: "wrap",

package/recipes/form-label.d.ts

@@ -3,7 +3,7 @@ import type { ConditionalValue } from '../types/index';
 import type { DistributiveOmit, Pretty } from '../types/system-types';
 
 interface FormLabelVariant {
-  
+  variant: "static" | "absolute"
 }
 
 type FormLabelVariantMap = {

package/recipes/form-label.mjs

@@ -1,7 +1,9 @@
 import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
-const formLabelDefaultVariants = {}
+const formLabelDefaultVariants = {
+  "variant": "absolute"
+}
 const formLabelCompoundVariants = []
 
 const formLabelSlotNames = [
@@ -20,7 +22,9 @@ const formLabelFn = memo((props = {}) => {
   return Object.fromEntries(formLabelSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
 })
 
-const formLabelVariantKeys = []
+const formLabelVariantKeys = [
+  "variant"
+]
 const getVariantProps = (variants) => ({ ...formLabelDefaultVariants, ...compact(variants) })
 
 export const formLabel = /* @__PURE__ */ Object.assign(formLabelFn, {
@@ -28,7 +32,12 @@ export const formLabel = /* @__PURE__ */ Object.assign(formLabelFn, {
   __name__: 'formLabel',
   raw: (props) => props,
   variantKeys: formLabelVariantKeys,
-  variantMap: {},
+  variantMap: {
+  "variant": [
+    "static",
+    "absolute"
+  ]
+},
   splitVariantProps(props) {
     return splitProps(props, formLabelVariantKeys)
   },

package/recipes/index.d.ts

@@ -9,4 +9,5 @@ export * from './form-helper-text';
 export * from './drawer';
 export * from './accordion';
 export * from './form-label';
-export * from './checkbox';
+export * from './checkbox';
+export * from './tabs';

package/recipes/index.mjs

@@ -8,4 +8,5 @@ export * from './form-helper-text.mjs';
 export * from './drawer.mjs';
 export * from './accordion.mjs';
 export * from './form-label.mjs';
-export * from './checkbox.mjs';
+export * from './checkbox.mjs';
+export * from './tabs.mjs';

package/recipes/tabs.d.ts

@@ -0,0 +1,28 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface TabsVariant {
+  variant: "line"
+}
+
+type TabsVariantMap = {
+  [key in keyof TabsVariant]: Array<TabsVariant[key]>
+}
+
+export type TabsVariantProps = {
+  [key in keyof TabsVariant]?: ConditionalValue<TabsVariant[key]> | undefined
+}
+
+export interface TabsRecipe {
+  __type: TabsVariantProps
+  (props?: TabsVariantProps): Pretty<Record<"root" | "list" | "trigger" | "content" | "indicator", string>>
+  raw: (props?: TabsVariantProps) => TabsVariantProps
+  variantMap: TabsVariantMap
+  variantKeys: Array<keyof TabsVariant>
+  splitVariantProps<Props extends TabsVariantProps>(props: Props): [TabsVariantProps, Pretty<DistributiveOmit<Props, keyof TabsVariantProps>>]
+  getVariantProps: (props?: TabsVariantProps) => TabsVariantProps
+}
+
+
+export declare const tabs: TabsRecipe

package/recipes/tabs.mjs

@@ -0,0 +1,56 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
+import { createRecipe } from './create-recipe.mjs';
+
+const tabsDefaultVariants = {
+  "variant": "line"
+}
+const tabsCompoundVariants = []
+
+const tabsSlotNames = [
+  [
+    "root",
+    "tabs__root"
+  ],
+  [
+    "list",
+    "tabs__list"
+  ],
+  [
+    "trigger",
+    "tabs__trigger"
+  ],
+  [
+    "content",
+    "tabs__content"
+  ],
+  [
+    "indicator",
+    "tabs__indicator"
+  ]
+]
+const tabsSlotFns = /* @__PURE__ */ tabsSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, tabsDefaultVariants, getSlotCompoundVariant(tabsCompoundVariants, slotName))])
+
+const tabsFn = memo((props = {}) => {
+  return Object.fromEntries(tabsSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
+})
+
+const tabsVariantKeys = [
+  "variant"
+]
+const getVariantProps = (variants) => ({ ...tabsDefaultVariants, ...compact(variants) })
+
+export const tabs = /* @__PURE__ */ Object.assign(tabsFn, {
+  __recipe__: false,
+  __name__: 'tabs',
+  raw: (props) => props,
+  variantKeys: tabsVariantKeys,
+  variantMap: {
+  "variant": [
+    "line"
+  ]
+},
+  splitVariantProps(props) {
+    return splitProps(props, tabsVariantKeys)
+  },
+  getVariantProps
+})