@codefast/ui 0.0.11 → 0.0.13

package/dist/segmented.js

@@ -1,126 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }"use client";
-
-
-var _chunkG3NP7M2Njs = require('./chunk-G3NP7M2N.js');
-
-// src/segmented.tsx
-var _react = require('react'); var React = _interopRequireWildcard(_react);
-var _reacttogglegroup = require('@radix-ui/react-toggle-group'); var ToggleGroupPrimitive = _interopRequireWildcard(_reacttogglegroup);
-var _reactusecontrollablestate = require('@radix-ui/react-use-controllable-state');
-var _reactcontext = require('@radix-ui/react-context');
-var _primitive = require('@radix-ui/primitive');
-var _jsxruntime = require('react/jsx-runtime');
-var SEGMENTED_NAME = "Segmented";
-var [createSegmentedContext] = _reactcontext.createContextScope.call(void 0, SEGMENTED_NAME);
-var [SegmentedProvider, useSegmentedContext] = createSegmentedContext(SEGMENTED_NAME);
-var Segmented = React.forwardRef(
-  ({
-    __scopeSegmented,
-    children,
-    className,
-    value: valueProp,
-    onValueChange: onValueChangeProp,
-    defaultValue: defaultValueProp,
-    ...props
-  }, ref) => {
-    const [value, setValue] = _reactusecontrollablestate.useControllableState.call(void 0, {
-      prop: valueProp,
-      onChange: onValueChangeProp,
-      defaultProp: defaultValueProp
-    });
-    const childCount = React.Children.count(children);
-    const [offset, setOffset] = React.useState({
-      left: 0,
-      top: 0
-    });
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SegmentedProvider, { scope: __scopeSegmented, offset, setOffset, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      ToggleGroupPrimitive.Root,
-      {
-        ref,
-        className: _chunkG3NP7M2Njs.cn.call(void 0, 
-          "bg-background relative isolate inline-grid h-10 min-w-max auto-cols-fr grid-flow-col items-stretch rounded-md border text-center align-top shadow-sm",
-          className
-        ),
-        value,
-        onValueChange: (valueChanged) => {
-          if (valueChanged) {
-            setValue(valueChanged);
-          }
-        },
-        type: "single",
-        ...props,
-        style: {
-          "--offset-left": `${offset.left.toString()}px`,
-          "--offset-top": `${offset.top.toString()}px`,
-          ...props.style
-        },
-        children: [
-          children,
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            "div",
-            {
-              className: _chunkG3NP7M2Njs.cn.call(void 0, 
-                "pointer-events-none absolute -z-[1] h-full translate-x-[var(--offset-left)] transition-transform",
-                "before:bg-accent before:absolute before:inset-0 before:rounded"
-              ),
-              style: {
-                width: `calc(100% / ${childCount.toString()})`
-              }
-            }
-          )
-        ]
-      }
-    ) });
-  }
-);
-Segmented.displayName = SEGMENTED_NAME;
-var SEGMENTED_ITEM_NAME = "SegmentedItem";
-var SegmentedItem = React.forwardRef(
-  ({ __scopeSegmented, children, className, onClick, ...props }, ref) => {
-    const { setOffset } = useSegmentedContext(SEGMENTED_ITEM_NAME, __scopeSegmented);
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      ToggleGroupPrimitive.Item,
-      {
-        ref,
-        className: _chunkG3NP7M2Njs.cn.call(void 0, 
-          "group flex select-none items-stretch rounded text-sm first:rounded-l-[inherit] [&:nth-last-child(2)]:rounded-r-[inherit]",
-          "hover:bg-accent/30",
-          "group-aria-checked:text-accent-foreground",
-          className
-        ),
-        onClick: _primitive.composeEventHandlers.call(void 0, onClick, (event) => {
-          setOffset({
-            left: event.currentTarget.offsetLeft,
-            top: event.currentTarget.offsetTop
-          });
-        }),
-        ...props,
-        children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            "span",
-            {
-              className: _chunkG3NP7M2Njs.cn.call(void 0, 
-                "bg-border my-1.5 w-px transition",
-                "group-first:opacity-0",
-                "group-[:where([data-state=on])+*]:opacity-0 group-aria-checked:opacity-0",
-                "group-focus-visible:opacity-0 group-[&:focus-visible+*]:opacity-0",
-                "group-[:where([data-state=on])+*]:scale-0 group-aria-checked:scale-0",
-                "group-focus-visible:scale-0 group-[&:focus-visible+*]:scale-0"
-              )
-            }
-          ),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "flex grow items-center justify-center gap-2 px-3 py-1 [&_svg]:shrink-0", children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-medium opacity-0 transition-opacity group-aria-checked:opacity-100", children }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "absolute opacity-100 transition-opacity group-aria-checked:opacity-0", children })
-          ] })
-        ]
-      }
-    );
-  }
-);
-SegmentedItem.displayName = SEGMENTED_ITEM_NAME;
-
-
-
-exports.Segmented = Segmented; exports.SegmentedItem = SegmentedItem;
-//# sourceMappingURL=segmented.js.map

