@pstdio/ui 0.15.0 → 0.17.0

package/dist/theme/primitives/sizes.d.ts

@@ -30,9 +30,15 @@ export declare const spacing: {
     xs: {
         value: string;
     };
+    compact: {
+        value: string;
+    };
     sm: {
         value: string;
     };
+    comfortable: {
+        value: string;
+    };
     md: {
         value: string;
     };
@@ -61,6 +67,20 @@ export declare const spacing: {
         value: string;
     };
 };
+export declare const sizes: {
+    "collection-row": {
+        value: string;
+    };
+    "filter-pill": {
+        value: string;
+    };
+    "view-bar": {
+        value: string;
+    };
+    "view-subheader": {
+        value: string;
+    };
+};
 export declare const radii: {
     none: {
         value: string;
@@ -71,6 +91,9 @@ export declare const radii: {
     xs: {
         value: string;
     };
+    compact: {
+        value: string;
+    };
     sm: {
         value: string;
     };

package/dist/theme/recipes/badge.d.ts

@@ -0,0 +1,50 @@
+export declare const badgeRecipe: import('@chakra-ui/react').RecipeDefinition<{
+    variant: {
+        solid: {
+            bg: "colorPalette.solid";
+            color: "colorPalette.contrast";
+        };
+        subtle: {
+            bg: "colorPalette.subtle";
+            color: "colorPalette.fg";
+        };
+        number: {
+            bg: "colorPalette.subtle";
+            color: "colorPalette.fg";
+            borderRadius: "2xs";
+            justifyContent: "center";
+        };
+        outline: {
+            color: "colorPalette.fg";
+            "--outline-shadow-legacy": "colors.colorPalette.muted";
+            "--outline-shadow": "colors.colorPalette.border";
+            shadow: "inset 0 0 0px 1px var(--shadow-color)";
+            shadowColor: "var(--outline-shadow, var(--outline-shadow-legacy))";
+        };
+        plain: {
+            color: "colorPalette.fg";
+        };
+    };
+    size: {
+        xs: {
+            textStyle: "2xs";
+            px: "1";
+            minH: "4";
+        };
+        sm: {
+            textStyle: "xs";
+            px: "1.5";
+            minH: "5";
+        };
+        md: {
+            textStyle: "sm";
+            px: "2";
+            minH: "6";
+        };
+        lg: {
+            textStyle: "sm";
+            px: "2.5";
+            minH: "7";
+        };
+    };
+}>;

package/dist/theme/recipes/button.d.ts

@@ -3,7 +3,6 @@ export declare const buttonRecipe: import('@chakra-ui/react').RecipeDefinition<{
         "display-primary": {
             bg: "blacks.900";
             color: "fg.inverted";
-            borderRadius: "xl";
             outline: "none";
             border: "none";
             _hover: {
@@ -13,7 +12,6 @@ export declare const buttonRecipe: import('@chakra-ui/react').RecipeDefinition<{
         "display-outline": {
             bg: "transparent";
             color: "fg";
-            borderRadius: "xl";
             border: "2px solid {fg}";
             _hover: {
                 bg: "bg.hover";
@@ -25,7 +23,6 @@ export declare const buttonRecipe: import('@chakra-ui/react').RecipeDefinition<{
         "display-ghost": {
             bg: "transparent";
             color: "fg";
-            borderRadius: "xl";
             _hover: {
                 bg: "bg.hover";
             };
@@ -37,7 +34,6 @@ export declare const buttonRecipe: import('@chakra-ui/react').RecipeDefinition<{
             bg: "transparent";
             color: "fg";
             border: "none";
-            borderRadius: "xl";
             _hover: {
                 textDecoration: "underline";
             };
@@ -56,26 +52,21 @@ export declare const buttonRecipe: import('@chakra-ui/react').RecipeDefinition<{
                 bg: "bg.button.primary.pressed";
             };
         };
-        secondary: {
-            color: "fg";
-            bg: "bg";
-            border: "2px solid border.muted";
+        destructive: {
+            color: "blacks.50";
+            bg: "red.500";
+            border: "none";
             _hover: {
-                bg: "bg.hover";
+                bg: "red.600";
             };
             _active: {
-                bg: "bg.active";
-            };
-            _disabled: {
-                opacity: number;
-                color: "fg.subtle";
-                borderColor: "border.muted";
+                bg: "red.700";
             };
         };
         outline: {
             color: "fg";
             bg: "bg";
-            border: "border.muted";
+            border: "border";
             _hover: {
                 bg: "bg.hover";
             };
@@ -88,7 +79,7 @@ export declare const buttonRecipe: import('@chakra-ui/react').RecipeDefinition<{
             _disabled: {
                 opacity: number;
                 color: "fg.subtle";
-                borderColor: "border.muted";
+                borderColor: "border";
             };
         };
         ghost: {
@@ -104,6 +95,12 @@ export declare const buttonRecipe: import('@chakra-ui/react').RecipeDefinition<{
             _expanded: {
                 bg: "bg.active";
             };
+            "&[aria-pressed=true]": {
+                bg: "bg.active";
+                _hover: {
+                    bg: "bg.active";
+                };
+            };
             _disabled: {
                 bg: "transparent";
                 _hover: {
@@ -113,8 +110,8 @@ export declare const buttonRecipe: import('@chakra-ui/react').RecipeDefinition<{
         };
         subtle: {
             color: "fg";
-            bg: "bg.subtle";
-            border: "none";
+            bg: "bg.muted";
+            border: "1px solid {border}";
             _hover: {
                 bg: "bg.hover";
             };
@@ -128,6 +125,7 @@ export declare const buttonRecipe: import('@chakra-ui/react').RecipeDefinition<{
                 opacity: number;
                 color: "fg.subtle";
                 bg: "bg.muted";
+                borderColor: "border";
                 _hover: {
                     bg: "bg.muted";
                 };
@@ -135,8 +133,21 @@ export declare const buttonRecipe: import('@chakra-ui/react').RecipeDefinition<{
         };
     };
     size: {
+        "2xs": {
+            px: "0.375rem";
+            h: "1.5rem";
+            minW: "1.5rem";
+            textStyle: "label/XS";
+            _icon: {
+                width: "0.75rem";
+                height: "0.75rem";
+            };
+        };
         xs: {
+            px: "0.5rem";
             h: "1.75rem";
+            minW: "1.75rem";
+            textStyle: "label/XS";
             _icon: {
                 width: "0.875rem";
                 height: "0.875rem";

package/dist/theme/recipes/color-picker.d.ts

@@ -0,0 +1 @@
+export declare const colorPickerSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "area" | "label" | "view" | "root" | "trigger" | "positioner" | "valueText" | "control" | "areaThumb" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect" | "channelText", import('@chakra-ui/react').SlotRecipeVariantRecord<"content" | "area" | "label" | "view" | "root" | "trigger" | "positioner" | "valueText" | "control" | "areaThumb" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect" | "channelText">>;

package/dist/theme/recipes/dialog.d.ts

@@ -1 +1 @@
-export declare const dialogSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "body" | "footer" | "header" | "title" | "trigger" | "positioner" | "description" | "closeTrigger" | "backdrop", import('@chakra-ui/react').SlotRecipeVariantRecord<"content" | "body" | "footer" | "header" | "title" | "trigger" | "positioner" | "description" | "closeTrigger" | "backdrop">>;
+export declare const dialogSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "body" | "footer" | "header" | "title" | "trigger" | "positioner" | "description" | "backdrop" | "closeTrigger", import('@chakra-ui/react').SlotRecipeVariantRecord<"content" | "body" | "footer" | "header" | "title" | "trigger" | "positioner" | "description" | "backdrop" | "closeTrigger">>;

package/dist/theme/recipes/drawer.d.ts

@@ -1 +1 @@
-export declare const drawerSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "body" | "footer" | "header" | "title" | "trigger" | "positioner" | "description" | "closeTrigger" | "backdrop", import('@chakra-ui/react').SlotRecipeVariantRecord<"content" | "body" | "footer" | "header" | "title" | "trigger" | "positioner" | "description" | "closeTrigger" | "backdrop">>;
+export declare const drawerSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "body" | "footer" | "header" | "title" | "trigger" | "positioner" | "description" | "backdrop" | "closeTrigger", import('@chakra-ui/react').SlotRecipeVariantRecord<"content" | "body" | "footer" | "header" | "title" | "trigger" | "positioner" | "description" | "backdrop" | "closeTrigger">>;

package/dist/theme/recipes/input.d.ts

@@ -1,7 +1,62 @@
 export declare const inputRecipe: import('@chakra-ui/react').RecipeDefinition<{
+    variant: {
+        outline: {
+            bg: "bg";
+            border: "1px solid";
+            borderColor: "border";
+            outline: "none";
+            boxShadow: "none";
+            "--focus-color": "var(--chakra-colors-border-accent-light)";
+            "--focus-ring-style": "none";
+            _hover: {
+                borderColor: "border.accent-light";
+            };
+            _active: {
+                borderColor: "border.accent-light";
+            };
+            _focus: {
+                borderColor: "border.accent-light";
+                outline: "none";
+                boxShadow: "none";
+            };
+            _focusVisible: {
+                borderColor: "border.accent-light";
+                outline: "none";
+                boxShadow: "none";
+            };
+            "&:is(:hover, [data-hover])": {
+                borderColor: "border.accent-light";
+            };
+            "&:is(:active, [data-active])": {
+                borderColor: "border.accent-light";
+            };
+        };
+    };
     size: {
+        "2xs": {
+            h: "1.5rem";
+            px: "2xs";
+            textStyle: "label/XS";
+        };
+        xs: {
+            h: "1.75rem";
+            px: "xs";
+            textStyle: "label/XS";
+        };
         sm: {
             h: "2rem";
+            px: "sm";
+            textStyle: "label/S/regular";
+        };
+        md: {
+            h: "2.5rem";
+            px: "sm";
+            textStyle: "label/M/regular";
+        };
+        lg: {
+            h: "3rem";
+            px: "md";
+            textStyle: "label/M/regular";
         };
     };
 }>;

package/dist/theme/recipes/number-input.d.ts

@@ -0,0 +1,98 @@
+export declare const numberInputSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"input" | "label" | "root" | "valueText" | "control" | "incrementTrigger" | "decrementTrigger" | "scrubber", {
+    variant: {
+        outline: {
+            input: {
+                bg: "bg";
+                borderWidth: "1px";
+                borderStyle: "solid";
+                borderColor: "var(--number-input-border-color)";
+                outline: "none";
+                boxShadow: "none";
+                "--focus-ring-color": "var(--number-input-border-color)";
+                "--focus-ring-style": "none";
+                _hover: {
+                    borderColor: "var(--number-input-border-color)";
+                };
+                _active: {
+                    borderColor: "var(--number-input-border-color)";
+                };
+                _focus: {
+                    borderColor: "var(--number-input-border-color)";
+                    outline: "none";
+                    boxShadow: "none";
+                };
+                _focusVisible: {
+                    borderColor: "var(--number-input-border-color)";
+                    outline: "none";
+                    boxShadow: "none";
+                };
+                "&:is(:hover, [data-hover])": {
+                    borderColor: "var(--number-input-border-color)";
+                };
+                "&:is(:active, [data-active])": {
+                    borderColor: "var(--number-input-border-color)";
+                };
+                "&:not([data-invalid], [aria-invalid='true'], [data-state='invalid'])": {
+                    borderColor: "var(--number-input-border-color)";
+                };
+            };
+        };
+    };
+    size: {
+        "2xs": {
+            input: {
+                h: "1.5rem";
+                px: "2xs";
+                textStyle: "label/XS";
+            };
+            control: {
+                "--stepper-width": "1.25rem";
+                fontSize: "0.625rem";
+            };
+        };
+        xs: {
+            input: {
+                h: "1.75rem";
+                px: "xs";
+                textStyle: "label/XS";
+            };
+            control: {
+                "--stepper-width": "1.5rem";
+                fontSize: "0.75rem";
+            };
+        };
+        sm: {
+            input: {
+                h: "2rem";
+                px: "sm";
+                textStyle: "label/S/regular";
+            };
+            control: {
+                "--stepper-width": "1.75rem";
+                fontSize: "0.75rem";
+            };
+        };
+        md: {
+            input: {
+                h: "2.5rem";
+                px: "sm";
+                textStyle: "label/M/regular";
+            };
+            control: {
+                "--stepper-width": "2rem";
+                fontSize: "0.875rem";
+            };
+        };
+        lg: {
+            input: {
+                h: "3rem";
+                px: "md";
+                textStyle: "label/M/regular";
+            };
+            control: {
+                "--stepper-width": "2.25rem";
+                fontSize: "0.875rem";
+            };
+        };
+    };
+}>;

package/dist/theme/recipes/tabs.d.ts

@@ -1,45 +1,66 @@
 export declare const tabsSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "list" | "root" | "trigger" | "indicator" | "contentGroup", {
-    variant: {
-        subtle: {
+    size: {
+        xs: {
             trigger: {
-                color: "fg.muted";
-                bg: "transparent";
-                _hover: {
-                    bg: "bg.hover";
-                    color: "fg";
+                h: "1.25rem";
+                px: "xs";
+                gap: "2xs";
+                textStyle: "label/XS/medium";
+                _icon: {
+                    width: "0.75rem";
+                    height: "0.75rem";
                 };
-                _selected: {
-                    bg: "bg.muted";
-                    color: "fg";
+            };
+        };
+        sm: {
+            trigger: {
+                h: "1.5rem";
+                px: "xs";
+                gap: "2xs";
+                textStyle: "label/XS/medium";
+                _icon: {
+                    width: "0.875rem";
+                    height: "0.875rem";
                 };
             };
         };
-        outline: {
-            list: {
-                border: "0";
-                _horizontal: {
-                    _before: {
-                        borderBottomWidth: "0";
-                    };
+        md: {
+            trigger: {
+                h: "1.75rem";
+                px: "0.5rem";
+                gap: "xs";
+                textStyle: "label/S/medium";
+                _icon: {
+                    width: "0.875rem";
+                    height: "0.875rem";
                 };
             };
+        };
+    };
+    variant: {
+        subtle: {
             trigger: {
+                borderRadius: "var(--tabs-trigger-radius)";
                 color: "fg.muted";
                 bg: "transparent";
-                borderWidth: "1px";
-                borderColor: "transparent";
                 _selected: {
                     color: "fg";
-                    borderColor: "border.muted";
-                    borderBottomColor: "transparent";
+                    bg: "bg.muted";
+                    borderColor: "border";
+                };
+                _hover: {
+                    bg: "bg.hover";
+                    borderColor: "border";
+                    color: "fg";
                 };
-                _horizontal: {
-                    borderTopRadius: "0";
-                    marginBottom: "0";
-                    marginEnd: "0";
-                    _selected: {
-                        borderColor: "border.muted";
-                        borderBottomColor: "transparent";
+                _disabled: {
+                    bg: "transparent";
+                    color: "fg.subtle";
+                    borderColor: "border";
+                    _hover: {
+                        bg: "transparent";
+                        color: "fg.subtle";
+                        borderColor: "border";
                     };
                 };
             };

package/dist/theme/recipes/textarea.d.ts

@@ -1 +1,62 @@
-export declare const textareaRecipe: import('@chakra-ui/react').RecipeDefinition<import('@chakra-ui/react').RecipeVariantRecord>;
+export declare const textareaRecipe: import('@chakra-ui/react').RecipeDefinition<{
+    variant: {
+        outline: {
+            bg: "bg";
+            border: "1px solid";
+            borderColor: "border";
+            outline: "none";
+            boxShadow: "none";
+            "--focus-color": "var(--chakra-colors-border-accent-light)";
+            "--focus-ring-style": "none";
+            _hover: {
+                borderColor: "border.accent-light";
+            };
+            _active: {
+                borderColor: "border.accent-light";
+            };
+            _focus: {
+                borderColor: "border.accent-light";
+                outline: "none";
+                boxShadow: "none";
+            };
+            _focusVisible: {
+                borderColor: "border.accent-light";
+                outline: "none";
+                boxShadow: "none";
+            };
+            "&:is(:hover, [data-hover])": {
+                borderColor: "border.accent-light";
+            };
+            "&:is(:active, [data-active])": {
+                borderColor: "border.accent-light";
+            };
+        };
+    };
+    size: {
+        "2xs": {
+            paddingX: "2xs";
+            paddingY: "2xs";
+            textStyle: "label/XS";
+        };
+        xs: {
+            paddingX: "xs";
+            paddingY: "2xs";
+            textStyle: "label/XS";
+        };
+        sm: {
+            paddingX: "sm";
+            paddingY: "xs";
+            textStyle: "label/S/regular";
+        };
+        md: {
+            paddingX: "sm";
+            paddingY: "xs";
+            textStyle: "label/M/regular";
+        };
+        lg: {
+            paddingX: "md";
+            paddingY: "sm";
+            textStyle: "label/M/regular";
+        };
+    };
+}>;

package/dist/theme/recipes/timeline.d.ts

@@ -0,0 +1,74 @@
+export declare const timelineSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "root" | "separator" | "item" | "indicator" | "connector" | "description", {
+    variant: {
+        solid: {};
+        subtle: {};
+        outline: {
+            indicator: {
+                borderWidth: "1px";
+                borderColor: "border.subtle";
+            };
+        };
+        plain: {
+            indicator: {
+                bg: "transparent";
+                color: "fg";
+            };
+        };
+    };
+    showLastSeparator: {
+        true: {
+            item: {
+                _last: {
+                    "--timeline-separator-display": "initial";
+                };
+            };
+        };
+        false: {
+            item: {
+                _last: {
+                    "--timeline-separator-display": "none";
+                };
+            };
+        };
+    };
+    size: {
+        sm: {
+            root: {
+                "--timeline-indicator-size": "sizes.4";
+                "--timeline-font-size": "fontSizes.2xs";
+            };
+            title: {
+                textStyle: "xs";
+            };
+        };
+        md: {
+            root: {
+                "--timeline-indicator-size": "sizes.5";
+                "--timeline-font-size": "fontSizes.xs";
+            };
+            title: {
+                textStyle: "sm";
+            };
+        };
+        lg: {
+            root: {
+                "--timeline-indicator-size": "sizes.6";
+                "--timeline-font-size": "fontSizes.xs";
+            };
+            title: {
+                mt: "0.5";
+                textStyle: "sm";
+            };
+        };
+        xl: {
+            root: {
+                "--timeline-indicator-size": "sizes.8";
+                "--timeline-font-size": "fontSizes.sm";
+            };
+            title: {
+                mt: "1.5";
+                textStyle: "sm";
+            };
+        };
+    };
+}>;

package/dist/theme/tokens/borders.d.ts

@@ -2,9 +2,6 @@ export declare const borders: {
     DEFAULT: {
         value: string;
     };
-    muted: {
-        value: string;
-    };
     subtle: {
         value: string;
     };