@bitrise/bitkit-v2 0.3.119 → 0.3.121

package/dist/theme/semantic-tokens/semanticColors.js

@@ -1433,6 +1433,48 @@ const r = l.colors(
         }
       }
     },
+    interactive: {
+      base: {
+        value: {
+          _light: "{colors.sys.purple}"
+        }
+      },
+      bold: {
+        value: {
+          _light: "{colors.sys.purple.bold}"
+        }
+      },
+      highlight: {
+        value: {
+          _light: "{colors.sys.interactive.highlight}"
+        }
+      },
+      muted: {
+        value: {
+          _light: "{colors.sys.purple.muted}"
+        }
+      },
+      moderate: {
+        value: {
+          _light: "{colors.sys.purple.moderate}"
+        }
+      },
+      subtle: {
+        value: {
+          _light: "{colors.sys.purple.subtle}"
+        }
+      },
+      minimal: {
+        value: {
+          _light: "{colors.sys.purple.minimal}"
+        }
+      },
+      disabled: {
+        value: {
+          _light: "{colors.sys.neutral.subtle}"
+        }
+      }
+    },
     status: {
       info: {
         bg: {

package/dist/theme/slot-recipes/DatePicker.recipe.d.ts

@@ -0,0 +1,40 @@
+declare const datePickerSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "input" | "label" | "table" | "view" | "trigger" | "positioner" | "root" | "clearTrigger" | "control" | "monthSelect" | "nextTrigger" | "presetTrigger" | "prevTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewControl" | "viewTrigger" | "yearSelect" | "valueText" | "months", {
+    layout: {
+        '1-month': {
+            content: {
+                width: "17.5rem";
+            };
+        };
+        '2-month': {
+            content: {
+                width: "38.5rem";
+            };
+        };
+    };
+    showOutsideDays: {
+        false: {
+            tableCellTrigger: {
+                '&[data-outside-range]': {
+                    visibility: "hidden";
+                };
+            };
+        };
+        true: {
+            tableCellTrigger: {
+                '&[data-outside-range]': {
+                    visibility: "visible";
+                };
+            };
+        };
+    };
+    variant: {
+        mobile: {
+            content: {
+                boxShadow: "none";
+                paddingBlock: "16";
+                paddingInline: "16";
+            };
+        };
+    };
+}>;
+export default datePickerSlotRecipe;

package/dist/theme/slot-recipes/DatePicker.recipe.js

@@ -0,0 +1,245 @@
+import { datePickerAnatomy as a } from "@ark-ui/react/date-picker";
+import { defineSlotRecipe as r } from "@chakra-ui/react/styled-system";
+import { rem as e } from "../themeUtils.js";
+const i = r({
+  className: "datePicker",
+  slots: [...a.keys(), "months"],
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "8"
+    },
+    control: {
+      position: "relative",
+      display: "flex",
+      alignItems: "center"
+    },
+    months: {
+      display: "flex",
+      gap: "24"
+    },
+    positioner: {
+      position: "absolute",
+      zIndex: "dropdown"
+    },
+    content: {
+      backgroundColor: "background/primary",
+      borderRadius: "8",
+      boxShadow: "large",
+      minWidth: e(312),
+      paddingBlock: "24",
+      paddingInline: "16"
+    },
+    view: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "16"
+    },
+    viewControl: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between"
+    },
+    table: {
+      width: "full",
+      borderCollapse: "collapse",
+      borderSpacing: 0,
+      tableLayout: "fixed"
+    },
+    tableBody: {
+      "& > tr:first-child > td": {
+        paddingTop: "8"
+      }
+    },
+    tableRow: {
+      display: "table-row"
+    },
+    tableHeader: {
+      color: "text/tertiary",
+      textAlign: "center",
+      textStyle: "body/md/regular",
+      width: "40",
+      minWidth: "40",
+      maxWidth: "40"
+    },
+    tableCell: {
+      textAlign: "center",
+      paddingBlock: "2"
+    },
+    tableCellTrigger: {
+      display: "flex",
+      alignItems: "stretch",
+      justifyContent: "center",
+      width: "100%",
+      height: e(32),
+      color: "text/primary",
+      cursor: "pointer",
+      textStyle: "body/md/regular",
+      "&:hover:not([data-selected])": {
+        backgroundColor: "interactive/moderate",
+        borderRadius: "0.5rem"
+      },
+      "&[data-unavailable]": {
+        borderRadius: 0,
+        backgroundColor: "interactive/disabled",
+        color: "text/disabled",
+        "&:hover, &[data-outside-range]:hover": {
+          borderRadius: 0,
+          backgroundColor: "interactive/disabled",
+          color: "text/disabled"
+        }
+      },
+      "&[data-outside-range]": {
+        color: "text/tertiary",
+        cursor: "not-allowed"
+      },
+      "&[data-outside-range][data-unavailable]": {
+        color: "text/disabled"
+      },
+      "&[data-outside-range][data-in-range], &[data-outside-range][data-in-range]:hover": {
+        backgroundColor: "interactive/moderate",
+        color: "interactive/bold",
+        cursor: "not-allowed"
+      },
+      "&[data-outside-range][data-range-end]": {
+        backgroundColor: "interactive/highlight",
+        borderRadius: "0 0.5rem 0.5rem 0",
+        color: "interactive/subtle"
+      },
+      "&[data-outside-range][data-hover-range-start]:hover": {
+        borderRadius: "0.5rem 0 0 0.5rem",
+        color: "interactive/subtle",
+        backgroundColor: "interactive/highlight"
+      },
+      "&[data-outside-range][data-hover-range-end]:hover": {
+        borderRadius: "0 0.5rem 0.5rem 0",
+        color: "interactive/subtle",
+        backgroundColor: "interactive/highlight"
+      },
+      "&[data-outside-range][data-range-start],&[data-outside-range][data-range-end]": {
+        backgroundColor: "interactive/highlight",
+        color: "interactive/subtle"
+      },
+      "&[data-outside-range][data-in-range][data-range-start]:hover": {
+        backgroundColor: "interactive/highlight",
+        borderRadius: "0.5rem 0 0 0.5rem",
+        color: "interactive/minimal"
+      },
+      "&[data-outside-range][data-in-range][data-range-end]:hover": {
+        backgroundColor: "interactive/highlight",
+        borderRadius: "0 0.5rem 0.5rem 0",
+        color: "interactive/minimal"
+      },
+      "&[data-outside-range]:hover": {
+        backgroundColor: "transparent",
+        color: "text/tertiary"
+      },
+      "&[data-in-range]": {
+        backgroundColor: "interactive/moderate",
+        color: "text/primary"
+      },
+      "&[data-in-range]:hover": {
+        backgroundColor: "interactive/muted",
+        borderRadius: 0
+      },
+      "&[data-selected]": {
+        backgroundColor: "interactive/base",
+        color: "text/on-color",
+        borderRadius: "0.5rem"
+      },
+      "&[data-selected]:hover": {
+        backgroundColor: "interactive/base",
+        borderRadius: "0.5rem",
+        color: "interactive/moderate"
+      },
+      "&[data-range-start], &[data-hover-range-start], &[data-hover-range-start]:hover": {
+        backgroundColor: "interactive/base",
+        borderRadius: "0.5rem 0 0 0.5rem",
+        color: "text/on-color"
+      },
+      "&[data-range-end], &[data-hover-range-end], &[data-hover-range-end]:hover": {
+        backgroundColor: "interactive/base",
+        borderRadius: "0 0.5rem 0.5rem 0",
+        color: "text/on-color"
+      },
+      "&[data-range-start]:hover": {
+        backgroundColor: "interactive/base",
+        borderRadius: "0.5rem 0 0 0.5rem",
+        color: "interactive/moderate"
+      },
+      "&[data-range-end]:hover": {
+        backgroundColor: "interactive/base",
+        borderRadius: "0 0.5rem 0.5rem 0",
+        color: "interactive/moderate"
+      },
+      "&[data-range-start][data-range-end]:hover": {
+        backgroundColor: "interactive/base",
+        color: "interactive/moderate"
+      },
+      "&[data-hover-range-start][data-hover-range-end]": {
+        borderRadius: "0.5rem"
+      },
+      "&[data-today] > span": {
+        border: "1px solid",
+        borderColor: "interactive/base"
+      },
+      "&[data-today][data-selected] > span": {
+        border: "1px solid",
+        borderColor: "interactive/moderate"
+      },
+      "&[data-today][data-range-end] > span, &[data-today][data-range-start] > span": {
+        borderColor: "interactive/moderate"
+      },
+      "& > span": {
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: "8",
+        display: "flex",
+        flex: 1
+      }
+    }
+  },
+  variants: {
+    layout: {
+      "1-month": {
+        content: {
+          width: "17.5rem"
+        }
+      },
+      "2-month": {
+        content: {
+          width: "38.5rem"
+        }
+      }
+    },
+    showOutsideDays: {
+      false: {
+        tableCellTrigger: {
+          "&[data-outside-range]": {
+            visibility: "hidden"
+          }
+        }
+      },
+      true: {
+        tableCellTrigger: {
+          "&[data-outside-range]": {
+            visibility: "visible"
+          }
+        }
+      }
+    },
+    variant: {
+      mobile: {
+        content: {
+          boxShadow: "none",
+          paddingBlock: "16",
+          paddingInline: "16"
+        }
+      }
+    }
+  }
+});
+export {
+  i as default
+};