package/dist/segmented.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/segmented.tsx"],"names":[],"mappings":";;;;;;AAEA,YAAY,WAAW;AACvB,YAAY,0BAA0B;AACtC,SAAS,4BAA4B;AACrC,SAAS,0BAAsC;AAC/C,SAAS,4BAA4B;AA+D7B,SAuBE,KAvBF;AAtDR,IAAM,iBAAiB;AAIvB,IAAM,CAAC,sBAAsB,IAAI,mBAAmB,cAAc;AAYlE,IAAM,CAAC,mBAAmB,mBAAmB,IAAI,uBAA8C,cAAc;AAY7G,IAAM,YAAkB;AAAA,EACtB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,eAAe;AAAA,IACf,cAAc;AAAA,IACd,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,CAAC,OAAO,QAAQ,IAAI,qBAAqB;AAAA,MAC7C,MAAM;AAAA,MACN,UAAU;AAAA,MACV,aAAa;AAAA,IACf,CAAC;AACD,UAAM,aAAmB,eAAS,MAAM,QAAQ;AAChD,UAAM,CAAC,QAAQ,SAAS,IAAU,eAAiB;AAAA,MACjD,MAAM;AAAA,MACN,KAAK;AAAA,IACP,CAAC;AAED,WACE,oBAAC,qBAAkB,OAAO,kBAAkB,QAAgB,WAC1D;AAAA,MAAsB;AAAA,MAArB;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,QACA,eAAe,CAAC,iBAAiB;AAC/B,cAAI,cAAc;AAChB,qBAAS,YAAY;AAAA,UACvB;AAAA,QACF;AAAA,QACA,MAAK;AAAA,QACJ,GAAG;AAAA,QACJ,OACE;AAAA,UACE,iBAAiB,GAAG,OAAO,KAAK,SAAS,CAAC;AAAA,UAC1C,gBAAgB,GAAG,OAAO,IAAI,SAAS,CAAC;AAAA,UACxC,GAAG,MAAM;AAAA,QACX;AAAA,QAGD;AAAA;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,cACF;AAAA,cACA,OACE;AAAA,gBACE,OAAO,eAAe,WAAW,SAAS,CAAC;AAAA,cAC7C;AAAA;AAAA,UAEJ;AAAA;AAAA;AAAA,IACF,GACF;AAAA,EAEJ;AACF;AAEA,UAAU,cAAc;AAMxB,IAAM,sBAAsB;AAU5B,IAAM,gBAAsB;AAAA,EAC1B,CAAC,EAAE,kBAAkB,UAAU,WAAW,SAAS,GAAG,MAAM,GAAoC,QAAQ;AACtG,UAAM,EAAE,UAAU,IAAI,oBAAoB,qBAAqB,gBAAgB;AAE/E,WACE;AAAA,MAAsB;AAAA,MAArB;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,SAAS,qBAAqB,SAAS,CAAC,UAAU;AAChD,oBAAU;AAAA,YACR,MAAM,MAAM,cAAc;AAAA,YAC1B,KAAK,MAAM,cAAc;AAAA,UAC3B,CAAC;AAAA,QACH,CAAC;AAAA,QACA,GAAG;AAAA,QAGJ;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AAAA;AAAA,UACF;AAAA,UAEA,qBAAC,UAAK,WAAU,0EAEd;AAAA,gCAAC,UAAK,WAAU,2EAA2E,UAAS;AAAA,YAEpG,oBAAC,UAAK,WAAU,wEAAwE,UAAS;AAAA,aACnG;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,cAAc,cAAc","sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\";\nimport { useControllableState } from \"@radix-ui/react-use-controllable-state\";\nimport { createContextScope, type Scope } from \"@radix-ui/react-context\";\nimport { composeEventHandlers } from \"@radix-ui/primitive\";\nimport { cn } from \"./utils\";\n\ntype RemovedProps = \"value\" | \"asChild\" | \"defaultChecked\" | \"defaultValue\";\n\n/* -----------------------------------------------------------------------------\n * Component: Segmented\n * -------------------------------------------------------------------------- */\n\nconst SEGMENTED_NAME = \"Segmented\";\n\ntype ScopedProps<P> = P & { __scopeSegmented?: Scope };\n\nconst [createSegmentedContext] = createContextScope(SEGMENTED_NAME);\n\ninterface Offset {\n  left: number;\n  top: number;\n}\n\ninterface SegmentedContextValue {\n  offset: Offset;\n  setOffset: React.Dispatch<React.SetStateAction<Offset>>;\n}\n\nconst [SegmentedProvider, useSegmentedContext] = createSegmentedContext<SegmentedContextValue>(SEGMENTED_NAME);\n\ntype SegmentedElement = React.ElementRef<typeof ToggleGroupPrimitive.Root>;\ntype SegmentedProps = Omit<\n  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>,\n  RemovedProps | \"disabled\" | \"type\" | \"onValueChange\"\n> & {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n};\n\nconst Segmented = React.forwardRef<SegmentedElement, SegmentedProps>(\n  (\n    {\n      __scopeSegmented,\n      children,\n      className,\n      value: valueProp,\n      onValueChange: onValueChangeProp,\n      defaultValue: defaultValueProp,\n      ...props\n    }: ScopedProps<SegmentedProps>,\n    ref,\n  ) => {\n    const [value, setValue] = useControllableState({\n      prop: valueProp,\n      onChange: onValueChangeProp,\n      defaultProp: defaultValueProp,\n    });\n    const childCount = React.Children.count(children);\n    const [offset, setOffset] = React.useState<Offset>({\n      left: 0,\n      top: 0,\n    });\n\n    return (\n      <SegmentedProvider scope={__scopeSegmented} offset={offset} setOffset={setOffset}>\n        <ToggleGroupPrimitive.Root\n          ref={ref}\n          className={cn(\n            \"bg-background relative isolate inline-grid h-10 min-w-max auto-cols-fr grid-flow-col items-stretch rounded-md border text-center align-top shadow-sm\",\n            className,\n          )}\n          value={value}\n          onValueChange={(valueChanged) => {\n            if (valueChanged) {\n              setValue(valueChanged);\n            }\n          }}\n          type=\"single\"\n          {...props}\n          style={\n            {\n              \"--offset-left\": `${offset.left.toString()}px`,\n              \"--offset-top\": `${offset.top.toString()}px`,\n              ...props.style,\n            } as React.CSSProperties\n          }\n        >\n          {children}\n          <div\n            className={cn(\n              \"pointer-events-none absolute -z-[1] h-full translate-x-[var(--offset-left)] transition-transform\",\n              \"before:bg-accent before:absolute before:inset-0 before:rounded\",\n            )}\n            style={\n              {\n                width: `calc(100% / ${childCount.toString()})`,\n              } as React.CSSProperties\n            }\n          />\n        </ToggleGroupPrimitive.Root>\n      </SegmentedProvider>\n    );\n  },\n);\n\nSegmented.displayName = SEGMENTED_NAME;\n\n/* -----------------------------------------------------------------------------\n * Component: SegmentedItem\n * -------------------------------------------------------------------------- */\n\nconst SEGMENTED_ITEM_NAME = \"SegmentedItem\";\n\ntype SegmentedItemElement = React.ElementRef<typeof ToggleGroupPrimitive.Item>;\ntype SegmentedItemProps = Omit<\n  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item>,\n  RemovedProps | \"disabled\" | \"type\"\n> & {\n  value: string;\n};\n\nconst SegmentedItem = React.forwardRef<SegmentedItemElement, SegmentedItemProps>(\n  ({ __scopeSegmented, children, className, onClick, ...props }: ScopedProps<SegmentedItemProps>, ref) => {\n    const { setOffset } = useSegmentedContext(SEGMENTED_ITEM_NAME, __scopeSegmented);\n\n    return (\n      <ToggleGroupPrimitive.Item\n        ref={ref}\n        className={cn(\n          \"group flex select-none items-stretch rounded text-sm first:rounded-l-[inherit] [&:nth-last-child(2)]:rounded-r-[inherit]\",\n          \"hover:bg-accent/30\",\n          \"group-aria-checked:text-accent-foreground\",\n          className,\n        )}\n        onClick={composeEventHandlers(onClick, (event) => {\n          setOffset({\n            left: event.currentTarget.offsetLeft,\n            top: event.currentTarget.offsetTop,\n          });\n        })}\n        {...props}\n      >\n        {/* Separator */}\n        <span\n          className={cn(\n            \"bg-border my-1.5 w-px transition\",\n            \"group-first:opacity-0\",\n            \"group-[:where([data-state=on])+*]:opacity-0 group-aria-checked:opacity-0\",\n            \"group-focus-visible:opacity-0 group-[&:focus-visible+*]:opacity-0\",\n            \"group-[:where([data-state=on])+*]:scale-0 group-aria-checked:scale-0\",\n            \"group-focus-visible:scale-0 group-[&:focus-visible+*]:scale-0\",\n          )}\n        />\n        {/* Label */}\n        <span className=\"flex grow items-center justify-center gap-2 px-3 py-1 [&_svg]:shrink-0\">\n          {/* LabelActive */}\n          <span className=\"font-medium opacity-0 transition-opacity group-aria-checked:opacity-100\">{children}</span>\n          {/* LabelInactive */}\n          <span className=\"absolute opacity-100 transition-opacity group-aria-checked:opacity-0\">{children}</span>\n        </span>\n      </ToggleGroupPrimitive.Item>\n    );\n  },\n);\n\nSegmentedItem.displayName = SEGMENTED_ITEM_NAME;\n\n/* -----------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------- */\n\nexport { Segmented, SegmentedItem, type SegmentedProps, type SegmentedItemProps };\n"]}

