@caspeco/casper-ui-library 8.4.1 → 9.0.0-alpha.0

package/dist/components/radio/radio.js

@@ -1,43 +1,54 @@
-import { jsx as e } from "react/jsx-runtime";
-import { Flex as b, Radio as _ } from "@chakra-ui/react";
-import f from "react";
+import { jsx as r, jsxs as C, Fragment as f } from "react/jsx-runtime";
+import { Flex as I, RadioGroup as o } from "@chakra-ui/react";
+import _ from "react";
+import { CheckIcon as v } from "./check-icon.js";
 import { hoverStyles as A } from "./hover-styles.js";
-import { ThemeColorVariable as r } from "../../theme/theme-types.js";
-const k = f.forwardRef(
-  ({ value: o, children: c, defaultChecked: t, onChange: d, isChecked: i, isInvalid: a, isDisabled: n, ...l }, m) => /* @__PURE__ */ e(b, { __css: A, ...l, children: /* @__PURE__ */ e(
-    _,
+import { useRadioGroupVariant as k } from "./radio-group-context.js";
+import { ThemeIconSizeVariable as x, ThemeColorVariable as e } from "../../theme/theme-types.js";
+const j = _.forwardRef((c, d) => {
+  const { value: i, children: t, defaultChecked: n, onChange: a, isInvalid: l, isDisabled: m, id: s, name: h, ...b } = c, p = k();
+  return /* @__PURE__ */ r(I, { css: A, children: /* @__PURE__ */ C(
+    o.Item,
     {
-      ref: m,
-      value: o,
-      defaultChecked: t,
-      isChecked: i,
-      onChange: d,
-      isInvalid: a,
-      isDisabled: n,
+      value: i,
+      defaultChecked: n,
+      onChange: a,
+      invalid: l,
+      disabled: m,
       w: "100%",
-      _invalid: {
-        borderColor: r.Error,
-        boxShadow: `0 0 0 4px ${r.ErrorContainer}`
-      },
-      _active: {
-        borderColor: `${r.AccentActive}`,
-        _checked: {
-          background: `${r.AccentActive}`,
-          borderColor: `${r.AccentActive}`
-        },
-        _disabled: {
-          borderColor: `${r.OnBackground}`,
-          _checked: {
-            background: `${r.Accent}`,
-            borderColor: `${r.Accent}`
+      ...b,
+      children: [
+        /* @__PURE__ */ r(o.ItemHiddenInput, { ref: d, id: s, name: h }),
+        p === "addon" ? /* @__PURE__ */ r(o.ItemControl, { className: "radio__item-indicator", children: /* @__PURE__ */ r(o.ItemContext, { children: (u) => /* @__PURE__ */ r(f, { children: u.checked && /* @__PURE__ */ r(v, { color: e.OnAccent, size: x.Medium }) }) }) }) : /* @__PURE__ */ r(
+          o.ItemIndicator,
+          {
+            className: "radio__item-indicator",
+            _invalid: {
+              borderColor: e.Error,
+              boxShadow: `0 0 0 4px ${e.ErrorContainer}`
+            },
+            _active: {
+              borderColor: `${e.AccentActive}`,
+              _checked: {
+                background: `${e.AccentActive}`,
+                borderColor: `${e.AccentActive}`
+              },
+              _disabled: {
+                borderColor: `${e.OnBackground}`,
+                _checked: {
+                  background: `${e.Accent}`,
+                  borderColor: `${e.Accent}`
+                }
+              }
+            }
           }
-        }
-      },
-      children: c
+        ),
+        t && /* @__PURE__ */ r(o.ItemText, { width: "100%", children: t })
+      ]
     },
-    o
-  ) })
-);
+    i
+  ) });
+});
 export {
-  k as Radio
+  j as Radio
 };

package/dist/components/radio-card/hover-styles.d.ts

@@ -0,0 +1,3 @@
+import { SystemStyleObject } from '@chakra-ui/react';
+export declare const hoverStylesCard: SystemStyleObject;
+//# sourceMappingURL=hover-styles.d.ts.map

package/dist/components/radio-card/hover-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hover-styles.d.ts","sourceRoot":"","sources":["../../../lib/components/radio-card/hover-styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAS1D,eAAO,MAAM,eAAe,EAAE,iBA+B7B,CAAC"}

package/dist/components/radio-card/hover-styles.js

@@ -0,0 +1,37 @@
+import "@chakra-ui/react";
+import { ThemeColorVariable as e } from "../../theme/theme-types.js";
+const o = '& label[data-state="checked"]:not(:active):not([data-disabled]):hover', r = '& label[data-state="unchecked"]:not(:active):not([data-disabled]):not([data-invalid]):hover', a = '& label[data-invalid][data-state="unchecked"]:hover', d = {
+  // Target only device that supports hover (excludes thouch screen devices):
+  "@media(hover: hover)": {
+    // General cursor styles
+    "& label:not([data-disabled]):hover": {
+      cursor: "pointer"
+    },
+    "& label[data-disabled]:hover": {
+      cursor: "not-allowed"
+    },
+    // Specifc state hover styles
+    [o]: {
+      "& .radio-card__item-control": {
+        bg: e.AccentHover,
+        borderColor: e.AccentHover,
+        color: e.OnAccent
+      }
+    },
+    [r]: {
+      "& .radio-card__item-control": {
+        color: e.OnSurface,
+        background: e.AccentHoverAlpha
+      }
+    },
+    [a]: {
+      "& .radio-card__item-control": {
+        color: e.ErrorHover,
+        borderColor: e.ErrorHover
+      }
+    }
+  }
+};
+export {
+  d as hoverStylesCard
+};

package/dist/components/radio-card/index.d.ts

@@ -0,0 +1,5 @@
+export { RadioCard } from './radio-card.js';
+export { RadioCardGroup } from './radio-card-group.js';
+export type { RadioCardProps } from './radio-card.js';
+export type { RadioCardGroupProps } from './radio-card-group.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/radio-card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/radio-card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,YAAY,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,YAAY,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/radio-card/radio-card-group.d.ts

@@ -0,0 +1,14 @@
+import { ThemeStyleProps } from '../../theme/index.js';
+import { RadioCard as ChakraRadioCard } from '@chakra-ui/react';
+type ChakraRadioCardProperties = Pick<ChakraRadioCard.RootProps, "children" | "name" | "defaultValue" | "value" | "onChange">;
+export type RadioCardGroupProps = ChakraRadioCardProperties & ThemeStyleProps & {
+    isDisabled?: boolean;
+};
+/**
+ * Used for multiple radio cards which are bound in one group, and it indicates which option is selected.
+ *
+ * @see Docs https://caspeco.github.io/casper-ui-library/components/radio-card
+ */
+export declare function RadioCardGroup({ children, name, isDisabled, defaultValue, value, onChange, display, flexDirection, gap, ...props }: RadioCardGroupProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=radio-card-group.d.ts.map

package/dist/components/radio-card/radio-card-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-card-group.d.ts","sourceRoot":"","sources":["../../../lib/components/radio-card/radio-card-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,eAAe,EAAE,MAAM,SAAS,CAAC;AACnE,OAAO,EAAE,SAAS,IAAI,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEhE,KAAK,yBAAyB,GAAG,IAAI,CACpC,eAAe,CAAC,SAAS,EACzB,UAAU,GAAG,MAAM,GAAG,cAAc,GAAG,OAAO,GAAG,UAAU,CAC3D,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,yBAAyB,GAC1D,eAAe,GAAG;IAEjB,UAAU,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEH;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAC9B,QAAQ,EACR,IAAI,EACJ,UAAU,EACV,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,OAAgB,EAChB,aAAwB,EACxB,GAA+B,EAC/B,GAAG,KAAK,EACR,EAAE,mBAAmB,2CAgBrB"}

package/dist/components/radio-card/radio-card-group.js

@@ -0,0 +1,34 @@
+import { jsx as u } from "react/jsx-runtime";
+import { RadioCard as l } from "@chakra-ui/react";
+import { ThemeSpaceVariable as n } from "../../theme/theme-types.js";
+function b({
+  children: o,
+  name: r,
+  isDisabled: e,
+  defaultValue: i,
+  value: m,
+  onChange: a,
+  display: d = "flex",
+  flexDirection: t = "column",
+  gap: p = n.Medium,
+  ...f
+}) {
+  return /* @__PURE__ */ u(
+    l.Root,
+    {
+      name: r,
+      disabled: e,
+      defaultValue: i,
+      value: m,
+      onChange: a,
+      display: d,
+      flexDirection: t,
+      gap: p,
+      ...f,
+      children: o
+    }
+  );
+}
+export {
+  b as RadioCardGroup
+};

package/dist/components/radio-card/radio-card.composition.d.ts

@@ -0,0 +1,5 @@
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+export declare const CardGroup: () => import("react/jsx-runtime").JSX.Element;
+export declare const DisabledCardGroup: () => import("react/jsx-runtime").JSX.Element;
+export declare const CardGridExample: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=radio-card.composition.d.ts.map

package/dist/components/radio-card/radio-card.composition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-card.composition.d.ts","sourceRoot":"","sources":["../../../lib/components/radio-card/radio-card.composition.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,OAAO,+CAanB,CAAC;AAEF,eAAO,MAAM,SAAS,+CAYrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,+CAY7B,CAAC;AAEF,eAAO,MAAM,eAAe,+CA8B3B,CAAC"}

package/dist/components/radio-card/radio-card.d.ts

@@ -0,0 +1,22 @@
+import { CustomChakraBoxProps, LayoutProps, MarginProps, PaddingProps } from '../../theme/index.js';
+import { RadioCard as ChakraRadioCard, BoxProps } from '@chakra-ui/react';
+import { default as React } from 'react';
+type CustomProperties = Pick<BoxProps, "children">;
+export type RadioCardProps = CustomProperties & Pick<ChakraRadioCard.ItemProps, "id" | "value"> & Pick<ChakraRadioCard.ItemControlProps, "onChange"> & CustomChakraBoxProps & LayoutProps & MarginProps & PaddingProps & {
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    name?: string;
+};
+/**
+ * Custom Radio input that appears as a colored button when in "isChecked"-state.
+ * Uses Chakra's RadioCard compound component to provide a styled card-based radio button.
+ *
+ * @see Docs https://caspeco.github.io/casper-ui-library/components/radio#custom-radios
+ */
+export declare const RadioCard: React.ForwardRefExoticComponent<CustomProperties & Pick<ChakraRadioCard.ItemProps, "value" | "id"> & Pick<ChakraRadioCard.ItemControlProps, "onChange"> & CustomChakraBoxProps & LayoutProps & MarginProps & PaddingProps & {
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    name?: string;
+} & React.RefAttributes<HTMLInputElement>>;
+export {};
+//# sourceMappingURL=radio-card.d.ts.map

package/dist/components/radio-card/radio-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-card.d.ts","sourceRoot":"","sources":["../../../lib/components/radio-card/radio-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAON,KAAK,oBAAoB,EACzB,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAO,SAAS,IAAI,eAAe,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACpF,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,KAAK,gBAAgB,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;AAEnD,MAAM,MAAM,cAAc,GAAG,gBAAgB,GAC5C,IAAI,CAAC,eAAe,CAAC,SAAS,EAAE,IAAI,GAAG,OAAO,CAAC,GAC/C,IAAI,CAAC,eAAe,CAAC,gBAAgB,EAAE,UAAU,CAAC,GAClD,oBAAoB,GACpB,WAAW,GACX,WAAW,GACX,YAAY,GAAG;IAEd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEH;;;;;GAKG;AACH,eAAO,MAAM,SAAS;iBAXP,OAAO;gBACR,OAAO;WACZ,MAAM;0CAsFb,CAAC"}

package/dist/components/radio-card/radio-card.js

@@ -0,0 +1,85 @@
+import { jsx as r, jsxs as S } from "react/jsx-runtime";
+import { Box as C, RadioCard as o } from "@chakra-ui/react";
+import A from "react";
+import { hoverStylesCard as _ } from "./hover-styles.js";
+import { ThemeColorVariable as e, ThemeBorderVariable as a, ThemeSpaceVariable as c, ThemeRadiusVariable as g, ThemeFontSizeVariable as k, ThemeFontVariable as v } from "../../theme/theme-types.js";
+const V = A.forwardRef((n, d) => {
+  const {
+    children: i,
+    id: t,
+    name: l,
+    value: m,
+    isDisabled: b,
+    isInvalid: s,
+    onChange: h,
+    alignItems: u = "center",
+    alignContent: p = "center",
+    ...f
+  } = n;
+  return /* @__PURE__ */ r(C, { css: _, children: /* @__PURE__ */ S(
+    o.Item,
+    {
+      value: m,
+      disabled: b,
+      invalid: s,
+      border: "none",
+      w: "100%",
+      ...f,
+      children: [
+        /* @__PURE__ */ r(o.ItemHiddenInput, { ref: d, id: t, name: l, onChange: h }),
+        /* @__PURE__ */ r(
+          o.ItemControl,
+          {
+            className: "radio-card__item-control",
+            whiteSpace: "nowrap",
+            fontFamily: v.Body,
+            fontSize: k.Medium,
+            bg: e.Surface,
+            borderRadius: g.Small,
+            px: c.Medium,
+            py: c.Small,
+            color: e.OnSurface,
+            border: a.XSmall,
+            borderColor: e.OnSurfaceBorder,
+            cursor: "pointer",
+            textAlign: "center",
+            w: "100%",
+            _checked: {
+              color: e.OnAccent,
+              bg: e.Accent,
+              borderColor: e.Accent
+            },
+            _disabled: {
+              opacity: 0.48,
+              _checked: {
+                bg: e.Accent,
+                color: e.OnAccent
+              }
+            },
+            _active: {
+              background: e.AccentActiveAlpha,
+              _checked: {
+                background: e.AccentActive
+              },
+              _disabled: {
+                background: e.Surface,
+                _checked: {
+                  background: e.Accent
+                }
+              }
+            },
+            _invalid: {
+              border: a.XSmall,
+              borderColor: e.Error,
+              boxShadow: `0 0 0 4px ${e.ErrorContainer}`
+            },
+            children: /* @__PURE__ */ r(o.ItemContent, { alignContent: p, alignItems: u, children: i })
+          }
+        )
+      ]
+    }
+  ) });
+});
+export {
+  V as RadioCard
+};

package/dist/components/segmented-control/segmented-control-item.d.ts

@@ -1,8 +1,8 @@
-import { ButtonProps, ResponsiveValue } from '@chakra-ui/react';
+import { ButtonSize } from '../button/index.js';
+import { ButtonProps, ConditionalValue } from '@chakra-ui/react';
 import { default as React } from 'react';
-import { ButtonSize } from '../button/types.js';
 import { SegmentedControlItem } from './types.js';
-type CustomButtonProps = Pick<ButtonProps, "isDisabled" | "isActive" | "key" | "aria-label">;
+type CustomButtonProps = Pick<ButtonProps, "key" | "aria-label">;
 type SegmentedControlButtonProps = CustomButtonProps & {
     /**
      * Segmented Control item to display as Button.
@@ -15,13 +15,15 @@ type SegmentedControlButtonProps = CustomButtonProps & {
     /**
      * Size for component. Defaults to 'md' (medium).
      */
-    size: ResponsiveValue<ButtonSize> | undefined;
+    size: ConditionalValue<ButtonSize> | undefined;
     children: React.ReactNode;
+    isDisabled?: boolean;
+    isActive?: boolean;
 };
 /**
  * Internal component used within SegmentedControl to display each SegmentedControl-item.
  * Renders a Button with the theme variant 'segmentedControl', a variant used only by this component.
  */
-export declare function SegmentedControlButton({ item, onClick, ...props }: SegmentedControlButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function SegmentedControlButton({ item, onClick, children, isActive, ...props }: SegmentedControlButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=segmented-control-item.d.ts.map

package/dist/components/segmented-control/segmented-control-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control-item.d.ts","sourceRoot":"","sources":["../../../lib/components/segmented-control/segmented-control-item.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACrE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAEpD,KAAK,iBAAiB,GAAG,IAAI,CAAC,WAAW,EAAE,YAAY,GAAG,UAAU,GAAG,KAAK,GAAG,YAAY,CAAC,CAAC;AAE7F,KAAK,2BAA2B,GAAG,iBAAiB,GAAG;IACtD;;OAEG;IACH,IAAI,EAAE,oBAAoB,CAAC;IAC3B;;OAEG;IACH,OAAO,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC9C;;OAEG;IACH,IAAI,EAAE,eAAe,CAAC,UAAU,CAAC,GAAG,SAAS,CAAC;IAC9C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,CAAC;AAEF;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,2BAA2B,2CAW9F"}
+{"version":3,"file":"segmented-control-item.d.ts","sourceRoot":"","sources":["../../../lib/components/segmented-control/segmented-control-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACtE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAEpD,KAAK,iBAAiB,GAAG,IAAI,CAAC,WAAW,EAAE,KAAK,GAAG,YAAY,CAAC,CAAC;AAEjE,KAAK,2BAA2B,GAAG,iBAAiB,GAAG;IACtD;;OAEG;IACH,IAAI,EAAE,oBAAoB,CAAC;IAC3B;;OAEG;IACH,OAAO,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC9C;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC,UAAU,CAAC,GAAG,SAAS,CAAC;IAC/C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAG1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,EACtC,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,2BAA2B,2CAkB7B"}

package/dist/components/segmented-control/segmented-control-item.js

@@ -1,12 +1,29 @@
 import { jsx as c } from "react/jsx-runtime";
 import "react";
-import { Button as l } from "../button/button.js";
-function s({ item: t, onClick: o, ...n }) {
-  const r = () => {
+import { Button as d } from "../button/button.js";
+function p({
+  item: t,
+  onClick: o,
+  children: n,
+  isActive: r,
+  ...e
+}) {
+  const i = () => {
     o(t);
-  }, { id: e } = t, { children: i } = n;
-  return /* @__PURE__ */ c(l, { id: e, variant: "segmentedControl", type: "button", onClick: r, ...n, children: i });
+  }, { id: a } = t;
+  return /* @__PURE__ */ c(
+    d,
+    {
+      id: a,
+      variant: "segmentedControl",
+      type: "button",
+      onClick: i,
+      "data-active": r ? !0 : void 0,
+      ...e,
+      children: n
+    }
+  );
 }
 export {
-  s as SegmentedControlButton
+  p as SegmentedControlButton
 };

package/dist/components/segmented-control/segmented-control.composition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.composition.d.ts","sourceRoot":"","sources":["../../../lib/components/segmented-control/segmented-control.composition.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,UAAU,+CAetB,CAAC;AAEF,eAAO,MAAM,SAAS,+CAiBrB,CAAC;AAEF,eAAO,MAAM,YAAY,+CAgBxB,CAAC;AAEF,eAAO,MAAM,aAAa,+CAiBzB,CAAC;AAcF,eAAO,MAAM,YAAY,+CAgCxB,CAAC"}
+{"version":3,"file":"segmented-control.composition.d.ts","sourceRoot":"","sources":["../../../lib/components/segmented-control/segmented-control.composition.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,UAAU,+CAetB,CAAC;AAEF,eAAO,MAAM,SAAS,+CAiBrB,CAAC;AAEF,eAAO,MAAM,YAAY,+CAgBxB,CAAC;AAEF,eAAO,MAAM,aAAa,+CAiBzB,CAAC;AAgBF,eAAO,MAAM,YAAY,+CAgCxB,CAAC"}

package/dist/components/segmented-control/segmented-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.d.ts","sourceRoot":"","sources":["../../../lib/components/segmented-control/segmented-control.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAwB,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAE3E;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,EAChC,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,IAAW,EACX,GAAG,KAAK,EACR,EAAE,qBAAqB,2CAmCvB"}
+{"version":3,"file":"segmented-control.d.ts","sourceRoot":"","sources":["../../../lib/components/segmented-control/segmented-control.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAwB,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAE3E;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,EAChC,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,IAAW,EACX,GAAG,KAAK,EACR,EAAE,qBAAqB,2CAgCvB"}

package/dist/components/segmented-control/segmented-control.js

@@ -1,7 +1,7 @@
 import { jsx as e } from "react/jsx-runtime";
-import { Box as m, ButtonGroup as s } from "@chakra-ui/react";
-import { SegmentedControlButton as b } from "./segmented-control-item.js";
-import { ThemeRadiusVariable as p, ThemeColorVariable as u, ThemeSpaceVariable as l } from "../../theme/theme-types.js";
+import { Box as c, ButtonGroup as b } from "@chakra-ui/react";
+import { SegmentedControlButton as p } from "./segmented-control-item.js";
+import { ThemeRadiusVariable as s, ThemeColorVariable as u, ThemeSpaceVariable as l } from "../../theme/theme-types.js";
 function g({
   items: o,
   activeItemId: i,
@@ -10,38 +10,29 @@ function g({
   size: d = "md",
   ...t
 }) {
-  const c = (r) => {
+  const m = (r) => {
     a && a(r);
   };
   return /* @__PURE__ */ e(
-    m,
+    c,
     {
       p: l.XSmall,
       bg: u.AccentContainer,
-      borderRadius: p.Small,
+      borderRadius: s.Small,
       ...t,
-      children: /* @__PURE__ */ e(
-        s,
+      children: /* @__PURE__ */ e(b, { w: "100%", gap: l.XSmall, _disabled: { opacity: 1, cursor: "not-allowed" }, children: o.map((r) => /* @__PURE__ */ e(
+        p,
         {
-          w: "100%",
-          isDisabled: n,
-          spacing: l.XSmall,
-          _disabled: { opacity: 1, cursor: "not-allowed" },
-          children: o.map((r) => /* @__PURE__ */ e(
-            b,
-            {
-              item: r,
-              onClick: c,
-              isDisabled: r?.isDisabled,
-              isActive: i === r.id,
-              size: d,
-              "aria-label": r?.ariaLabel,
-              children: r.label
-            },
-            r.id
-          ))
-        }
-      )
+          item: r,
+          onClick: m,
+          isDisabled: n || r?.isDisabled,
+          isActive: i === r.id,
+          size: d,
+          "aria-label": r?.ariaLabel,
+          children: r.label
+        },
+        r.id
+      )) })
     }
   );
 }

package/dist/components/segmented-control/types.d.ts

@@ -1,6 +1,6 @@
+import { ButtonSize } from '../button/index.js';
 import { MarginProps, PaddingProps } from '../../theme/index.js';
-import { ResponsiveValue } from '@chakra-ui/react';
-import { ButtonSize } from '../button/types.js';
+import { ConditionalValue } from '@chakra-ui/react';
 export type SegmentedControlItem = {
     /**
      * Required identifier for item.
@@ -39,7 +39,7 @@ type CustomSegmentedControlProps = {
     /**
      * Size for component. Defaults to 'md' (medium).
      */
-    size?: ResponsiveValue<ButtonSize> | undefined;
+    size?: ConditionalValue<ButtonSize> | undefined;
 };
 export type SegmentedControlProps = CustomSegmentedControlProps & MarginProps & PaddingProps;
 export {};

package/dist/components/segmented-control/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../lib/components/segmented-control/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,oBAAoB,GAAG;IAClC;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC5B;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,KAAK,2BAA2B,GAAG;IAClC;;OAEG;IACH,KAAK,EAAE,oBAAoB,EAAE,CAAC;IAC9B;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAChD;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,GAAG,SAAS,CAAC;CAC/C,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,2BAA2B,GAAG,WAAW,GAAG,YAAY,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../lib/components/segmented-control/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEzD,MAAM,MAAM,oBAAoB,GAAG;IAClC;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC5B;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,KAAK,2BAA2B,GAAG;IAClC;;OAEG;IACH,KAAK,EAAE,oBAAoB,EAAE,CAAC;IAC9B;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAChD;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,GAAG,SAAS,CAAC;CAChD,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,2BAA2B,GAAG,WAAW,GAAG,YAAY,CAAC"}

package/dist/components/select/select-recipe.d.ts

@@ -0,0 +1,3 @@
+import { SlotRecipeDefinition } from '@chakra-ui/react';
+export declare const selectRecipe: SlotRecipeDefinition;
+//# sourceMappingURL=select-recipe.d.ts.map

package/dist/components/select/select-recipe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-recipe.d.ts","sourceRoot":"","sources":["../../../lib/components/select/select-recipe.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,oBAAoB,EAAoB,MAAM,kBAAkB,CAAC;AAG/E,eAAO,MAAM,YAAY,EAAE,oBAyGzB,CAAC"}

package/dist/components/select/select-recipe.js

@@ -0,0 +1,108 @@
+import { inputRecipe as l } from "../input/input-recipe.js";
+import { ThemeSpaceToken as e, ThemeFontSizeToken as t, ThemeColorToken as i } from "../../theme/theme-tokens.js";
+import { defineSlotRecipe as a } from "@chakra-ui/react";
+import { nativeSelectAnatomy as n } from "../../node_modules/@chakra-ui/react/dist/esm/anatomy.js";
+import { ThemeIconSizeVariable as o } from "../../theme/theme-types.js";
+const S = a({
+  className: "select",
+  slots: n.keys(),
+  base: {},
+  variants: {
+    variant: {
+      outline: {
+        field: {
+          // Apply input theme, as Select and Input share most of their appearances
+          ...l.variants?.variant?.outline,
+          cursor: "default",
+          // Give nested option elements color styles to match the select element.
+          // Only applicable to Microsoft desktop browsers, will be ignored by browsers that use their own native styles.
+          "& > option, & > optgroup": {
+            color: i.OnSurface,
+            background: i.Surface
+          }
+        },
+        indicator: {
+          color: i.OnSurface,
+          _disabled: {
+            opacity: 1,
+            color: i.OnSurfaceSubdued
+          }
+        }
+      },
+      ghost: {
+        field: {
+          // Apply input theme, as Select and Input share most of their appearances
+          ...l.variants?.variant?.ghost,
+          cursor: "default",
+          // Give nested option elements color styles to match the select element.
+          // Only applicable to Microsoft desktop browsers, will be ignored by browsers that use their own native styles.
+          "& > option, & > optgroup": {
+            color: i.OnSurface,
+            background: i.Surface
+          }
+        },
+        indicator: {
+          display: "none"
+        }
+      }
+    },
+    // Should match input variant sizes
+    size: {
+      lg: {
+        root: {
+          "--select-field-height": "3rem",
+          fontSize: t.Medium
+        },
+        field: {
+          px: e.Small
+        },
+        indicator: {
+          insetInlineEnd: e.Small,
+          _icon: {
+            width: o.Small,
+            height: o.Small
+          }
+        }
+      },
+      md: {
+        root: {
+          "--select-field-height": "2.5rem",
+          fontSize: t.Medium
+        },
+        field: {
+          px: e.Small
+        },
+        indicator: {
+          insetInlineEnd: e.Small,
+          _icon: {
+            width: o.Small,
+            height: o.Small
+          }
+        }
+      },
+      sm: {
+        root: {
+          "--select-field-height": "2rem",
+          fontSize: t.Small
+        },
+        field: {
+          px: e.Small
+        },
+        indicator: {
+          insetInlineEnd: e.Small,
+          _icon: {
+            width: o.Small,
+            height: o.Small
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "outline",
+    size: "md"
+  }
+});
+export {
+  S as selectRecipe
+};

package/dist/components/select/select.d.ts

@@ -1,13 +1,13 @@
-import { CustomChakraBoxProps, MarginProps, PaddingProps } from '../../theme/index.js';
-import { SelectProps as ChakraSelectProps, LayoutProps, ResponsiveValue } from '@chakra-ui/react';
-import { default as React } from 'react';
+import { CustomChakraBoxProps, LayoutProps, MarginProps, PaddingProps } from '../../theme/index.js';
+import { NativeSelect as ChakraSelect, ConditionalValue } from '@chakra-ui/react';
 type CustomProps = {
     /** Size of select. Defaults to medium / 'md'. */
-    size?: ResponsiveValue<(string & {}) | "sm" | "md" | "lg"> | undefined;
+    size?: ConditionalValue<"sm" | "md" | "lg"> | undefined;
     variant?: "ghost" | "outline";
+    isDisabled?: boolean;
 };
-type ChakraSelectProperties = Pick<ChakraSelectProps, "onChange" | "onBlur" | "isDisabled" | "isReadOnly" | "isRequired" | "value" | "defaultValue" | "placeholder" | "children" | "name" | "autoComplete" | "autoFocus">;
+type ChakraSelectProperties = Pick<ChakraSelect.FieldProps, "onChange" | "onBlur" | "value" | "defaultValue" | "placeholder" | "children" | "name" | "autoComplete" | "autoFocus">;
 export type SelectProps = ChakraSelectProperties & CustomProps & CustomChakraBoxProps & LayoutProps & MarginProps & PaddingProps;
-export declare const Select: React.ForwardRefExoticComponent<ChakraSelectProperties & CustomProps & CustomChakraBoxProps & LayoutProps & MarginProps & PaddingProps & React.RefAttributes<HTMLSelectElement>>;
+export declare const Select: import('react').ForwardRefExoticComponent<ChakraSelectProperties & CustomProps & CustomChakraBoxProps & LayoutProps & MarginProps & PaddingProps & import('react').RefAttributes<HTMLSelectElement>>;
 export {};
 //# sourceMappingURL=select.d.ts.map