package/dist/theme/slot-recipes/DatePickerSelect.recipe.d.ts

@@ -0,0 +1,39 @@
+declare const datePickerSelectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "trigger" | "positioner" | "root" | "indicator" | "list" | "clearTrigger" | "control" | "valueText" | "item" | "itemText" | "itemIndicator" | "itemGroup" | "itemGroupLabel" | "indicatorGroup", {
+    size: {
+        md: {
+            trigger: {
+                paddingBlock: "6";
+                textStyle?: "body/md/regular" | undefined;
+                py?: string | number | undefined;
+            };
+            indicator: {
+                _icon: {
+                    width: "16";
+                    height: "16";
+                };
+            };
+            item?: {
+                py: string | number;
+                px: string | number;
+                textStyle: "body/md/regular";
+                _selected: {
+                    textStyle: "body/md/semibold";
+                };
+            } | undefined;
+            itemIndicator?: {
+                width: string | number;
+                height: string | number;
+            } | undefined;
+            itemGroupLabel?: {
+                py: string | number;
+                px: string | number;
+            } | undefined;
+            searchInput?: {
+                paddingBlock: string | number;
+                textStyle: "body/md/regular";
+                '--input-height': string | number;
+            } | undefined;
+        };
+    };
+}>;
+export default datePickerSelectSlotRecipe;

