@okshaun/components 2.0.0 → 2.0.1

package/dist/panda.buildinfo.json

@@ -18,7 +18,7 @@
       "position]___[value:sticky",
       "top]___[value:0",
       "zIndex]___[value:1000",
-      "boxShadow]___[value:medium",
+      "boxShadow]___[value:elevated",
       "position]___[value:relative",
       "width]___[value:100%",
       "maxWidth]___[value:5xl",
@@ -216,14 +216,14 @@
       "background]___[value:tan.60",
       "background]___[value:tan.40]___[cond:_dark",
       "gap]___[value:56",
-      "gridTemplateColumns]___[value:auto 1fr",
-      "columnGap]___[value:12",
-      "rowGap]___[value:32",
+      "justifyContent]___[value:flex-end",
       "textStyle]___[value:mono.md",
       "marginRight]___[value:16",
       "textStyle]___[value:heading.sm",
       "gridColumn]___[value:1 / -1",
-      "justifyContent]___[value:flex-end",
+      "gridTemplateColumns]___[value:auto 1fr",
+      "columnGap]___[value:12",
+      "rowGap]___[value:32",
       "gap]___[value:0",
       "justifyContent]___[value:center",
       "padding]___[value:40",
@@ -418,7 +418,6 @@
       "placeContent]___[value:center",
       "background]___[value:surface.raised",
       "boxShadow]___[value:zero",
-      "boxShadow]___[value:elevated",
       "borderRightRadius]___[value:16",
       "boxShadow]___[value:overflow",
       "width]___[value:auto",