package/dist/segmented.mjs

@@ -1,126 +0,0 @@
-"use client";
-import {
-  cn
-} from "./chunk-UG3URV2Z.mjs";
-
-// src/segmented.tsx
-import * as React from "react";
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import { createContextScope } from "@radix-ui/react-context";
-import { composeEventHandlers } from "@radix-ui/primitive";
-import { jsx, jsxs } from "react/jsx-runtime";
-var SEGMENTED_NAME = "Segmented";
-var [createSegmentedContext] = createContextScope(SEGMENTED_NAME);
-var [SegmentedProvider, useSegmentedContext] = createSegmentedContext(SEGMENTED_NAME);
-var Segmented = React.forwardRef(
-  ({
-    __scopeSegmented,
-    children,
-    className,
-    value: valueProp,
-    onValueChange: onValueChangeProp,
-    defaultValue: defaultValueProp,
-    ...props
-  }, ref) => {
-    const [value, setValue] = useControllableState({
-      prop: valueProp,
-      onChange: onValueChangeProp,
-      defaultProp: defaultValueProp
-    });
-    const childCount = React.Children.count(children);
-    const [offset, setOffset] = React.useState({
-      left: 0,
-      top: 0
-    });
-    return /* @__PURE__ */ jsx(SegmentedProvider, { scope: __scopeSegmented, offset, setOffset, children: /* @__PURE__ */ jsxs(
-      ToggleGroupPrimitive.Root,
-      {
-        ref,
-        className: cn(
-          "bg-background relative isolate inline-grid h-10 min-w-max auto-cols-fr grid-flow-col items-stretch rounded-md border text-center align-top shadow-sm",
-          className
-        ),
-        value,
-        onValueChange: (valueChanged) => {
-          if (valueChanged) {
-            setValue(valueChanged);
-          }
-        },
-        type: "single",
-        ...props,
-        style: {
-          "--offset-left": `${offset.left.toString()}px`,
-          "--offset-top": `${offset.top.toString()}px`,
-          ...props.style
-        },
-        children: [
-          children,
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "pointer-events-none absolute -z-[1] h-full translate-x-[var(--offset-left)] transition-transform",
-                "before:bg-accent before:absolute before:inset-0 before:rounded"
-              ),
-              style: {
-                width: `calc(100% / ${childCount.toString()})`
-              }
-            }
-          )
-        ]
-      }
-    ) });
-  }
-);
-Segmented.displayName = SEGMENTED_NAME;
-var SEGMENTED_ITEM_NAME = "SegmentedItem";
-var SegmentedItem = React.forwardRef(
-  ({ __scopeSegmented, children, className, onClick, ...props }, ref) => {
-    const { setOffset } = useSegmentedContext(SEGMENTED_ITEM_NAME, __scopeSegmented);
-    return /* @__PURE__ */ jsxs(
-      ToggleGroupPrimitive.Item,
-      {
-        ref,
-        className: cn(
-          "group flex select-none items-stretch rounded text-sm first:rounded-l-[inherit] [&:nth-last-child(2)]:rounded-r-[inherit]",
-          "hover:bg-accent/30",
-          "group-aria-checked:text-accent-foreground",
-          className
-        ),
-        onClick: composeEventHandlers(onClick, (event) => {
-          setOffset({
-            left: event.currentTarget.offsetLeft,
-            top: event.currentTarget.offsetTop
-          });
-        }),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn(
-                "bg-border my-1.5 w-px transition",
-                "group-first:opacity-0",
-                "group-[:where([data-state=on])+*]:opacity-0 group-aria-checked:opacity-0",
-                "group-focus-visible:opacity-0 group-[&:focus-visible+*]:opacity-0",
-                "group-[:where([data-state=on])+*]:scale-0 group-aria-checked:scale-0",
-                "group-focus-visible:scale-0 group-[&:focus-visible+*]:scale-0"
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxs("span", { className: "flex grow items-center justify-center gap-2 px-3 py-1 [&_svg]:shrink-0", children: [
-            /* @__PURE__ */ jsx("span", { className: "font-medium opacity-0 transition-opacity group-aria-checked:opacity-100", children }),
-            /* @__PURE__ */ jsx("span", { className: "absolute opacity-100 transition-opacity group-aria-checked:opacity-0", children })
-          ] })
-        ]
-      }
-    );
-  }
-);
-SegmentedItem.displayName = SEGMENTED_ITEM_NAME;
-export {
-  Segmented,
-  SegmentedItem
-};
-//# sourceMappingURL=segmented.mjs.map

