@mekari/pixel3-styled-system 0.0.5-dev.1 → 0.0.5-dev.3

package/recipes/popover-content-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps } from '../helpers.mjs';
+import { memo, splitProps } from '../helpers.mjs';
 import { createRecipe, mergeRecipes } from './create-recipe.mjs';
 
 const popoverContentRecipeFn = /* @__PURE__ */ createRecipe('popover', {
@@ -19,7 +19,7 @@ const popoverContentRecipeVariantMap = {
 
 const popoverContentRecipeVariantKeys = Object.keys(popoverContentRecipeVariantMap)
 
-export const popoverContentRecipe = /* @__PURE__ */ Object.assign(popoverContentRecipeFn, {
+export const popoverContentRecipe = /* @__PURE__ */ Object.assign(memo(popoverContentRecipeFn), {
   __recipe__: true,
   __name__: 'popoverContentRecipe',
   raw: (props) => props,

package/recipes/popover-list-item-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps } from '../helpers.mjs';
+import { memo, splitProps } from '../helpers.mjs';
 import { createRecipe, mergeRecipes } from './create-recipe.mjs';
 
 const popoverListItemRecipeFn = /* @__PURE__ */ createRecipe('popover-list-item', {}, [])
@@ -7,7 +7,7 @@ const popoverListItemRecipeVariantMap = {}
 
 const popoverListItemRecipeVariantKeys = Object.keys(popoverListItemRecipeVariantMap)
 
-export const popoverListItemRecipe = /* @__PURE__ */ Object.assign(popoverListItemRecipeFn, {
+export const popoverListItemRecipe = /* @__PURE__ */ Object.assign(memo(popoverListItemRecipeFn), {
   __recipe__: true,
   __name__: 'popoverListItemRecipe',
   raw: (props) => props,

package/recipes/popover-list-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps } from '../helpers.mjs';
+import { memo, splitProps } from '../helpers.mjs';
 import { createRecipe, mergeRecipes } from './create-recipe.mjs';
 
 const popoverListRecipeFn = /* @__PURE__ */ createRecipe('popover-list', {}, [])
@@ -7,7 +7,7 @@ const popoverListRecipeVariantMap = {}
 
 const popoverListRecipeVariantKeys = Object.keys(popoverListRecipeVariantMap)
 
-export const popoverListRecipe = /* @__PURE__ */ Object.assign(popoverListRecipeFn, {
+export const popoverListRecipe = /* @__PURE__ */ Object.assign(memo(popoverListRecipeFn), {
   __recipe__: true,
   __name__: 'popoverListRecipe',
   raw: (props) => props,

package/recipes/progress-slot-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
+import { getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
 const progressSlotRecipeDefaultVariants = {
@@ -27,9 +27,9 @@ const progressSlotRecipeSlotNames = [
 ]
 const progressSlotRecipeSlotFns = /* @__PURE__ */ progressSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, progressSlotRecipeDefaultVariants, getSlotCompoundVariant(progressSlotRecipeCompoundVariants, slotName))])
 
-const progressSlotRecipeFn = (props = {}) => {
+const progressSlotRecipeFn = memo((props = {}) => {
   return Object.fromEntries(progressSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
-}
+})
 
 const progressSlotRecipeVariantKeys = [
   "size",

package/recipes/radio-slot-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
+import { getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
 const radioSlotRecipeDefaultVariants = {}
@@ -20,9 +20,9 @@ const radioSlotRecipeSlotNames = [
 ]
 const radioSlotRecipeSlotFns = /* @__PURE__ */ radioSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, radioSlotRecipeDefaultVariants, getSlotCompoundVariant(radioSlotRecipeCompoundVariants, slotName))])
 
-const radioSlotRecipeFn = (props = {}) => {
+const radioSlotRecipeFn = memo((props = {}) => {
   return Object.fromEntries(radioSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
-}
+})
 
 const radioSlotRecipeVariantKeys = []
 

package/recipes/segmented-control-slot-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
+import { getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
 const segmentedControlSlotRecipeDefaultVariants = {}
@@ -32,9 +32,9 @@ const segmentedControlSlotRecipeSlotNames = [
 ]
 const segmentedControlSlotRecipeSlotFns = /* @__PURE__ */ segmentedControlSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, segmentedControlSlotRecipeDefaultVariants, getSlotCompoundVariant(segmentedControlSlotRecipeCompoundVariants, slotName))])
 
-const segmentedControlSlotRecipeFn = (props = {}) => {
+const segmentedControlSlotRecipeFn = memo((props = {}) => {
   return Object.fromEntries(segmentedControlSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
-}
+})
 
 const segmentedControlSlotRecipeVariantKeys = []
 

package/recipes/select-slot-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
+import { getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
 const selectSlotRecipeDefaultVariants = {
@@ -26,9 +26,9 @@ const selectSlotRecipeSlotNames = [
 ]
 const selectSlotRecipeSlotFns = /* @__PURE__ */ selectSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, selectSlotRecipeDefaultVariants, getSlotCompoundVariant(selectSlotRecipeCompoundVariants, slotName))])
 
-const selectSlotRecipeFn = (props = {}) => {
+const selectSlotRecipeFn = memo((props = {}) => {
   return Object.fromEntries(selectSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
-}
+})
 
 const selectSlotRecipeVariantKeys = [
   "size"

package/recipes/selected-border-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps } from '../helpers.mjs';
+import { memo, splitProps } from '../helpers.mjs';
 import { createRecipe, mergeRecipes } from './create-recipe.mjs';
 
 const selectedBorderRecipeFn = /* @__PURE__ */ createRecipe('selected-border', {
@@ -73,7 +73,7 @@ const selectedBorderRecipeVariantMap = {
 
 const selectedBorderRecipeVariantKeys = Object.keys(selectedBorderRecipeVariantMap)
 
-export const selectedBorderRecipe = /* @__PURE__ */ Object.assign(selectedBorderRecipeFn, {
+export const selectedBorderRecipe = /* @__PURE__ */ Object.assign(memo(selectedBorderRecipeFn), {
   __recipe__: true,
   __name__: 'selectedBorderRecipe',
   raw: (props) => props,

package/recipes/shared-slot-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
+import { getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
 const sharedSlotRecipeDefaultVariants = {}
@@ -12,9 +12,9 @@ const sharedSlotRecipeSlotNames = [
 ]
 const sharedSlotRecipeSlotFns = /* @__PURE__ */ sharedSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, sharedSlotRecipeDefaultVariants, getSlotCompoundVariant(sharedSlotRecipeCompoundVariants, slotName))])
 
-const sharedSlotRecipeFn = (props = {}) => {
+const sharedSlotRecipeFn = memo((props = {}) => {
   return Object.fromEntries(sharedSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
-}
+})
 
 const sharedSlotRecipeVariantKeys = []
 

package/recipes/spinner-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps } from '../helpers.mjs';
+import { memo, splitProps } from '../helpers.mjs';
 import { createRecipe, mergeRecipes } from './create-recipe.mjs';
 
 const spinnerRecipeFn = /* @__PURE__ */ createRecipe('spinner', {
@@ -14,7 +14,7 @@ const spinnerRecipeVariantMap = {
 
 const spinnerRecipeVariantKeys = Object.keys(spinnerRecipeVariantMap)
 
-export const spinnerRecipe = /* @__PURE__ */ Object.assign(spinnerRecipeFn, {
+export const spinnerRecipe = /* @__PURE__ */ Object.assign(memo(spinnerRecipeFn), {
   __recipe__: true,
   __name__: 'spinnerRecipe',
   raw: (props) => props,

package/recipes/tab-list-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps } from '../helpers.mjs';
+import { memo, splitProps } from '../helpers.mjs';
 import { createRecipe, mergeRecipes } from './create-recipe.mjs';
 
 const tabListRecipeFn = /* @__PURE__ */ createRecipe('tab-list', {}, [])
@@ -7,7 +7,7 @@ const tabListRecipeVariantMap = {}
 
 const tabListRecipeVariantKeys = Object.keys(tabListRecipeVariantMap)
 
-export const tabListRecipe = /* @__PURE__ */ Object.assign(tabListRecipeFn, {
+export const tabListRecipe = /* @__PURE__ */ Object.assign(memo(tabListRecipeFn), {
   __recipe__: true,
   __name__: 'tabListRecipe',
   raw: (props) => props,

package/recipes/tab-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps } from '../helpers.mjs';
+import { memo, splitProps } from '../helpers.mjs';
 import { createRecipe, mergeRecipes } from './create-recipe.mjs';
 
 const tabRecipeFn = /* @__PURE__ */ createRecipe('tab', {
@@ -72,7 +72,7 @@ const tabRecipeVariantMap = {
 
 const tabRecipeVariantKeys = Object.keys(tabRecipeVariantMap)
 
-export const tabRecipe = /* @__PURE__ */ Object.assign(tabRecipeFn, {
+export const tabRecipe = /* @__PURE__ */ Object.assign(memo(tabRecipeFn), {
   __recipe__: true,
   __name__: 'tabRecipe',
   raw: (props) => props,

package/recipes/table-container-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps } from '../helpers.mjs';
+import { memo, splitProps } from '../helpers.mjs';
 import { createRecipe, mergeRecipes } from './create-recipe.mjs';
 
 const tableContainerRecipeFn = /* @__PURE__ */ createRecipe('table-container', {}, [])
@@ -7,7 +7,7 @@ const tableContainerRecipeVariantMap = {}
 
 const tableContainerRecipeVariantKeys = Object.keys(tableContainerRecipeVariantMap)
 
-export const tableContainerRecipe = /* @__PURE__ */ Object.assign(tableContainerRecipeFn, {
+export const tableContainerRecipe = /* @__PURE__ */ Object.assign(memo(tableContainerRecipeFn), {
   __recipe__: true,
   __name__: 'tableContainerRecipe',
   raw: (props) => props,

package/recipes/table-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps } from '../helpers.mjs';
+import { memo, splitProps } from '../helpers.mjs';
 import { createRecipe, mergeRecipes } from './create-recipe.mjs';
 
 const tableRecipeFn = /* @__PURE__ */ createRecipe('table', {}, [])
@@ -7,7 +7,7 @@ const tableRecipeVariantMap = {}
 
 const tableRecipeVariantKeys = Object.keys(tableRecipeVariantMap)
 
-export const tableRecipe = /* @__PURE__ */ Object.assign(tableRecipeFn, {
+export const tableRecipe = /* @__PURE__ */ Object.assign(memo(tableRecipeFn), {
   __recipe__: true,
   __name__: 'tableRecipe',
   raw: (props) => props,

package/recipes/tag-slot-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
+import { getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
 const tagSlotRecipeDefaultVariants = {
@@ -44,9 +44,9 @@ const tagSlotRecipeSlotNames = [
 ]
 const tagSlotRecipeSlotFns = /* @__PURE__ */ tagSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, tagSlotRecipeDefaultVariants, getSlotCompoundVariant(tagSlotRecipeCompoundVariants, slotName))])
 
-const tagSlotRecipeFn = (props = {}) => {
+const tagSlotRecipeFn = memo((props = {}) => {
   return Object.fromEntries(tagSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
-}
+})
 
 const tagSlotRecipeVariantKeys = [
   "size",

package/recipes/text-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps } from '../helpers.mjs';
+import { memo, splitProps } from '../helpers.mjs';
 import { createRecipe, mergeRecipes } from './create-recipe.mjs';
 
 const textRecipeFn = /* @__PURE__ */ createRecipe('text', {
@@ -25,7 +25,7 @@ const textRecipeVariantMap = {
 
 const textRecipeVariantKeys = Object.keys(textRecipeVariantMap)
 
-export const textRecipe = /* @__PURE__ */ Object.assign(textRecipeFn, {
+export const textRecipe = /* @__PURE__ */ Object.assign(memo(textRecipeFn), {
   __recipe__: true,
   __name__: 'textRecipe',
   raw: (props) => props,

package/recipes/textarea-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps } from '../helpers.mjs';
+import { memo, splitProps } from '../helpers.mjs';
 import { createRecipe, mergeRecipes } from './create-recipe.mjs';
 
 const textareaRecipeFn = /* @__PURE__ */ createRecipe('textarea', {}, [])
@@ -11,7 +11,7 @@ const textareaRecipeVariantMap = {
 
 const textareaRecipeVariantKeys = Object.keys(textareaRecipeVariantMap)
 
-export const textareaRecipe = /* @__PURE__ */ Object.assign(textareaRecipeFn, {
+export const textareaRecipe = /* @__PURE__ */ Object.assign(memo(textareaRecipeFn), {
   __recipe__: true,
   __name__: 'textareaRecipe',
   raw: (props) => props,

package/recipes/toast-slot-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
+import { getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
 const toastSlotRecipeDefaultVariants = {
@@ -39,9 +39,9 @@ const toastSlotRecipeSlotNames = [
 ]
 const toastSlotRecipeSlotFns = /* @__PURE__ */ toastSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, toastSlotRecipeDefaultVariants, getSlotCompoundVariant(toastSlotRecipeCompoundVariants, slotName))])
 
-const toastSlotRecipeFn = (props = {}) => {
+const toastSlotRecipeFn = memo((props = {}) => {
   return Object.fromEntries(toastSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
-}
+})
 
 const toastSlotRecipeVariantKeys = [
   "variant"

package/recipes/toggle-slot-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
+import { getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
 const toggleSlotRecipeDefaultVariants = {}
@@ -20,9 +20,9 @@ const toggleSlotRecipeSlotNames = [
 ]
 const toggleSlotRecipeSlotFns = /* @__PURE__ */ toggleSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, toggleSlotRecipeDefaultVariants, getSlotCompoundVariant(toggleSlotRecipeCompoundVariants, slotName))])
 
-const toggleSlotRecipeFn = (props = {}) => {
+const toggleSlotRecipeFn = memo((props = {}) => {
   return Object.fromEntries(toggleSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
-}
+})
 
 const toggleSlotRecipeVariantKeys = []
 

package/recipes/tooltip-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps } from '../helpers.mjs';
+import { memo, splitProps } from '../helpers.mjs';
 import { createRecipe, mergeRecipes } from './create-recipe.mjs';
 
 const tooltipRecipeFn = /* @__PURE__ */ createRecipe('tooltip', {}, [])
@@ -7,7 +7,7 @@ const tooltipRecipeVariantMap = {}
 
 const tooltipRecipeVariantKeys = Object.keys(tooltipRecipeVariantMap)
 
-export const tooltipRecipe = /* @__PURE__ */ Object.assign(tooltipRecipeFn, {
+export const tooltipRecipe = /* @__PURE__ */ Object.assign(memo(tooltipRecipeFn), {
   __recipe__: true,
   __name__: 'tooltipRecipe',
   raw: (props) => props,

package/recipes/upload-list-slot-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
+import { getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
 const uploadListSlotRecipeDefaultVariants = {}
@@ -20,9 +20,9 @@ const uploadListSlotRecipeSlotNames = [
 ]
 const uploadListSlotRecipeSlotFns = /* @__PURE__ */ uploadListSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, uploadListSlotRecipeDefaultVariants, getSlotCompoundVariant(uploadListSlotRecipeCompoundVariants, slotName))])
 
-const uploadListSlotRecipeFn = (props = {}) => {
+const uploadListSlotRecipeFn = memo((props = {}) => {
   return Object.fromEntries(uploadListSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
-}
+})
 
 const uploadListSlotRecipeVariantKeys = []
 

package/recipes/upload-slot-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
+import { getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
 const uploadSlotRecipeDefaultVariants = {}
@@ -16,9 +16,9 @@ const uploadSlotRecipeSlotNames = [
 ]
 const uploadSlotRecipeSlotFns = /* @__PURE__ */ uploadSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, uploadSlotRecipeDefaultVariants, getSlotCompoundVariant(uploadSlotRecipeCompoundVariants, slotName))])
 
-const uploadSlotRecipeFn = (props = {}) => {
+const uploadSlotRecipeFn = memo((props = {}) => {
   return Object.fromEntries(uploadSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
-}
+})
 
 const uploadSlotRecipeVariantKeys = []
 

package/tokens/index.mjs

@@ -631,10 +631,6 @@ const tokens = {
     "value": "0.125rem",
     "variable": "var(--mp-sizes-0\\.5)"
   },
-  "sizes.1.5": {
-    "value": "0.375rem",
-    "variable": "var(--mp-sizes-1\\.5)"
-  },
   "sizes.2.5": {
     "value": "0.625rem",
     "variable": "var(--mp-sizes-2\\.5)"
@@ -731,10 +727,6 @@ const tokens = {
     "value": "16rem",
     "variable": "var(--mp-spacing-64)"
   },
-  "spacing.0.25": {
-    "value": "0.0625rem",
-    "variable": "var(--mp-spacing-0\\.25)"
-  },
   "spacing.0.5": {
     "value": "0.125rem",
     "variable": "var(--mp-spacing-0\\.5)"
@@ -743,10 +735,6 @@ const tokens = {
     "value": "0.375rem",
     "variable": "var(--mp-spacing-1\\.5)"
   },
-  "spacing.2.5": {
-    "value": "0.625rem",
-    "variable": "var(--mp-spacing-2\\.5)"
-  },
   "zIndex.hide": {
     "value": -1,
     "variable": "var(--mp-z-index-hide)"
@@ -855,10 +843,6 @@ const tokens = {
     "value": "calc(var(--mp-spacing-64) * -1)",
     "variable": "var(--mp-spacing-64)"
   },
-  "spacing.-0.25": {
-    "value": "calc(var(--mp-spacing-0\\.25) * -1)",
-    "variable": "var(--mp-spacing-0\\.25)"
-  },
   "spacing.-0.5": {
     "value": "calc(var(--mp-spacing-0\\.5) * -1)",
     "variable": "var(--mp-spacing-0\\.5)"
@@ -867,10 +851,6 @@ const tokens = {
     "value": "calc(var(--mp-spacing-1\\.5) * -1)",
     "variable": "var(--mp-spacing-1\\.5)"
   },
-  "spacing.-2.5": {
-    "value": "calc(var(--mp-spacing-2\\.5) * -1)",
-    "variable": "var(--mp-spacing-2\\.5)"
-  },
   "colors.colorPalette": {
     "value": "var(--mp-colors-color-palette)",
     "variable": "var(--mp-colors-color-palette)"

package/tokens/tokens.d.ts

@@ -1,5 +1,5 @@
 /* eslint-disable */
-export type Token = "borders.none" | "borders.sm" | "borders.md" | "borders.lg" | "colors.currentcolor" | "colors.dark" | "colors.white" | "colors.background" | "colors.overlay" | "colors.brand.capital" | "colors.brand.esign" | "colors.brand.expense" | "colors.brand.flex" | "colors.brand.jurnal" | "colors.brand.klikpajak" | "colors.brand.mekari" | "colors.brand.qontak" | "colors.brand.talenta" | "colors.brand.university" | "colors.whiteAlpha.50" | "colors.whiteAlpha.100" | "colors.whiteAlpha.200" | "colors.whiteAlpha.300" | "colors.whiteAlpha.400" | "colors.whiteAlpha.500" | "colors.whiteAlpha.600" | "colors.whiteAlpha.700" | "colors.whiteAlpha.800" | "colors.whiteAlpha.900" | "colors.blackAlpha.50" | "colors.blackAlpha.100" | "colors.blackAlpha.200" | "colors.blackAlpha.300" | "colors.blackAlpha.400" | "colors.blackAlpha.500" | "colors.blackAlpha.600" | "colors.blackAlpha.700" | "colors.blackAlpha.800" | "colors.blackAlpha.900" | "colors.gray.25" | "colors.gray.50" | "colors.gray.100" | "colors.gray.400" | "colors.gray.600" | "colors.blue.50" | "colors.blue.100" | "colors.blue.400" | "colors.blue.500" | "colors.blue.700" | "colors.red.50" | "colors.red.400" | "colors.red.500" | "colors.red.700" | "colors.green.50" | "colors.green.400" | "colors.green.500" | "colors.green.700" | "colors.orange.50" | "colors.orange.400" | "colors.orange.500" | "colors.orange.700" | "colors.sky.100" | "colors.sky.400" | "colors.teal.100" | "colors.teal.400" | "colors.violet.100" | "colors.violet.400" | "colors.amber.100" | "colors.amber.400" | "colors.rose.100" | "colors.rose.400" | "colors.stone.100" | "colors.stone.400" | "colors.lime.100" | "colors.lime.400" | "colors.pink.100" | "colors.pink.400" | "colors.apricot.100" | "colors.apricot.400" | "colors.aqua.100" | "colors.aqua.400" | "colors.leaf.100" | "colors.leaf.400" | "colors.fuchsia.100" | "colors.fuchsia.400" | "colors.ice.50" | "colors.ice.100" | "colors.ash.100" | "durations.slow" | "durations.normal" | "durations.fast" | "fonts.body" | "fonts.mono" | "fontSizes.xs" | "fontSizes.sm" | "fontSizes.md" | "fontSizes.lg" | "fontSizes.xl" | "fontSizes.2xl" | "fontWeights.regular" | "fontWeights.semiBold" | "fontWeights.bold" | "lineHeights.xs" | "lineHeights.sm" | "lineHeights.md" | "lineHeights.lg" | "lineHeights.xl" | "lineHeights.2xl" | "lineHeights.3xl" | "letterSpacings.tighter" | "letterSpacings.tight" | "letterSpacings.normal" | "letterSpacings.wide" | "letterSpacings.wider" | "letterSpacings.widest" | "opacity.0" | "opacity.40" | "opacity.60" | "opacity.100" | "radii.none" | "radii.xs" | "radii.sm" | "radii.md" | "radii.lg" | "radii.xl" | "radii.full" | "shadows.xs" | "shadows.sm" | "shadows.md" | "shadows.lg" | "shadows.focus" | "shadows.xl" | "shadows.2xl" | "shadows.outline" | "shadows.outline-tab" | "shadows.outer" | "shadows.inner" | "shadows.none" | "sizes.0" | "sizes.1" | "sizes.2" | "sizes.3" | "sizes.4" | "sizes.5" | "sizes.6" | "sizes.7" | "sizes.8" | "sizes.9" | "sizes.10" | "sizes.11" | "sizes.12" | "sizes.16" | "sizes.20" | "sizes.22" | "sizes.56" | "sizes.65" | "sizes.0.25" | "sizes.0.5" | "sizes.1.5" | "sizes.2.5" | "sizes.7.5" | "sizes.9.5" | "sizes.full" | "sizes.sm" | "sizes.breakpoint-sm" | "sizes.breakpoint-md" | "sizes.breakpoint-lg" | "sizes.breakpoint-xl" | "spacing.0" | "spacing.1" | "spacing.2" | "spacing.3" | "spacing.4" | "spacing.5" | "spacing.6" | "spacing.8" | "spacing.12" | "spacing.16" | "spacing.20" | "spacing.24" | "spacing.32" | "spacing.40" | "spacing.64" | "spacing.0.25" | "spacing.0.5" | "spacing.1.5" | "spacing.2.5" | "zIndex.hide" | "zIndex.base" | "zIndex.docked" | "zIndex.sticky" | "zIndex.overlay" | "zIndex.modal" | "zIndex.popover" | "zIndex.tooltip" | "breakpoints.sm" | "breakpoints.md" | "breakpoints.lg" | "breakpoints.xl" | "spacing.-0" | "spacing.-1" | "spacing.-2" | "spacing.-3" | "spacing.-4" | "spacing.-5" | "spacing.-6" | "spacing.-8" | "spacing.-12" | "spacing.-16" | "spacing.-20" | "spacing.-24" | "spacing.-32" | "spacing.-40" | "spacing.-64" | "spacing.-0.25" | "spacing.-0.5" | "spacing.-1.5" | "spacing.-2.5" | "colors.colorPalette" | "colors.colorPalette.capital" | "colors.colorPalette.esign" | "colors.colorPalette.expense" | "colors.colorPalette.flex" | "colors.colorPalette.jurnal" | "colors.colorPalette.klikpajak" | "colors.colorPalette.mekari" | "colors.colorPalette.qontak" | "colors.colorPalette.talenta" | "colors.colorPalette.university" | "colors.colorPalette.50" | "colors.colorPalette.100" | "colors.colorPalette.200" | "colors.colorPalette.300" | "colors.colorPalette.400" | "colors.colorPalette.500" | "colors.colorPalette.600" | "colors.colorPalette.700" | "colors.colorPalette.800" | "colors.colorPalette.900" | "colors.colorPalette.25"
+export type Token = "borders.none" | "borders.sm" | "borders.md" | "borders.lg" | "colors.currentcolor" | "colors.dark" | "colors.white" | "colors.background" | "colors.overlay" | "colors.brand.capital" | "colors.brand.esign" | "colors.brand.expense" | "colors.brand.flex" | "colors.brand.jurnal" | "colors.brand.klikpajak" | "colors.brand.mekari" | "colors.brand.qontak" | "colors.brand.talenta" | "colors.brand.university" | "colors.whiteAlpha.50" | "colors.whiteAlpha.100" | "colors.whiteAlpha.200" | "colors.whiteAlpha.300" | "colors.whiteAlpha.400" | "colors.whiteAlpha.500" | "colors.whiteAlpha.600" | "colors.whiteAlpha.700" | "colors.whiteAlpha.800" | "colors.whiteAlpha.900" | "colors.blackAlpha.50" | "colors.blackAlpha.100" | "colors.blackAlpha.200" | "colors.blackAlpha.300" | "colors.blackAlpha.400" | "colors.blackAlpha.500" | "colors.blackAlpha.600" | "colors.blackAlpha.700" | "colors.blackAlpha.800" | "colors.blackAlpha.900" | "colors.gray.25" | "colors.gray.50" | "colors.gray.100" | "colors.gray.400" | "colors.gray.600" | "colors.blue.50" | "colors.blue.100" | "colors.blue.400" | "colors.blue.500" | "colors.blue.700" | "colors.red.50" | "colors.red.400" | "colors.red.500" | "colors.red.700" | "colors.green.50" | "colors.green.400" | "colors.green.500" | "colors.green.700" | "colors.orange.50" | "colors.orange.400" | "colors.orange.500" | "colors.orange.700" | "colors.sky.100" | "colors.sky.400" | "colors.teal.100" | "colors.teal.400" | "colors.violet.100" | "colors.violet.400" | "colors.amber.100" | "colors.amber.400" | "colors.rose.100" | "colors.rose.400" | "colors.stone.100" | "colors.stone.400" | "colors.lime.100" | "colors.lime.400" | "colors.pink.100" | "colors.pink.400" | "colors.apricot.100" | "colors.apricot.400" | "colors.aqua.100" | "colors.aqua.400" | "colors.leaf.100" | "colors.leaf.400" | "colors.fuchsia.100" | "colors.fuchsia.400" | "colors.ice.50" | "colors.ice.100" | "colors.ash.100" | "durations.slow" | "durations.normal" | "durations.fast" | "fonts.body" | "fonts.mono" | "fontSizes.xs" | "fontSizes.sm" | "fontSizes.md" | "fontSizes.lg" | "fontSizes.xl" | "fontSizes.2xl" | "fontWeights.regular" | "fontWeights.semiBold" | "fontWeights.bold" | "lineHeights.xs" | "lineHeights.sm" | "lineHeights.md" | "lineHeights.lg" | "lineHeights.xl" | "lineHeights.2xl" | "lineHeights.3xl" | "letterSpacings.tighter" | "letterSpacings.tight" | "letterSpacings.normal" | "letterSpacings.wide" | "letterSpacings.wider" | "letterSpacings.widest" | "opacity.0" | "opacity.40" | "opacity.60" | "opacity.100" | "radii.none" | "radii.xs" | "radii.sm" | "radii.md" | "radii.lg" | "radii.xl" | "radii.full" | "shadows.xs" | "shadows.sm" | "shadows.md" | "shadows.lg" | "shadows.focus" | "shadows.xl" | "shadows.2xl" | "shadows.outline" | "shadows.outline-tab" | "shadows.outer" | "shadows.inner" | "shadows.none" | "sizes.0" | "sizes.1" | "sizes.2" | "sizes.3" | "sizes.4" | "sizes.5" | "sizes.6" | "sizes.7" | "sizes.8" | "sizes.9" | "sizes.10" | "sizes.11" | "sizes.12" | "sizes.16" | "sizes.20" | "sizes.22" | "sizes.56" | "sizes.65" | "sizes.0.25" | "sizes.0.5" | "sizes.2.5" | "sizes.7.5" | "sizes.9.5" | "sizes.full" | "sizes.sm" | "sizes.breakpoint-sm" | "sizes.breakpoint-md" | "sizes.breakpoint-lg" | "sizes.breakpoint-xl" | "spacing.0" | "spacing.1" | "spacing.2" | "spacing.3" | "spacing.4" | "spacing.5" | "spacing.6" | "spacing.8" | "spacing.12" | "spacing.16" | "spacing.20" | "spacing.24" | "spacing.32" | "spacing.40" | "spacing.64" | "spacing.0.5" | "spacing.1.5" | "zIndex.hide" | "zIndex.base" | "zIndex.docked" | "zIndex.sticky" | "zIndex.overlay" | "zIndex.modal" | "zIndex.popover" | "zIndex.tooltip" | "breakpoints.sm" | "breakpoints.md" | "breakpoints.lg" | "breakpoints.xl" | "spacing.-0" | "spacing.-1" | "spacing.-2" | "spacing.-3" | "spacing.-4" | "spacing.-5" | "spacing.-6" | "spacing.-8" | "spacing.-12" | "spacing.-16" | "spacing.-20" | "spacing.-24" | "spacing.-32" | "spacing.-40" | "spacing.-64" | "spacing.-0.5" | "spacing.-1.5" | "colors.colorPalette" | "colors.colorPalette.capital" | "colors.colorPalette.esign" | "colors.colorPalette.expense" | "colors.colorPalette.flex" | "colors.colorPalette.jurnal" | "colors.colorPalette.klikpajak" | "colors.colorPalette.mekari" | "colors.colorPalette.qontak" | "colors.colorPalette.talenta" | "colors.colorPalette.university" | "colors.colorPalette.50" | "colors.colorPalette.100" | "colors.colorPalette.200" | "colors.colorPalette.300" | "colors.colorPalette.400" | "colors.colorPalette.500" | "colors.colorPalette.600" | "colors.colorPalette.700" | "colors.colorPalette.800" | "colors.colorPalette.900" | "colors.colorPalette.25"
 
 export type ColorPalette = "currentcolor" | "dark" | "white" | "background" | "overlay" | "brand" | "whiteAlpha" | "blackAlpha" | "gray" | "blue" | "red" | "green" | "orange" | "sky" | "teal" | "violet" | "amber" | "rose" | "stone" | "lime" | "pink" | "apricot" | "aqua" | "leaf" | "fuchsia" | "ice" | "ash"
 
@@ -25,9 +25,9 @@ export type RadiusToken = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full"
 
 export type ShadowToken = "xs" | "sm" | "md" | "lg" | "focus" | "xl" | "2xl" | "outline" | "outline-tab" | "outer" | "inner" | "none"
 
-export type SizeToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "16" | "20" | "22" | "56" | "65" | "0.25" | "0.5" | "1.5" | "2.5" | "7.5" | "9.5" | "full" | "sm" | "breakpoint-sm" | "breakpoint-md" | "breakpoint-lg" | "breakpoint-xl"
+export type SizeToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "16" | "20" | "22" | "56" | "65" | "0.25" | "0.5" | "2.5" | "7.5" | "9.5" | "full" | "sm" | "breakpoint-sm" | "breakpoint-md" | "breakpoint-lg" | "breakpoint-xl"
 
-export type SpacingToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "12" | "16" | "20" | "24" | "32" | "40" | "64" | "0.25" | "0.5" | "1.5" | "2.5" | "-0" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-8" | "-12" | "-16" | "-20" | "-24" | "-32" | "-40" | "-64" | "-0.25" | "-0.5" | "-1.5" | "-2.5"
+export type SpacingToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "12" | "16" | "20" | "24" | "32" | "40" | "64" | "0.5" | "1.5" | "-0" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-8" | "-12" | "-16" | "-20" | "-24" | "-32" | "-40" | "-64" | "-0.5" | "-1.5"
 
 export type ZIndexToken = "hide" | "base" | "docked" | "sticky" | "overlay" | "modal" | "popover" | "tooltip"
 
@@ -54,4 +54,4 @@ export type Tokens = {
 		animationName: AnimationName
 } & { [token: string]: never }
 
-export type TokenCategory = "zIndex" | "opacity" | "colors" | "fonts" | "fontSizes" | "fontWeights" | "lineHeights" | "letterSpacings" | "sizes" | "shadows" | "spacing" | "radii" | "borders" | "durations" | "easings" | "animations" | "blurs" | "gradients" | "breakpoints" | "assets"
+export type TokenCategory = "aspectRatios" | "zIndex" | "opacity" | "colors" | "fonts" | "fontSizes" | "fontWeights" | "lineHeights" | "letterSpacings" | "sizes" | "shadows" | "spacing" | "radii" | "borders" | "borderWidths" | "durations" | "easings" | "animations" | "blurs" | "gradients" | "breakpoints" | "assets"

package/types/conditions.d.ts

@@ -116,9 +116,9 @@ export interface Conditions {
 	"_inRange": string
 	/** `&:out-of-range` */
 	"_outOfRange": string
-	/** `&::placeholder` */
+	/** `&::placeholder, &[data-placeholder]` */
 	"_placeholder": string
-	/** `&:placeholder-shown` */
+	/** `&:is(:placeholder-shown, [data-placeholder-shown])` */
 	"_placeholderShown": string
 	/** `&:is([aria-pressed=true], [data-pressed])` */
 	"_pressed": string

package/types/pattern.d.ts

@@ -13,13 +13,20 @@ export type PatternProperty =
 
 export interface PatternHelpers {
   map: (value: any, fn: (value: string) => string | undefined) => any
+  isCssUnit: (value: any) => boolean
+  isCssVar: (value: any) => boolean
+  isCssFunction: (value: any) => boolean
 }
 
 export interface PatternProperties {
   [key: string]: PatternProperty
 }
 
-type Props<T> = Record<LiteralUnion<keyof T>, any>
+type InferProps<T> = Record<LiteralUnion<keyof T>, any>
+
+export type PatternDefaultValue<T> = Partial<InferProps<T>>
+
+export type PatternDefaultValueFn<T> = (props: InferProps<T>) => PatternDefaultValue<T>
 
 export interface PatternConfig<T extends PatternProperties = PatternProperties> {
   /**
@@ -35,10 +42,14 @@ export interface PatternConfig<T extends PatternProperties = PatternProperties>
    * The properties of the pattern.
    */
   properties?: T
+  /**
+   * The default values of the pattern.
+   */
+  defaultValues?: PatternDefaultValue<T> | PatternDefaultValueFn<T>
   /**
    * The css object this pattern will generate.
    */
-  transform?: (props: Props<T>, helpers: PatternHelpers) => SystemStyleObject
+  transform?: (props: InferProps<T>, helpers: PatternHelpers) => SystemStyleObject
   /**
    * The jsx element name this pattern will generate.
    */