@vkzstudio/muza-ui 1.0.0 → 1.0.2

package/dist/components/Popover/Popover.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Popover } from './Popover';
+declare const meta: Meta<typeof Popover>;
+export default meta;
+type Story = StoryObj<typeof Popover>;
+export declare const Default: Story;
+export declare const DifferentPositions: Story;
+export declare const DifferentAlignments: Story;
+export declare const WithRichContent: Story;
+export declare const ControlledPopover: Story;
+//# sourceMappingURL=Popover.stories.d.ts.map

package/dist/components/Popover/Popover.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAI3D,OAAO,EAAE,OAAO,EAAkC,MAAM,WAAW,CAAA;AAEnE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAkB9B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAA;AAErC,eAAO,MAAM,OAAO,EAAE,KA0BrB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAyEhC,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KA0DjC,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAgH7B,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAuD/B,CAAA"}

package/dist/components/Popover/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Popover';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Popover/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA"}

package/dist/components/Radio/Radio.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-declare function RadioGroup({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
-declare function RadioGroupItem({ className, id, label, disabled, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item> & {
+declare const RadioGroup: ({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root>) => import("react/jsx-runtime").JSX.Element;
+declare const RadioGroupItem: ({ className, id, label, secondaryLabel, disabled, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item> & {
     label?: string;
-}): import("react/jsx-runtime").JSX.Element;
+    secondaryLabel?: string;
+}) => import("react/jsx-runtime").JSX.Element;
 export { RadioGroup, RadioGroupItem };
 //# sourceMappingURL=Radio.d.ts.map

package/dist/components/Radio/Radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAA;AAKlE,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC,2CAQvD;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,EAAE,EACF,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,2CAmD5E;AAED,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAA;AAIlE,QAAA,MAAM,UAAU,GAAI,yBAGjB,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC,4CAQvD,CAAA;AAED,QAAA,MAAM,cAAc,GAAI,8DAOrB,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC,GAAG;IACzD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,4CAgEA,CAAA;AAED,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/Radio/Radio.js

@@ -0,0 +1,95 @@
+import { jsx as r, jsxs as n } from "react/jsx-runtime";
+import * as p from "react";
+import * as s from "@radix-ui/react-radio-group";
+import { Typography as m } from "../Typography/Typography.js";
+import { cn as t } from "../../utils/cn.js";
+const x = ({
+  className: i,
+  ...a
+}) => /* @__PURE__ */ r(
+  s.Root,
+  {
+    "data-slot": "radio-group",
+    className: t(i),
+    ...a
+  }
+), g = ({
+  className: i,
+  id: a,
+  label: c,
+  secondaryLabel: e,
+  disabled: o,
+  ...l
+}) => {
+  const f = p.useId(), d = a || f;
+  return /* @__PURE__ */ n("div", { className: "flex items-start gap-sm", children: [
+    /* @__PURE__ */ r(
+      s.Item,
+      {
+        "data-slot": "radio-group-item",
+        className: t(
+          "peer relative flex size-icon-small shrink-0 cursor-pointer items-center justify-center rounded-full",
+          'before:absolute before:inset-0 before:z-[-1] before:rounded-full before:border before:border-comp-checkbox-stroke-def before:transition-colors before:content-[""]',
+          "focus-visible-default",
+          "hover:before:bg-surface-comp-checkbox-bg-hover hover:before:border-comp-checkbox-stroke-hover",
+          "data-[state=checked]:text-primary-foreground data-[state=checked]:before:border-comp-checkbox-bg-active",
+          "disabled:cursor-not-allowed disabled:before:border-comp-checkbox-stroke-disabled disabled:before:bg-transparent",
+          i
+        ),
+        id: d,
+        disabled: o,
+        ...l,
+        children: /* @__PURE__ */ r(
+          s.Indicator,
+          {
+            "data-slot": "radio-group-indicator",
+            className: "relative flex items-center justify-center",
+            children: /* @__PURE__ */ r("div", { className: "size-comp-radio-dot-size rounded-full bg-comp-checkbox-bg-active" })
+          }
+        )
+      }
+    ),
+    c && /* @__PURE__ */ n(
+      "label",
+      {
+        htmlFor: d,
+        className: t(
+          "fix-y-text-1 cursor-pointer leading-none text-text-dark-primary-def select-none",
+          {
+            "cursor-not-allowed text-text-dark-disabled": o
+          }
+        ),
+        "aria-disabled": o,
+        children: [
+          /* @__PURE__ */ r(
+            m,
+            {
+              component: "span",
+              variant: "body",
+              weight: e != null && e.length ? "medium" : "regular",
+              size: "base",
+              children: c
+            }
+          ),
+          (e == null ? void 0 : e.length) && /* @__PURE__ */ r(
+            m,
+            {
+              component: "span",
+              variant: "body",
+              weight: "regular",
+              size: "base",
+              className: t("block text-text-dark-secondary", {
+                "text-text-dark-disabled": o
+              }),
+              children: e
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+export {
+  x as RadioGroup,
+  g as RadioGroupItem
+};

package/dist/components/Radio/Radio.stories.d.ts

@@ -5,4 +5,5 @@ export default meta;
 type Story = StoryObj<typeof RadioGroupItem>;
 export declare const Default: Story;
 export declare const Playground: Story;
+export declare const WithSecondaryLabel: Story;
 //# sourceMappingURL=Radio.stories.d.ts.map

package/dist/components/Radio/Radio.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/Radio.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAc,cAAc,EAAE,MAAM,SAAS,CAAA;AAEpD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CA0CrC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,CAAA;AAE5C,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAwBxB,CAAA"}
+{"version":3,"file":"Radio.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/Radio.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAc,cAAc,EAAE,MAAM,SAAS,CAAA;AAEpD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CA6CrC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,CAAA;AAE5C,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAyBxB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KA6BhC,CAAA"}

package/dist/components/Searchbar/Searchbar.d.ts

@@ -0,0 +1,13 @@
+import { InputProps } from '../Input';
+import * as React from 'react';
+export interface SearchbarProps extends Omit<InputProps, 'size' | 'type' | 'onSubmit' | 'value' | 'defaultValue' | 'suffix' | 'value' | 'defaultValue'> {
+    value?: string;
+    defaultValue?: string;
+    showButtons?: boolean;
+    clearButtonAriaLabel?: string;
+    searchButtonAriaLabel?: string;
+    onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
+}
+declare const Searchbar: ({ className, error, showButtons, clearButtonAriaLabel, searchButtonAriaLabel, disabled, value, defaultValue, name, placeholder, onChange, onSubmit, ...props }: SearchbarProps) => import("react/jsx-runtime").JSX.Element;
+export { Searchbar };
+//# sourceMappingURL=Searchbar.d.ts.map

package/dist/components/Searchbar/Searchbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Searchbar.d.ts","sourceRoot":"","sources":["../../../src/components/Searchbar/Searchbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,UAAU,CAAA;AAEjD,MAAM,WAAW,cACf,SAAQ,IAAI,CACV,UAAU,EACR,MAAM,GACN,MAAM,GACN,UAAU,GACV,OAAO,GACP,cAAc,GACd,QAAQ,GACR,OAAO,GACP,cAAc,CACjB;IACD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAA;CACzD;AAED,QAAA,MAAM,SAAS,GAAI,gKAchB,cAAc,4CAiGhB,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,CAAA"}

package/dist/components/Searchbar/Searchbar.js

@@ -0,0 +1,114 @@
+import { jsxs as R, jsx as r } from "react/jsx-runtime";
+import * as n from "react";
+import { MagnifyingGlass as j } from "../Icons/CustomIcons.js";
+import { cn as a } from "../../utils/cn.js";
+import { CloseCircleBold as w } from "@solar-icons/react-perf";
+import { Input as I } from "../Input/Input.js";
+const E = ({
+  className: m,
+  error: p = !1,
+  showButtons: x = !0,
+  clearButtonAriaLabel: d,
+  searchButtonAriaLabel: y,
+  disabled: e = !1,
+  value: o,
+  defaultValue: h,
+  name: k,
+  placeholder: v,
+  onChange: s,
+  onSubmit: i,
+  ...g
+}) => {
+  const f = n.useRef(null), [c, l] = n.useState(
+    o ?? h ?? ""
+  );
+  n.useEffect(() => {
+    o !== void 0 && l(o);
+  }, [o]);
+  const N = (t) => {
+    l(t.target.value), s && s(t);
+  }, z = () => {
+    var t, u;
+    l(""), (u = (t = f.current) == null ? void 0 : t.querySelector("input")) == null || u.focus(), s && s({
+      target: { value: "" }
+    });
+  }, C = x ? /* @__PURE__ */ R("div", { className: "flex gap-sm", children: [
+    /* @__PURE__ */ r(
+      "button",
+      {
+        className: a(
+          "flex shrink-0 cursor-pointer items-center focus-visible-default transition-opacity",
+          {
+            "opacity-0": !c,
+            "cursor-not-allowed": e
+          }
+        ),
+        "aria-label": d,
+        type: "button",
+        onClick: z,
+        children: /* @__PURE__ */ r(
+          w,
+          {
+            className: a("size-icon-small text-icon-dark-secondary-def", {
+              "text-text-dark-tertiary": e
+            })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ r(
+      "button",
+      {
+        className: a(
+          "flex shrink-0 cursor-pointer items-center focus-visible-default",
+          {
+            "cursor-not-allowed": e
+          }
+        ),
+        "aria-label": y,
+        type: "submit",
+        children: /* @__PURE__ */ r(
+          j,
+          {
+            className: a(
+              "size-icon-small text-icon-dark-primary-def transition-colors",
+              {
+                "text-text-dark-tertiary": e,
+                "group-hover:text-icon-dark-primary-hover": !e
+              }
+            )
+          }
+        )
+      }
+    )
+  ] }) : void 0;
+  return /* @__PURE__ */ r(
+    "form",
+    {
+      ref: f,
+      onSubmit: (t) => {
+        t.preventDefault(), c.length > 0 && (i == null || i(t));
+      },
+      className: m,
+      children: /* @__PURE__ */ r(
+        I,
+        {
+          suffix: C,
+          type: "text",
+          size: "sm",
+          error: p,
+          disabled: e,
+          value: c,
+          name: k,
+          onChange: N,
+          placeholder: v,
+          className: "group",
+          ...g
+        }
+      )
+    }
+  );
+};
+export {
+  E as Searchbar
+};

package/dist/components/Searchbar/Searchbar.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Searchbar } from './Searchbar';
+declare const meta: Meta<typeof Searchbar>;
+export default meta;
+type Story = StoryObj<typeof Searchbar>;
+export declare const Default: Story;
+export declare const Filled: Story;
+export declare const Disabled: Story;
+export declare const Error: Story;
+export declare const NoIcons: Story;
+//# sourceMappingURL=Searchbar.stories.d.ts.map

package/dist/components/Searchbar/Searchbar.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Searchbar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Searchbar/Searchbar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAiEhC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAA;AAEvC,eAAO,MAAM,OAAO,EAAE,KAkBrB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAkBpB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAmBtB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAmBnB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAmBrB,CAAA"}

package/dist/components/Searchbar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Searchbar';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Searchbar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Searchbar/index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA"}

package/dist/components/SegmentedControl/SegmentedControl.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 export type SegmentedControlProps = React.ComponentProps<typeof ToggleGroupPrimitive.Root>;
-declare function SegmentedControl({ className, children, ...props }: SegmentedControlProps): import("react/jsx-runtime").JSX.Element;
+declare const SegmentedControl: ({ className, children, ...props }: SegmentedControlProps) => import("react/jsx-runtime").JSX.Element;
 export type SegmentedControlItemProps = React.ComponentProps<typeof ToggleGroupPrimitive.Item>;
-declare function SegmentedControlItem({ className, children, ...props }: SegmentedControlItemProps): import("react/jsx-runtime").JSX.Element;
+declare const SegmentedControlItem: ({ className, children, ...props }: SegmentedControlItemProps) => import("react/jsx-runtime").JSX.Element;
 export { SegmentedControl, SegmentedControlItem };
 //# sourceMappingURL=SegmentedControl.d.ts.map

package/dist/components/SegmentedControl/SegmentedControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAA;AAIpE,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,cAAc,CACtD,OAAO,oBAAoB,CAAC,IAAI,CACjC,CAAA;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAevB;AAED,MAAM,MAAM,yBAAyB,GAAG,KAAK,CAAC,cAAc,CAC1D,OAAO,oBAAoB,CAAC,IAAI,CACjC,CAAA;AAED,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,yBAAyB,2CA2B3B;AAED,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,CAAA"}
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAA;AAIpE,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,cAAc,CACtD,OAAO,oBAAoB,CAAC,IAAI,CACjC,CAAA;AAED,QAAA,MAAM,gBAAgB,GAAI,mCAIvB,qBAAqB,4CAevB,CAAA;AAED,MAAM,MAAM,yBAAyB,GAAG,KAAK,CAAC,cAAc,CAC1D,OAAO,oBAAoB,CAAC,IAAI,CACjC,CAAA;AAED,QAAA,MAAM,oBAAoB,GAAI,mCAI3B,yBAAyB,4CA2B3B,CAAA;AAED,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,CAAA"}

package/dist/components/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,60 @@
+import { jsx as r, jsxs as n } from "react/jsx-runtime";
+import "react";
+import * as s from "@radix-ui/react-toggle-group";
+import { Typography as i } from "../Typography/Typography.js";
+import { cn as a } from "../../utils/cn.js";
+const g = ({
+  className: t,
+  children: o,
+  ...e
+}) => /* @__PURE__ */ r(
+  s.Root,
+  {
+    "data-slot": "toggle-group",
+    className: a(
+      "group/toggle-group relative flex gap-2xs p-2xs",
+      "max-w-comp-segmentedControl-max-width w-fit",
+      "rounded-md bg-surface-state-bg-info",
+      t
+    ),
+    ...e,
+    children: o
+  }
+), l = ({
+  className: t,
+  children: o,
+  ...e
+}) => /* @__PURE__ */ n(
+  s.Item,
+  {
+    "data-slot": "toggle-group-item",
+    className: a(
+      "max-w-comp-segmentedControl-max-width-item flex items-center justify-center rounded-sm px-xl pt-sm pb-xs",
+      "transition-200 bg-transparent text-text-brand-def transition-colors",
+      "hover:text-comp-button-text-brand-def cursor-pointer hover:bg-surface-base-primary-hover",
+      "focus-visible-default focus-visible:ring-offset-0",
+      "data-[state=on]:bg-surface-base-secondary",
+      "disabled:pointer-events-none disabled:opacity-50",
+      t
+    ),
+    ...e,
+    children: [
+      /* @__PURE__ */ r(
+        i,
+        {
+          variant: "cta",
+          size: "caption",
+          component: "span",
+          weight: "medium",
+          uppercase: !0,
+          children: e.title
+        }
+      ),
+      o
+    ]
+  }
+);
+export {
+  g as SegmentedControl,
+  l as SegmentedControlItem
+};

package/dist/components/SegmentedControl/SegmentedControl.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.stories.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/SegmentedControl.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,gBAAgB,EAAwB,MAAM,oBAAoB,CAAA;AAE3E,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAuDvC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAE9C,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAoB/B,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KA0BvB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAqD/B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KA0BxB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAYxB,CAAA"}
+{"version":3,"file":"SegmentedControl.stories.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/SegmentedControl.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,gBAAgB,EAAwB,MAAM,oBAAoB,CAAA;AAE3E,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAuDvC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAE9C,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAqB/B,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KA0BvB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAqD/B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KA2BxB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAexB,CAAA"}

package/dist/components/SegmentedIconControl/SegmentedIconControl.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 export type SegmentedIconControlProps = React.ComponentProps<typeof ToggleGroupPrimitive.Root>;
-declare function SegmentedIconControl({ className, children, ...props }: SegmentedIconControlProps): import("react/jsx-runtime").JSX.Element;
+declare const SegmentedIconControl: ({ className, children, ...props }: SegmentedIconControlProps) => import("react/jsx-runtime").JSX.Element;
 export type SegmentedIconControlItemProps = React.ComponentProps<typeof ToggleGroupPrimitive.Item>;
-declare function SegmentedIconControlItem({ className, children, ...props }: SegmentedIconControlItemProps): import("react/jsx-runtime").JSX.Element;
+declare const SegmentedIconControlItem: ({ className, children, ...props }: SegmentedIconControlItemProps) => import("react/jsx-runtime").JSX.Element;
 export { SegmentedIconControl, SegmentedIconControlItem };
 //# sourceMappingURL=SegmentedIconControl.d.ts.map

package/dist/components/SegmentedIconControl/SegmentedIconControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedIconControl.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedIconControl/SegmentedIconControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAA;AAGpE,MAAM,MAAM,yBAAyB,GAAG,KAAK,CAAC,cAAc,CAC1D,OAAO,oBAAoB,CAAC,IAAI,CACjC,CAAA;AAED,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,yBAAyB,2CAe3B;AAED,MAAM,MAAM,6BAA6B,GAAG,KAAK,CAAC,cAAc,CAC9D,OAAO,oBAAoB,CAAC,IAAI,CACjC,CAAA;AAED,iBAAS,wBAAwB,CAAC,EAChC,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,6BAA6B,2CAmB/B;AAED,OAAO,EAAE,oBAAoB,EAAE,wBAAwB,EAAE,CAAA"}
+{"version":3,"file":"SegmentedIconControl.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedIconControl/SegmentedIconControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAA;AAGpE,MAAM,MAAM,yBAAyB,GAAG,KAAK,CAAC,cAAc,CAC1D,OAAO,oBAAoB,CAAC,IAAI,CACjC,CAAA;AAED,QAAA,MAAM,oBAAoB,GAAI,mCAI3B,yBAAyB,4CAe3B,CAAA;AAED,MAAM,MAAM,6BAA6B,GAAG,KAAK,CAAC,cAAc,CAC9D,OAAO,oBAAoB,CAAC,IAAI,CACjC,CAAA;AAED,QAAA,MAAM,wBAAwB,GAAI,mCAI/B,6BAA6B,4CAmB/B,CAAA;AAED,OAAO,EAAE,oBAAoB,EAAE,wBAAwB,EAAE,CAAA"}

package/dist/components/SegmentedIconControl/SegmentedIconControl.js

@@ -0,0 +1,47 @@
+import { jsx as r } from "react/jsx-runtime";
+import "react";
+import * as n from "@radix-ui/react-toggle-group";
+import { cn as s } from "../../utils/cn.js";
+const l = ({
+  className: e,
+  children: t,
+  ...o
+}) => /* @__PURE__ */ r(
+  n.Root,
+  {
+    "data-slot": "toggle-group",
+    className: s(
+      "group/toggle-group flex h-comp-button-h-sm w-fit items-center justify-center gap-md",
+      "rounded-full border-1 border-stroke-base-primary bg-surface-base-secondary px-lg",
+      "disabled:pointer-events-none disabled:opacity-50",
+      e
+    ),
+    ...o,
+    children: t
+  }
+), c = ({
+  className: e,
+  children: t,
+  ...o
+}) => /* @__PURE__ */ r(
+  n.Item,
+  {
+    "data-slot": "toggle-group-item",
+    className: s(
+      "relative m-0 block size-icon-small bg-transparent text-icon-dark-tertiary",
+      "[&>svg]:size-full",
+      "transition-200 transition-colors",
+      "rounded-xs focus-visible-default",
+      "cursor-pointer hover:text-icon-brand-hover",
+      "data-[state=on]:text-icon-brand-def",
+      "disabled:pointer-events-none disabled:text-surface-icon-bg-dark",
+      e
+    ),
+    ...o,
+    children: t
+  }
+);
+export {
+  l as SegmentedIconControl,
+  c as SegmentedIconControlItem
+};

package/dist/components/SegmentedIconControl/SegmentedIconControl.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedIconControl.stories.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedIconControl/SegmentedIconControl.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EACL,oBAAoB,EAErB,MAAM,wBAAwB,CAAA;AAK/B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,oBAAoB,CAuD3C,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,oBAAoB,CAAC,CAAA;AAElD,eAAO,MAAM,OAAO,EAAE,KAkBrB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KA0B/B,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KA8BvB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KA6E/B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAoCxB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAkBxB,CAAA"}
+{"version":3,"file":"SegmentedIconControl.stories.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedIconControl/SegmentedIconControl.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAE3D,OAAO,EACL,oBAAoB,EAErB,MAAM,wBAAwB,CAAA;AAI/B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,oBAAoB,CAuD3C,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,oBAAoB,CAAC,CAAA;AAElD,eAAO,MAAM,OAAO,EAAE,KAqBrB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KA2B/B,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KA8BvB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KA6E/B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAqCxB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAqBxB,CAAA"}

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,24 @@
+import { default as React, ReactNode } from 'react';
+export interface ISelectProps {
+    label?: string;
+    hint?: string;
+    error?: boolean;
+    required?: boolean;
+    suffix?: ReactNode;
+    prefix?: ReactNode;
+    placeholder?: string;
+    size?: 'sm' | 'base' | 'lg';
+    options: Array<{
+        value: string;
+        label: ReactNode;
+        disabled?: boolean;
+        icon?: ReactNode;
+    }>;
+    disabled?: boolean;
+    value?: string;
+    onChange?: (value: string) => void;
+    shouldScrollToSelectedOption?: boolean;
+    collisionPadding?: number;
+}
+export declare const Select: React.ForwardRefExoticComponent<ISelectProps & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=Select.d.ts.map

package/dist/components/Select/Select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,KAAK,SAAS,EAKf,MAAM,OAAO,CAAA;AAad,MAAM,WAAW,YAAY;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;IAC3B,OAAO,EAAE,KAAK,CAAC;QACb,KAAK,EAAE,MAAM,CAAA;QACb,KAAK,EAAE,SAAS,CAAA;QAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;QAClB,IAAI,CAAC,EAAE,SAAS,CAAA;KACjB,CAAC,CAAA;IACF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,4BAA4B,CAAC,EAAE,OAAO,CAAA;IACtC,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAED,eAAO,MAAM,MAAM,wFA2LlB,CAAA"}

package/dist/components/Select/Select.js

@@ -0,0 +1,159 @@
+import { jsx as t, jsxs as p } from "react/jsx-runtime";
+import m, { forwardRef as C, useMemo as V, useRef as N, useEffect as R } from "react";
+import { triggerWrapperVariants as A } from "./utils.js";
+import { Typography as s } from "../Typography/Typography.js";
+import { DropdownMenu as I, DropdownMenuTrigger as j, DropdownMenuContent as E, DropdownMenuRadioGroup as _, DropdownMenuRadioItem as k } from "../DropdownMenu/DropdownMenu.js";
+import { AltArrowUpOutline as B } from "@solar-icons/react-perf";
+import { cn as F } from "../../utils/cn.js";
+const G = C(
+  (S, f) => {
+    const {
+      label: x,
+      hint: g,
+      error: h,
+      options: c,
+      onChange: i,
+      value: r,
+      disabled: a,
+      prefix: b,
+      size: z,
+      placeholder: w = "Select...",
+      shouldScrollToSelectedOption: v,
+      collisionPadding: D
+    } = S, M = V(() => {
+      const e = r && c.find((l) => l.value === r);
+      return e ? typeof e.label != "function" ? /* @__PURE__ */ t(
+        s,
+        {
+          size: "input",
+          className: "grow-1 fix-y-text truncate text-left text-comp-select-text-primary",
+          weight: "medium",
+          component: "span",
+          children: e.label
+        }
+      ) : e.label : /* @__PURE__ */ t(
+        s,
+        {
+          size: "input",
+          className: "grow-1 fix-y-text truncate text-left text-comp-select-text-placeholder",
+          weight: "regular",
+          component: "span",
+          children: w
+        }
+      );
+    }, [c, r, w]), [o, O] = m.useState(!1), [y, T] = m.useState(0), d = m.useRef(!1), W = N(null), u = N({}), n = (typeof f == "function" ? null : f) ?? W;
+    return R(() => {
+      const e = () => {
+        n.current && T(n.current.offsetWidth);
+      };
+      e();
+      const l = new ResizeObserver(e);
+      return n.current && l.observe(n.current), () => {
+        l.disconnect();
+      };
+    }, [n]), R(() => {
+      var e;
+      o && r && u.current[r] && v && ((e = u.current[r]) == null || e.scrollIntoView({ block: "nearest" }));
+    }, [o, v, r]), /* @__PURE__ */ p("div", { className: "flex flex-1 flex-col gap-sm", children: [
+      x && /* @__PURE__ */ t(
+        s,
+        {
+          component: "label",
+          size: "sm",
+          weight: "regular",
+          className: "text-comp-select-text-primary",
+          children: x
+        }
+      ),
+      /* @__PURE__ */ p(
+        I,
+        {
+          onOpenChange: (e) => {
+            O(e);
+          },
+          children: [
+            /* @__PURE__ */ t(j, { disabled: a, asChild: !0, children: /* @__PURE__ */ t(
+              "button",
+              {
+                ref: n,
+                type: "button",
+                role: "input",
+                tabIndex: 0,
+                disabled: a,
+                className: A({ size: z, error: h, expanded: o }),
+                children: /* @__PURE__ */ p("div", { className: "flex min-w-0 flex-1 items-center gap-sm", children: [
+                  b && /* @__PURE__ */ t(
+                    "span",
+                    {
+                      className: a ? "text-comp-select-icon-disabled" : "text-comp-select-icon-brand-def",
+                      children: b
+                    }
+                  ),
+                  M,
+                  /* @__PURE__ */ t(
+                    B,
+                    {
+                      className: F(
+                        "transition-transform duration-200",
+                        o ? "rotate-0" : "rotate-180"
+                      )
+                    }
+                  )
+                ] })
+              }
+            ) }),
+            /* @__PURE__ */ t(
+              E,
+              {
+                className: "mt-1",
+                style: {
+                  width: y > 0 ? `${y}px` : void 0
+                },
+                onCloseAutoFocus: (e) => {
+                  d.current || e.preventDefault(), d.current = !1;
+                },
+                collisionPadding: D,
+                children: /* @__PURE__ */ t(
+                  _,
+                  {
+                    value: r,
+                    onValueChange: (e) => {
+                      d.current = !0, i == null || i(e);
+                    },
+                    children: c.map((e) => /* @__PURE__ */ t(
+                      k,
+                      {
+                        value: e.value.toString(),
+                        disabled: e.disabled,
+                        icon: e.icon,
+                        ref: (l) => {
+                          u.current[e.value] = l;
+                        },
+                        children: e.label
+                      },
+                      e.value
+                    ))
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      g && /* @__PURE__ */ t(
+        s,
+        {
+          component: "p",
+          size: "sm",
+          weight: "regular",
+          className: h ? "text-comp-select-text-error" : "text-comp-select-text-secondary",
+          children: g
+        }
+      )
+    ] });
+  }
+);
+G.displayName = "Select";
+export {
+  G as Select
+};