package/dist/theme/slot-recipes/DatePickerSelect.recipe.js

@@ -0,0 +1,57 @@
+import { selectAnatomy as e } from "@chakra-ui/react/anatomy";
+import { defineSlotRecipe as t } from "@chakra-ui/react/styled-system";
+import { selectSlotRecipe as i } from "./Select.recipe.js";
+const d = t({
+  className: "datePickerSelect",
+  slots: e.keys(),
+  base: {
+    trigger: {
+      ...i.base?.trigger,
+      borderWidth: "0",
+      height: "32",
+      paddingInlineStart: "12",
+      paddingInlineEnd: "8",
+      "&:hover:not(:active)": {
+        bg: "background/hover"
+      },
+      "&:active": {
+        bg: "background/active"
+      }
+    },
+    indicator: {
+      ...i.base?.indicator,
+      color: "icon/tertiary",
+      _icon: {
+        width: "16",
+        height: "16"
+      }
+    },
+    indicatorGroup: {
+      ...i.base?.indicatorGroup,
+      paddingInline: "8"
+    }
+  },
+  variants: {
+    size: {
+      md: {
+        ...i.variants?.size?.md,
+        trigger: {
+          ...i.variants?.size?.md.trigger,
+          paddingBlock: "6"
+        },
+        indicator: {
+          _icon: {
+            width: "16",
+            height: "16"
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+export {
+  d as default
+};

package/dist/theme/slot-recipes/RadioGroup.recipe.d.ts

@@ -1,4 +1,4 @@
-declare const radioGroupSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "indicator" | "item" | "itemText" | "itemControl" | "itemAddon" | "itemIndicator", {
+declare const radioGroupSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "indicator" | "item" | "itemText" | "itemIndicator" | "itemControl" | "itemAddon", {
     orientation: {
         horizontal: {
             root: {

package/dist/theme/slot-recipes/Select.recipe.d.ts

@@ -1,4 +1,4 @@
-export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "trigger" | "positioner" | "root" | "indicator" | "list" | "control" | "valueText" | "item" | "itemText" | "itemIndicator" | "clearTrigger" | "itemGroup" | "itemGroupLabel" | "indicatorGroup" | "searchInputGroup" | "searchInput", {
+export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "trigger" | "positioner" | "root" | "indicator" | "list" | "clearTrigger" | "control" | "valueText" | "item" | "itemText" | "itemIndicator" | "itemGroup" | "itemGroupLabel" | "indicatorGroup" | "searchInputGroup" | "searchInput", {
     size: {
         md: {
             item: {

package/dist/theme/slot-recipes/index.d.ts

@@ -217,6 +217,83 @@ declare const slotRecipes: {
             };
         };
     }>;
+    datePicker: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "input" | "label" | "table" | "view" | "trigger" | "positioner" | "root" | "clearTrigger" | "control" | "monthSelect" | "nextTrigger" | "presetTrigger" | "prevTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewControl" | "viewTrigger" | "yearSelect" | "valueText" | "months", {
+        layout: {
+            '1-month': {
+                content: {
+                    width: "17.5rem";
+                };
+            };
+            '2-month': {
+                content: {
+                    width: "38.5rem";
+                };
+            };
+        };
+        showOutsideDays: {
+            false: {
+                tableCellTrigger: {
+                    '&[data-outside-range]': {
+                        visibility: "hidden";
+                    };
+                };
+            };
+            true: {
+                tableCellTrigger: {
+                    '&[data-outside-range]': {
+                        visibility: "visible";
+                    };
+                };
+            };
+        };
+        variant: {
+            mobile: {
+                content: {
+                    boxShadow: "none";
+                    paddingBlock: "16";
+                    paddingInline: "16";
+                };
+            };
+        };
+    }>;
+    datePickerSelect: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "trigger" | "positioner" | "root" | "indicator" | "list" | "clearTrigger" | "control" | "valueText" | "item" | "itemText" | "itemIndicator" | "itemGroup" | "itemGroupLabel" | "indicatorGroup", {
+        size: {
+            md: {
+                trigger: {
+                    paddingBlock: "6";
+                    textStyle?: "body/md/regular" | undefined;
+                    py?: string | number | undefined;
+                };
+                indicator: {
+                    _icon: {
+                        width: "16";
+                        height: "16";
+                    };
+                };
+                item?: {
+                    py: string | number;
+                    px: string | number;
+                    textStyle: "body/md/regular";
+                    _selected: {
+                        textStyle: "body/md/semibold";
+                    };
+                } | undefined;
+                itemIndicator?: {
+                    width: string | number;
+                    height: string | number;
+                } | undefined;
+                itemGroupLabel?: {
+                    py: string | number;
+                    px: string | number;
+                } | undefined;
+                searchInput?: {
+                    paddingBlock: string | number;
+                    textStyle: "body/md/regular";
+                    '--input-height': string | number;
+                } | undefined;
+            };
+        };
+    }>;
     checkbox: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "indicator" | "group" | "control", {
         size: {
             md: {
@@ -384,7 +461,7 @@ declare const slotRecipes: {
             };
         };
     }>;
-    radioGroup: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "indicator" | "item" | "itemText" | "itemControl" | "itemAddon" | "itemIndicator", {
+    radioGroup: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "indicator" | "item" | "itemText" | "itemIndicator" | "itemControl" | "itemAddon", {
         orientation: {
             horizontal: {
                 root: {
@@ -421,7 +498,7 @@ declare const slotRecipes: {
             };
         };
     }>;
-    select: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "trigger" | "positioner" | "root" | "indicator" | "list" | "control" | "valueText" | "item" | "itemText" | "itemIndicator" | "clearTrigger" | "itemGroup" | "itemGroupLabel" | "indicatorGroup" | "searchInputGroup" | "searchInput", {
+    select: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "trigger" | "positioner" | "root" | "indicator" | "list" | "clearTrigger" | "control" | "valueText" | "item" | "itemText" | "itemIndicator" | "itemGroup" | "itemGroupLabel" | "indicatorGroup" | "searchInputGroup" | "searchInput", {
         size: {
             md: {
                 item: {

package/dist/theme/slot-recipes/index.js

@@ -1,39 +1,43 @@
-import t from "./ActionBar.recipe.js";
-import e from "./Alert.recipe.js";
+import e from "./ActionBar.recipe.js";
+import t from "./Alert.recipe.js";
 import o from "./Avatar.recipe.js";
 import r from "./Card.recipe.js";
 import i from "./Checkbox.recipe.js";
-import p from "./EmptyState.recipe.js";
-import m from "./ExpandableCard.recipe.js";
-import c from "./Field.recipe.js";
-import l from "./Fieldset.recipe.js";
-import a from "./NativeSelect.recipe.js";
-import { numberInputSlotRecipe as f } from "./NumberInput.recipe.js";
-import S from "./RadioGroup.recipe.js";
-import { selectSlotRecipe as R } from "./Select.recipe.js";
-import d from "./Switch.recipe.js";
-import s from "./Tabs.recipe.js";
-import n from "./Tag.recipe.js";
-import b from "./Tooltip.recipe.js";
-const E = {
-  actionBar: t,
+import p from "./DatePicker.recipe.js";
+import m from "./DatePickerSelect.recipe.js";
+import c from "./EmptyState.recipe.js";
+import l from "./ExpandableCard.recipe.js";
+import a from "./Field.recipe.js";
+import S from "./Fieldset.recipe.js";
+import f from "./NativeSelect.recipe.js";
+import { numberInputSlotRecipe as R } from "./NumberInput.recipe.js";
+import d from "./RadioGroup.recipe.js";
+import { selectSlotRecipe as s } from "./Select.recipe.js";
+import n from "./Switch.recipe.js";
+import b from "./Tabs.recipe.js";
+import u from "./Tag.recipe.js";
+import k from "./Tooltip.recipe.js";
+const J = {
+  actionBar: e,
   avatar: o,
   card: r,
+  datePicker: p,
+  datePickerSelect: m,
   checkbox: i,
-  emptyState: p,
-  expandableCard: m,
-  field: c,
-  fieldset: l,
-  nativeSelect: a,
-  alert: e,
-  numberInput: f,
-  radioGroup: S,
-  select: R,
-  switch: d,
-  tabs: s,
-  tag: n,
-  tooltip: b
+  emptyState: c,
+  expandableCard: l,
+  field: a,
+  fieldset: S,
+  nativeSelect: f,
+  alert: t,
+  numberInput: R,
+  radioGroup: d,
+  select: s,
+  switch: n,
+  tabs: b,
+  tag: u,
+  tooltip: k
 };
 export {
-  E as default
+  J as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit-v2",
   "private": false,
-  "version": "0.3.119",
+  "version": "0.3.121",
   "description": "Bitrise Design System Components built with Chakra UI V3",
   "keywords": [
     "react",