@@ -457,6 +456,7 @@
       "text": [
         "family]___[value:body]___[recipe:text",
         "size]___[value:16]___[recipe:text",
+        "family]___[value:inherit]___[recipe:text",
         "allCaps]___[value:true]___[recipe:text",
         "size]___[value:14]___[recipe:text",
         "size]___[value:12]___[recipe:text",
@@ -486,6 +486,8 @@
         "iconBefore]___[value:arrow-left]___[recipe:button",
         "size]___[value:sm]___[recipe:button",
         "iconAfter]___[value:arrow-right]___[recipe:button",
+        "size]___[value:xl]___[recipe:button",
+        "iconBefore]___[value:alarm]___[recipe:button",
         "iconBefore]___[value:plus]___[recipe:button",
         "iconBefore]___[value:timer]___[recipe:button",
         "variant]___[value:selectedBold]___[recipe:button",
@@ -582,6 +584,7 @@
         "variant]___[value:info]___[recipe:badge"
       ],
       "link": [
+        "family]___[value:inherit]___[recipe:link",
         "family]___[value:body]___[recipe:link",
         "size]___[value:16]___[recipe:link",
         "family]___[value:mono]___[recipe:link",

package/dist/{preset-Coz-VwQR.js → preset-Df8i1OIQ.js}

@@ -1149,51 +1149,44 @@ const shadows$1 = defineTokens.shadows({
   raisedLight: {
     value: "{sizes.0} {sizes.1} {sizes.1} {colors.shadow.raised.1.light}, {sizes.0} {sizes.0} {sizes.1} {colors.shadow.raised.2.light}"
   },
+  raisedLightUp: {
+    value: "{sizes.0} [-1] {sizes.1} {colors.shadow.raised.1.light}, {sizes.0} {sizes.0} {sizes.1} {colors.shadow.raised.2.light}"
+  },
   raisedDark: {
     value: "{sizes.0} {sizes.1} {sizes.1} {colors.shadow.raised.1.dark}, {sizes.0} {sizes.0} {sizes.1} {colors.shadow.raised.2.dark}"
   },
+  raisedDarkUp: {
+    value: "{sizes.0} [-1] {sizes.1} {colors.shadow.raised.1.dark}, {sizes.0} {sizes.0} {sizes.1} {colors.shadow.raised.2.dark}"
+  },
   elevatedLight: {
     value: "{sizes.0} {sizes.0} {sizes.0} {colors.shadow.elevated.1.light}, {sizes.0} {sizes.4} {sizes.7} {colors.shadow.elevated.2.light}, {sizes.0} {sizes.0} {sizes.1} {colors.shadow.elevated.3.light}"
   },
+  elevatedLightUp: {
+    value: "{sizes.0} {sizes.0} {sizes.0} {colors.shadow.elevated.1.light}, {sizes.0} [-4] {sizes.7} {colors.shadow.elevated.2.light}, {sizes.0} {sizes.0} {sizes.1} {colors.shadow.elevated.3.light}"
+  },
   elevatedDark: {
     value: "{sizes.0} {sizes.0} {sizes.0} {colors.shadow.elevated.1.dark}, {sizes.0} {sizes.4} {sizes.7} {colors.shadow.elevated.2.dark}, {sizes.0} {sizes.0} {sizes.1} {colors.shadow.elevated.3.dark}"
   },
+  elevatedDarkUp: {
+    value: "{sizes.0} {sizes.0} {sizes.0} {colors.shadow.elevated.1.dark}, {sizes.0} [-4] {sizes.7} {colors.shadow.elevated.2.dark}, {sizes.0} {sizes.0} {sizes.1} {colors.shadow.elevated.3.dark}"
+  },
   overlayLight: {
     value: "{sizes.0} {sizes.0} {sizes.0} {colors.shadow.overlay.1.light}, {sizes.0} {sizes.8} {sizes.12} {colors.shadow.overlay.2.light}, {sizes.0} {sizes.0} {sizes.1} {colors.shadow.overlay.3.light}"
   },
+  overlayLightUp: {
+    value: "{sizes.0} {sizes.0} {sizes.0} {colors.shadow.overlay.1.light}, {sizes.0} [-8] {sizes.12} {colors.shadow.overlay.2.light}, {sizes.0} {sizes.0} {sizes.1} {colors.shadow.overlay.3.light}"
+  },
   overlayDark: {
     value: "{sizes.0} {sizes.0} {sizes.0} {colors.shadow.overlay.1.dark}, {sizes.0} {sizes.8} {sizes.12} {colors.shadow.overlay.2.dark}, {sizes.0} {sizes.0} {sizes.1} {colors.shadow.overlay.3.dark}"
   },
+  overlayDarkUp: {
+    value: "{sizes.0} {sizes.0} {sizes.0} {colors.shadow.overlay.1.dark}, {sizes.0} [-8] {sizes.12} {colors.shadow.overlay.2.dark}, {sizes.0} {sizes.0} {sizes.1} {colors.shadow.overlay.3.dark}"
+  },
   overflowLight: {
     value: "{sizes.0} {sizes.0} {sizes.8} {colors.shadow.overflow.1.light}, {sizes.0} {sizes.0} {sizes.1} {colors.shadow.overflow.2.light}"
   },
   overflowDark: {
     value: "{sizes.0} {sizes.0} {sizes.12} {colors.shadow.overflow.1.dark}, {sizes.0} {sizes.0} {sizes.1} {colors.shadow.overflow.2.dark}"
-  },
-  // TODO: delete below once migration is complete
-  lowLight: {
-    value: "{sizes.0} {sizes.0} {sizes.2} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.1} {sizes.1} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.2} {sizes.3} rgba(30, 30, 30, 0.2)"
-  },
-  lowDark: {
-    value: "{sizes.0} {sizes.0} {sizes.2} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.1} {sizes.1} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.2} {sizes.3} rgba(0, 0, 0, 0.4)"
-  },
-  mediumLight: {
-    value: "{sizes.0} {sizes.0} {sizes.2} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.2} {sizes.2} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.4} {sizes.4} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.8} {sizes.8} rgba(30, 30, 30, 0.2)"
-  },
-  mediumDark: {
-    value: "{sizes.0} {sizes.0} {sizes.2} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.2} {sizes.2} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.4} {sizes.4} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.8} {sizes.8} rgba(0, 0, 0, 0.4)"
-  },
-  highLight: {
-    value: "{sizes.0} {sizes.0} {sizes.2} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.2} {sizes.4} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.6} {sizes.8} {sizes.1} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.14} {sizes.16} {sizes.2} rgba(30, 30, 30, 0.2)"
-  },
-  highDark: {
-    value: "{sizes.0} {sizes.0} {sizes.2} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.2} {sizes.4} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.6} {sizes.8} {sizes.1} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.14} {sizes.16} {sizes.2} rgba(0, 0, 0, 0.4)"
-  },
-  insetLight: {
-    value: "inset {sizes.0} {sizes.0} {sizes.2} rgba(30, 30, 30, 0.2), inset {sizes.0} {sizes.2} {sizes.1} rgba(30, 30, 30, 0.2), inset {sizes.0} {sizes.3} {sizes.2} rgba(30, 30, 30, 0.2)"
-  },
-  insetDark: {
-    value: "inset {sizes.0} {sizes.0} {sizes.2} rgba(0, 0, 0, 0.4), inset {sizes.0} {sizes.2} {sizes.1} rgba(0, 0, 0, 0.4), inset {sizes.0} {sizes.3} {sizes.2} rgba(0, 0, 0, 0.4)"
   }
 });
 const spacing$1 = defineTokens.spacing({
@@ -5252,6 +5245,9 @@ const linkBase = {
   _focusVisible: {
     borderRadius: "{sizes.4}",
     outlineColor: "border.focused"
+  },
+  "p &": {
+    backgroundImage: "linear-gradient(90deg, currentColor 0% 100%)"
   }
 };
 const linkVariants = {
@@ -5259,7 +5255,7 @@ const linkVariants = {
   _disabled: {
     true: {
       cursor: "not-allowed",
-      opacity: "40%",
+      color: "text.disabled",
       pointerEvents: "none"
     }
   }
@@ -5276,7 +5272,7 @@ const labelVariants = {
   _disabled: {
     true: {
       cursor: "not-allowed",
-      opacity: "70%",
+      color: "text.disabled",
       pointerEvents: "none"
     }
   }
@@ -5285,7 +5281,10 @@ const textRecipe = defineRecipe({
   className: "text",
   jsx: ["Text"],
   base: textBase,
-  variants: textVariants
+  variants: textVariants,
+  defaultVariants: {
+    family: "inherit"
+  }
 });
 const headingRecipe = defineRecipe({
   className: "heading",
@@ -5300,7 +5299,10 @@ const linkRecipe = defineRecipe({
   className: "link",
   jsx: ["Link"],
   base: linkBase,
-  variants: linkVariants
+  variants: linkVariants,
+  defaultVariants: {
+    family: "inherit"
+  }
 });
 const labelRecipe = defineRecipe({
   className: "label",
@@ -5901,6 +5903,18 @@ const breadcrumbsRecipe = defineSlotRecipe({
     }
   }
 });
+const iconDefaultStyles = {
+  fill: "icon.decorative",
+  mixBlendMode: { base: "multiply", _dark: "screen" },
+  _groupHover: { fill: "current" },
+  _groupActive: { fill: "current" }
+};
+const iconInverseStyles = {
+  fill: "icon.decorative.inverse",
+  mixBlendMode: { base: "screen", _dark: "multiply" },
+  _groupHover: { fill: "icon.decorative.inverse" },
+  _groupActive: { fill: "icon.decorative.inverse" }
+};
 const baseButtonStyles = {
   container: {
     position: "relative",
@@ -5940,12 +5954,6 @@ const baseButtonStyles = {
     },
     _focusVisible: {
       outlineColor: "border.focused"
-    },
-    _selected: {
-      bg: "bg.selected",
-      color: "text.selected",
-      borderColor: "transparent",
-      icon: { fill: "icon.selected" }
     }
   },
   icon: {
@@ -5968,70 +5976,73 @@ const buttonVariants = {
           bg: "bg.neutral.pressed"
         }
       },
-      icon: {
-        fill: "icon.decorative",
-        mixBlendMode: { base: "multiply", _dark: "screen" },
-        _groupHover: { fill: "current" },
-        _groupActive: { fill: "current" }
-      }
+      icon: iconDefaultStyles
     },
     primary: {
       container: {
-        bg: "bg.neutral.boldest",
+        bg: "bg.brand.boldest",
         color: "text.inverse",
         _hover: {
-          bg: "bg.neutral.bold.hovered"
+          bg: "bg.brand.boldest.hovered"
         },
         _active: {
-          bg: "bg.neutral.bold.pressed"
+          bg: "bg.brand.boldest.pressed"
         }
       },
       icon: {
+        ...iconInverseStyles,
         fill: "icon.decorative.inverse.subtle",
-        mixBlendMode: { base: "screen", _dark: "multiply" },
-        _groupHover: { fill: "icon.decorative.inverse" },
-        _groupActive: { fill: "icon.decorative.inverse" },
         _groupDisabled: {
           fill: "icon.decorative.inverse.subtle"
         }
       }
     },
-    hollow: {
+    ghost: {
       container: {
         bg: "bg.neutral.subtle",
-        borderColor: "border",
-        color: "text",
+        color: "text.subtle",
         _hover: {
-          bg: "bg.neutral.subtle.hovered"
+          bg: "bg.neutral.subtle.hovered",
+          color: "text"
         },
         _active: {
-          bg: "bg.neutral.subtle.pressed"
+          bg: "bg.neutral.subtle.pressed",
+          color: "text"
         }
       },
-      icon: {
-        fill: "icon.decorative",
-        mixBlendMode: { base: "multiply", _dark: "screen" },
-        _groupHover: { fill: "current" },
-        _groupActive: { fill: "current" }
-      }
+      icon: iconDefaultStyles
     },
-    ghost: {
+    subtle: {
       container: {
         bg: "bg.neutral.subtle",
+        color: "text.subtle",
+        _hover: {
+          bg: "bg.neutral.subtle.hovered",
+          color: "text"
+        },
+        _active: {
+          bg: "bg.neutral.subtle.pressed",
+          color: "text"
+        }
+      },
+      icon: iconDefaultStyles
+    },
+    hollow: {
+      container: {
+        bg: "bg.neutral.subtle",
+        borderColor: "border",
         color: "text",
         _hover: {
           bg: "bg.neutral.subtle.hovered"
         },
         _active: {
           bg: "bg.neutral.subtle.pressed"
+        },
+        _disabled: {
+          borderColor: "border.disabled"
         }
       },
-      icon: {
-        fill: "icon.decorative",
-        mixBlendMode: { base: "multiply", _dark: "screen" },
-        _groupHover: { fill: "current" },
-        _groupActive: { fill: "current" }
-      }
+      icon: iconDefaultStyles
     },
     danger: {
       container: {
@@ -6045,10 +6056,7 @@ const buttonVariants = {
         }
       },
       icon: {
-        fill: "icon.decorative.inverse",
-        mixBlendMode: "screen",
-        _groupHover: { fill: "icon.decorative.inverse" },
-        _groupActive: { fill: "icon.decorative.inverse" },
+        ...iconInverseStyles,
         _groupDisabled: {
           fill: "icon.decorative.inverse"
         }
@@ -6058,16 +6066,13 @@ const buttonVariants = {
       container: {
         bg: "bg.selected",
         color: "text.selected",
-        icon: { fill: "icon.selected" },
         _hover: {
           bg: "bg.selected.hovered",
-          color: "text.selected.hovered",
-          icon: { fill: "icon.selected" }
+          color: "text.selected.hovered"
         },
         _active: {
           bg: "bg.selected.pressed",
-          color: "text.selected",
-          icon: { fill: "icon.selected" }
+          color: "text.selected"
         }
       },
       icon: {
@@ -6100,6 +6105,75 @@ const buttonVariants = {
           fill: "icon.inverse"
         }
       }
+    },
+    selectedSubtle: {
+      container: {
+        bg: "bg.selected",
+        color: "text.selected",
+        _hover: {
+          bg: "bg.selected.hovered",
+          color: "text.selected.hovered"
+        },
+        _active: {
+          bg: "bg.selected.pressed",
+          color: "text.selected"
+        }
+      },
+      icon: {
+        fill: "icon.selected",
+        mixBlendMode: { base: "multiply", _dark: "screen" },
+        _groupHover: { fill: "icon.selected" },
+        _groupActive: { fill: "icon.selected" },
+        _groupDisabled: {
+          fill: "icon.selected"
+        }
+      }
+    }
+  }
+};
+const buttonSizes = {
+  sm: {
+    container: {
+      fontSize: "14",
+      py: "1",
+      px: "8"
+    },
+    icon: {
+      w: "22",
+      h: "22"
+    }
+  },
+  md: {
+    container: {
+      fontSize: "16",
+      py: "3",
+      px: "12"
+    },
+    icon: {
+      w: "24",
+      h: "24"
+    }
+  },
+  lg: {
+    container: {
+      fontSize: "16",
+      py: "7",
+      px: "14"
+    },
+    icon: {
+      w: "24",
+      h: "24"
+    }
+  },
+  xl: {
+    container: {
+      fontSize: "20",
+      py: "9",
+      px: "16"
+    },
+    icon: {
+      w: "28",
+      h: "28"
     }
   }
 };
@@ -6110,52 +6184,7 @@ const buttonRecipe = defineSlotRecipe({
   base: baseButtonStyles,
   variants: {
     ...buttonVariants,
-    size: {
-      sm: {
-        container: {
-          fontSize: "14",
-          py: "1",
-          px: "8"
-        },
-        icon: {
-          w: "22",
-          h: "22"
-        }
-      },
-      md: {
-        container: {
-          fontSize: "16",
-          py: "3",
-          px: "12"
-        },
-        icon: {
-          w: "24",
-          h: "24"
-        }
-      },
-      lg: {
-        container: {
-          fontSize: "16",
-          py: "7",
-          px: "14"
-        },
-        icon: {
-          w: "24",
-          h: "24"
-        }
-      },
-      xl: {
-        container: {
-          fontSize: "20",
-          py: "9",
-          px: "16"
-        },
-        icon: {
-          w: "28",
-          h: "28"
-        }
-      }
-    },
+    size: buttonSizes,
     iconBefore: {
       true: { container: {} }
     },
@@ -6554,7 +6583,6 @@ const datePickerBase = {
     flexDirection: "column",
     position: "relative"
   },
-  // The segmented input container — visually identical to textinput
   input: {
     display: "inline-flex",
     alignItems: "center",
@@ -6595,21 +6623,25 @@ const datePickerBase = {
       pointerEvents: "none"
     },
     _error: {
+      bg: "bg.danger",
       borderColor: "border.danger",
+      color: "text.danger",
       _hover: {
+        bg: "bg.danger.hovered",
         borderColor: "border.danger"
       },
       _focusWithin: {
+        bg: "bg.danger",
         borderColor: "border.danger",
         outlineColor: "border.danger"
       },
       _open: {
+        bg: "bg.danger",
         borderColor: "border.danger",
         outlineColor: "border.danger"
       }
     }
   },
-  // Individual focusable segment span (MM, DD, YYYY)
   segment: {
     display: "inline-flex",
     alignItems: "center",
@@ -6631,14 +6663,12 @@ const datePickerBase = {
       color: "text.disabled"
     }
   },
-  // The "/" or " " literal between date segments
   separator: {
     color: "text.placeholder",
     userSelect: "none",
     display: "inline-flex",
     alignItems: "center"
   },
-  // The floating calendar container
   popover: {
     display: "flex",
     flexDirection: "column",
@@ -6653,7 +6683,6 @@ const datePickerBase = {
     overflow: "hidden",
     outline: "none"
   },
-  // Month/year navigation row
   calendarHeader: {
     fontFamily: "mono",
     display: "flex",
@@ -6664,7 +6693,6 @@ const datePickerBase = {
     borderBottom: "default",
     gap: "4"
   },
-  // 7-column grid for the days
   calendarGrid: {
     display: "grid",
     gridTemplateColumns: "repeat(7, 1fr)",
@@ -6673,14 +6701,12 @@ const datePickerBase = {
     py: "4",
     pb: "8"
   },
-  // Su Mo Tu We Th Fr Sa column headers
   weekdayLabel: {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     userSelect: "none"
   },
-  // Individual day button in the grid
   day: {
     alignItems: "center",
     justifyContent: "center",
@@ -9142,29 +9168,40 @@ const shadows = defineSemanticTokens.shadows({
     value: { base: "{shadows.zeroShadow}", _dark: "{shadows.zeroShadow}" }
   },
   raised: {
-    value: { base: "{shadows.raisedLight}", _dark: "{shadows.raisedDark}" }
+    DEFAULT: {
+      value: { base: "{shadows.raisedLight}", _dark: "{shadows.raisedDark}" }
+    },
+    up: {
+      value: {
+        base: "{shadows.raisedLightUp}",
+        _dark: "{shadows.raisedDarkUp}"
+      }
+    }
   },
   elevated: {
-    value: { base: "{shadows.elevatedLight}", _dark: "{shadows.elevatedDark}" }
+    DEFAULT: {
+      value: {
+        base: "{shadows.elevatedLight}",
+        _dark: "{shadows.elevatedDark}"
+      }
+    },
+    up: {
+      value: {
+        base: "{shadows.elevatedLightUp}",
+        _dark: "{shadows.elevatedDarkUp}"
+      }
+    }
   },
   overlay: {
-    value: { base: "{shadows.overlayLight}", _dark: "{shadows.overlayDark}" }
+    DEFAULT: {
+      value: { base: "{shadows.overlayLight}", _dark: "{shadows.overlayDark}" }
+    },
+    dark: {
+      value: { base: "{shadows.overlayDark}", _dark: "{shadows.overlayLight}" }
+    }
   },
   overflow: {
     value: { base: "{shadows.overflowLight}", _dark: "{shadows.overflowDark}" }
-  },
-  // TODO: delete below once migration is complete
-  low: {
-    value: { base: "{shadows.lowLight}", _dark: "{shadows.lowDark}" }
-  },
-  medium: {
-    value: { base: "{shadows.mediumLight}", _dark: "{shadows.mediumDark}" }
-  },
-  high: {
-    value: { base: "{shadows.highLight}", _dark: "{shadows.highDark}" }
-  },
-  inset: {
-    value: { base: "{shadows.insetLight}", _dark: "{shadows.insetDark}" }
   }
 });
 const zIndex = defineSemanticTokens.zIndex({
@@ -9283,4 +9320,4 @@ export {
   containerSizes as c,
   okshaunPreset as o
 };
-//# sourceMappingURL=preset-Coz-VwQR.js.map
+//# sourceMappingURL=preset-Df8i1OIQ.js.map