package/dist/segmented.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/segmented.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\";\nimport { useControllableState } from \"@radix-ui/react-use-controllable-state\";\nimport { createContextScope, type Scope } from \"@radix-ui/react-context\";\nimport { composeEventHandlers } from \"@radix-ui/primitive\";\nimport { cn } from \"./utils\";\n\ntype RemovedProps = \"value\" | \"asChild\" | \"defaultChecked\" | \"defaultValue\";\n\n/* -----------------------------------------------------------------------------\n * Component: Segmented\n * -------------------------------------------------------------------------- */\n\nconst SEGMENTED_NAME = \"Segmented\";\n\ntype ScopedProps<P> = P & { __scopeSegmented?: Scope };\n\nconst [createSegmentedContext] = createContextScope(SEGMENTED_NAME);\n\ninterface Offset {\n  left: number;\n  top: number;\n}\n\ninterface SegmentedContextValue {\n  offset: Offset;\n  setOffset: React.Dispatch<React.SetStateAction<Offset>>;\n}\n\nconst [SegmentedProvider, useSegmentedContext] = createSegmentedContext<SegmentedContextValue>(SEGMENTED_NAME);\n\ntype SegmentedElement = React.ElementRef<typeof ToggleGroupPrimitive.Root>;\ntype SegmentedProps = Omit<\n  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>,\n  RemovedProps | \"disabled\" | \"type\" | \"onValueChange\"\n> & {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n};\n\nconst Segmented = React.forwardRef<SegmentedElement, SegmentedProps>(\n  (\n    {\n      __scopeSegmented,\n      children,\n      className,\n      value: valueProp,\n      onValueChange: onValueChangeProp,\n      defaultValue: defaultValueProp,\n      ...props\n    }: ScopedProps<SegmentedProps>,\n    ref,\n  ) => {\n    const [value, setValue] = useControllableState({\n      prop: valueProp,\n      onChange: onValueChangeProp,\n      defaultProp: defaultValueProp,\n    });\n    const childCount = React.Children.count(children);\n    const [offset, setOffset] = React.useState<Offset>({\n      left: 0,\n      top: 0,\n    });\n\n    return (\n      <SegmentedProvider scope={__scopeSegmented} offset={offset} setOffset={setOffset}>\n        <ToggleGroupPrimitive.Root\n          ref={ref}\n          className={cn(\n            \"bg-background relative isolate inline-grid h-10 min-w-max auto-cols-fr grid-flow-col items-stretch rounded-md border text-center align-top shadow-sm\",\n            className,\n          )}\n          value={value}\n          onValueChange={(valueChanged) => {\n            if (valueChanged) {\n              setValue(valueChanged);\n            }\n          }}\n          type=\"single\"\n          {...props}\n          style={\n            {\n              \"--offset-left\": `${offset.left.toString()}px`,\n              \"--offset-top\": `${offset.top.toString()}px`,\n              ...props.style,\n            } as React.CSSProperties\n          }\n        >\n          {children}\n          <div\n            className={cn(\n              \"pointer-events-none absolute -z-[1] h-full translate-x-[var(--offset-left)] transition-transform\",\n              \"before:bg-accent before:absolute before:inset-0 before:rounded\",\n            )}\n            style={\n              {\n                width: `calc(100% / ${childCount.toString()})`,\n              } as React.CSSProperties\n            }\n          />\n        </ToggleGroupPrimitive.Root>\n      </SegmentedProvider>\n    );\n  },\n);\n\nSegmented.displayName = SEGMENTED_NAME;\n\n/* -----------------------------------------------------------------------------\n * Component: SegmentedItem\n * -------------------------------------------------------------------------- */\n\nconst SEGMENTED_ITEM_NAME = \"SegmentedItem\";\n\ntype SegmentedItemElement = React.ElementRef<typeof ToggleGroupPrimitive.Item>;\ntype SegmentedItemProps = Omit<\n  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item>,\n  RemovedProps | \"disabled\" | \"type\"\n> & {\n  value: string;\n};\n\nconst SegmentedItem = React.forwardRef<SegmentedItemElement, SegmentedItemProps>(\n  ({ __scopeSegmented, children, className, onClick, ...props }: ScopedProps<SegmentedItemProps>, ref) => {\n    const { setOffset } = useSegmentedContext(SEGMENTED_ITEM_NAME, __scopeSegmented);\n\n    return (\n      <ToggleGroupPrimitive.Item\n        ref={ref}\n        className={cn(\n          \"group flex select-none items-stretch rounded text-sm first:rounded-l-[inherit] [&:nth-last-child(2)]:rounded-r-[inherit]\",\n          \"hover:bg-accent/30\",\n          \"group-aria-checked:text-accent-foreground\",\n          className,\n        )}\n        onClick={composeEventHandlers(onClick, (event) => {\n          setOffset({\n            left: event.currentTarget.offsetLeft,\n            top: event.currentTarget.offsetTop,\n          });\n        })}\n        {...props}\n      >\n        {/* Separator */}\n        <span\n          className={cn(\n            \"bg-border my-1.5 w-px transition\",\n            \"group-first:opacity-0\",\n            \"group-[:where([data-state=on])+*]:opacity-0 group-aria-checked:opacity-0\",\n            \"group-focus-visible:opacity-0 group-[&:focus-visible+*]:opacity-0\",\n            \"group-[:where([data-state=on])+*]:scale-0 group-aria-checked:scale-0\",\n            \"group-focus-visible:scale-0 group-[&:focus-visible+*]:scale-0\",\n          )}\n        />\n        {/* Label */}\n        <span className=\"flex grow items-center justify-center gap-2 px-3 py-1 [&_svg]:shrink-0\">\n          {/* LabelActive */}\n          <span className=\"font-medium opacity-0 transition-opacity group-aria-checked:opacity-100\">{children}</span>\n          {/* LabelInactive */}\n          <span className=\"absolute opacity-100 transition-opacity group-aria-checked:opacity-0\">{children}</span>\n        </span>\n      </ToggleGroupPrimitive.Item>\n    );\n  },\n);\n\nSegmentedItem.displayName = SEGMENTED_ITEM_NAME;\n\n/* -----------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------- */\n\nexport { Segmented, SegmentedItem, type SegmentedProps, type SegmentedItemProps };\n"],"mappings":";;;;;;AAEA,YAAY,WAAW;AACvB,YAAY,0BAA0B;AACtC,SAAS,4BAA4B;AACrC,SAAS,0BAAsC;AAC/C,SAAS,4BAA4B;AA+D7B,SAuBE,KAvBF;AAtDR,IAAM,iBAAiB;AAIvB,IAAM,CAAC,sBAAsB,IAAI,mBAAmB,cAAc;AAYlE,IAAM,CAAC,mBAAmB,mBAAmB,IAAI,uBAA8C,cAAc;AAY7G,IAAM,YAAkB;AAAA,EACtB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,eAAe;AAAA,IACf,cAAc;AAAA,IACd,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,CAAC,OAAO,QAAQ,IAAI,qBAAqB;AAAA,MAC7C,MAAM;AAAA,MACN,UAAU;AAAA,MACV,aAAa;AAAA,IACf,CAAC;AACD,UAAM,aAAmB,eAAS,MAAM,QAAQ;AAChD,UAAM,CAAC,QAAQ,SAAS,IAAU,eAAiB;AAAA,MACjD,MAAM;AAAA,MACN,KAAK;AAAA,IACP,CAAC;AAED,WACE,oBAAC,qBAAkB,OAAO,kBAAkB,QAAgB,WAC1D;AAAA,MAAsB;AAAA,MAArB;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,QACA,eAAe,CAAC,iBAAiB;AAC/B,cAAI,cAAc;AAChB,qBAAS,YAAY;AAAA,UACvB;AAAA,QACF;AAAA,QACA,MAAK;AAAA,QACJ,GAAG;AAAA,QACJ,OACE;AAAA,UACE,iBAAiB,GAAG,OAAO,KAAK,SAAS,CAAC;AAAA,UAC1C,gBAAgB,GAAG,OAAO,IAAI,SAAS,CAAC;AAAA,UACxC,GAAG,MAAM;AAAA,QACX;AAAA,QAGD;AAAA;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,cACF;AAAA,cACA,OACE;AAAA,gBACE,OAAO,eAAe,WAAW,SAAS,CAAC;AAAA,cAC7C;AAAA;AAAA,UAEJ;AAAA;AAAA;AAAA,IACF,GACF;AAAA,EAEJ;AACF;AAEA,UAAU,cAAc;AAMxB,IAAM,sBAAsB;AAU5B,IAAM,gBAAsB;AAAA,EAC1B,CAAC,EAAE,kBAAkB,UAAU,WAAW,SAAS,GAAG,MAAM,GAAoC,QAAQ;AACtG,UAAM,EAAE,UAAU,IAAI,oBAAoB,qBAAqB,gBAAgB;AAE/E,WACE;AAAA,MAAsB;AAAA,MAArB;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,SAAS,qBAAqB,SAAS,CAAC,UAAU;AAChD,oBAAU;AAAA,YACR,MAAM,MAAM,cAAc;AAAA,YAC1B,KAAK,MAAM,cAAc;AAAA,UAC3B,CAAC;AAAA,QACH,CAAC;AAAA,QACA,GAAG;AAAA,QAGJ;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AAAA;AAAA,UACF;AAAA,UAEA,qBAAC,UAAK,WAAU,0EAEd;AAAA,gCAAC,UAAK,WAAU,2EAA2E,UAAS;AAAA,YAEpG,oBAAC,UAAK,WAAU,wEAAwE,UAAS;AAAA,aACnG;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,cAAc,cAAc;","names":[]}

package/src/segmented.tsx

@@ -1,176 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import { createContextScope, type Scope } from "@radix-ui/react-context";
-import { composeEventHandlers } from "@radix-ui/primitive";
-import { cn } from "./utils";
-
-type RemovedProps = "value" | "asChild" | "defaultChecked" | "defaultValue";
-
-/* -----------------------------------------------------------------------------
- * Component: Segmented
- * -------------------------------------------------------------------------- */
-
-const SEGMENTED_NAME = "Segmented";
-
-type ScopedProps<P> = P & { __scopeSegmented?: Scope };
-
-const [createSegmentedContext] = createContextScope(SEGMENTED_NAME);
-
-interface Offset {
-  left: number;
-  top: number;
-}
-
-interface SegmentedContextValue {
-  offset: Offset;
-  setOffset: React.Dispatch<React.SetStateAction<Offset>>;
-}
-
-const [SegmentedProvider, useSegmentedContext] = createSegmentedContext<SegmentedContextValue>(SEGMENTED_NAME);
-
-type SegmentedElement = React.ElementRef<typeof ToggleGroupPrimitive.Root>;
-type SegmentedProps = Omit<
-  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>,
-  RemovedProps | "disabled" | "type" | "onValueChange"
-> & {
-  value?: string;
-  defaultValue?: string;
-  onValueChange?: (value: string) => void;
-};
-
-const Segmented = React.forwardRef<SegmentedElement, SegmentedProps>(
-  (
-    {
-      __scopeSegmented,
-      children,
-      className,
-      value: valueProp,
-      onValueChange: onValueChangeProp,
-      defaultValue: defaultValueProp,
-      ...props
-    }: ScopedProps<SegmentedProps>,
-    ref,
-  ) => {
-    const [value, setValue] = useControllableState({
-      prop: valueProp,
-      onChange: onValueChangeProp,
-      defaultProp: defaultValueProp,
-    });
-    const childCount = React.Children.count(children);
-    const [offset, setOffset] = React.useState<Offset>({
-      left: 0,
-      top: 0,
-    });
-
-    return (
-      <SegmentedProvider scope={__scopeSegmented} offset={offset} setOffset={setOffset}>
-        <ToggleGroupPrimitive.Root
-          ref={ref}
-          className={cn(
-            "bg-background relative isolate inline-grid h-10 min-w-max auto-cols-fr grid-flow-col items-stretch rounded-md border text-center align-top shadow-sm",
-            className,
-          )}
-          value={value}
-          onValueChange={(valueChanged) => {
-            if (valueChanged) {
-              setValue(valueChanged);
-            }
-          }}
-          type="single"
-          {...props}
-          style={
-            {
-              "--offset-left": `${offset.left.toString()}px`,
-              "--offset-top": `${offset.top.toString()}px`,
-              ...props.style,
-            } as React.CSSProperties
-          }
-        >
-          {children}
-          <div
-            className={cn(
-              "pointer-events-none absolute -z-[1] h-full translate-x-[var(--offset-left)] transition-transform",
-              "before:bg-accent before:absolute before:inset-0 before:rounded",
-            )}
-            style={
-              {
-                width: `calc(100% / ${childCount.toString()})`,
-              } as React.CSSProperties
-            }
-          />
-        </ToggleGroupPrimitive.Root>
-      </SegmentedProvider>
-    );
-  },
-);
-
-Segmented.displayName = SEGMENTED_NAME;
-
-/* -----------------------------------------------------------------------------
- * Component: SegmentedItem
- * -------------------------------------------------------------------------- */
-
-const SEGMENTED_ITEM_NAME = "SegmentedItem";
-
-type SegmentedItemElement = React.ElementRef<typeof ToggleGroupPrimitive.Item>;
-type SegmentedItemProps = Omit<
-  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item>,
-  RemovedProps | "disabled" | "type"
-> & {
-  value: string;
-};
-
-const SegmentedItem = React.forwardRef<SegmentedItemElement, SegmentedItemProps>(
-  ({ __scopeSegmented, children, className, onClick, ...props }: ScopedProps<SegmentedItemProps>, ref) => {
-    const { setOffset } = useSegmentedContext(SEGMENTED_ITEM_NAME, __scopeSegmented);
-
-    return (
-      <ToggleGroupPrimitive.Item
-        ref={ref}
-        className={cn(
-          "group flex select-none items-stretch rounded text-sm first:rounded-l-[inherit] [&:nth-last-child(2)]:rounded-r-[inherit]",
-          "hover:bg-accent/30",
-          "group-aria-checked:text-accent-foreground",
-          className,
-        )}
-        onClick={composeEventHandlers(onClick, (event) => {
-          setOffset({
-            left: event.currentTarget.offsetLeft,
-            top: event.currentTarget.offsetTop,
-          });
-        })}
-        {...props}
-      >
-        {/* Separator */}
-        <span
-          className={cn(
-            "bg-border my-1.5 w-px transition",
-            "group-first:opacity-0",
-            "group-[:where([data-state=on])+*]:opacity-0 group-aria-checked:opacity-0",
-            "group-focus-visible:opacity-0 group-[&:focus-visible+*]:opacity-0",
-            "group-[:where([data-state=on])+*]:scale-0 group-aria-checked:scale-0",
-            "group-focus-visible:scale-0 group-[&:focus-visible+*]:scale-0",
-          )}
-        />
-        {/* Label */}
-        <span className="flex grow items-center justify-center gap-2 px-3 py-1 [&_svg]:shrink-0">
-          {/* LabelActive */}
-          <span className="font-medium opacity-0 transition-opacity group-aria-checked:opacity-100">{children}</span>
-          {/* LabelInactive */}
-          <span className="absolute opacity-100 transition-opacity group-aria-checked:opacity-0">{children}</span>
-        </span>
-      </ToggleGroupPrimitive.Item>
-    );
-  },
-);
-
-SegmentedItem.displayName = SEGMENTED_ITEM_NAME;
-
-/* -----------------------------------------------------------------------------
- * Exports
- * -------------------------------------------------------------------------- */
-
-export { Segmented, SegmentedItem, type SegmentedProps, type SegmentedItemProps };