@central-ui/react 0.0.0-stage → 0.1.0

package/dist/components/spinner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/spinner/index.tsx"],"names":[],"mappings":";AAGA;;;;;;;;;GASG;AACH,MAAM,UAAU,OAAO,CAAC,EACtB,YAAY,EACZ,SAAS,EACT,GAAG,KAAK,EACiB;IACzB,OAAO,CACL,eACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,oBACP,iBAAiB,yBACX,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAClD,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,CAAC,KACV,KAAK,aAET,iBAAQ,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,oBAAiB,eAAe,GAAG,EAChE,iBACE,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,CAAC,EAAE,EAAE,EACL,UAAU,EAAE,CAAC,oBACE,mBAAmB,GAClC,EACD,KAAK,CAAC,QAAQ,IACX,CACP,CAAA;AACH,CAAC"}

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

@@ -0,0 +1,49 @@
+import type { StyleProps } from '../../types/Style.ts';
+import type { GroupProps, PanelProps, SeparatorProps } from 'react-resizable-panels';
+import type { ComponentProps, ReactNode } from 'react';
+export { useGroupRef, useGroupCallbackRef, usePanelRef, usePanelCallbackRef, } from 'react-resizable-panels';
+type CoreKeys = 'id' | 'orientation' | 'defaultLayout' | 'disableCursor' | 'disabled' | 'groupRef' | 'onLayoutChange' | 'onLayoutChanged' | 'resizePreviewMode' | 'resizeTargetMinimumSize';
+export type RootProps = Pick<GroupProps, CoreKeys> & {
+    children?: ReactNode;
+};
+/**
+ * Keep ContentList inside Root and alternate Content panels with Separator/Handle between them. Root owns layout and resize behavior; ContentList is the visible group. Give the surrounding layout a usable size.
+ *
+ * @example Complete composition
+ * import { Splitter } from '@central-ui/react'
+ *
+ * function Example() {
+ *   return (
+ *     <div className="h-40 w-full">
+ *       <Splitter.Root orientation="horizontal">
+ *         <Splitter.ContentList>
+ *           <Splitter.Content id="editor" defaultSize="50%" minSize="20%">
+ *             <div className="p-3 text-sm">Editor</div>
+ *           </Splitter.Content>
+ *           <Splitter.Separator aria-label="Resize Editor and Preview">
+ *             <Splitter.Handle />
+ *           </Splitter.Separator>
+ *           <Splitter.Content id="preview" defaultSize="50%" minSize="20%">
+ *             <div className="p-3 text-sm">Preview</div>
+ *           </Splitter.Content>
+ *         </Splitter.ContentList>
+ *       </Splitter.Root>
+ *     </div>
+ *   )
+ * }
+ *
+ * @example Stack panels vertically
+ * // Keep the Content/Separator composition and give the surrounding layout a height.
+ * ;<Splitter.Root orientation="vertical">
+ *   {
+ *     // Rest of components here
+ *   }
+ * </Splitter.Root>
+ */
+export declare function Root({ children, orientation, ...props }: RootProps): import("react").JSX.Element;
+export type ContentListProps = Omit<GroupProps, CoreKeys> & StyleProps;
+export declare function ContentList({ disableStyle, className, ...props }: ContentListProps & StyleProps): import("react").JSX.Element;
+export declare function Content({ disableStyle, className, ...props }: PanelProps & StyleProps): import("react").JSX.Element;
+export declare function Separator({ disableStyle, className, ...props }: SeparatorProps & StyleProps): import("react").JSX.Element;
+export declare function Handle({ disableStyle, className, children, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/splitter/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAMtD,OAAO,KAAK,EACV,UAAU,EACV,UAAU,EACV,cAAc,EACf,MAAM,wBAAwB,CAAA;AAE/B,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItD,OAAO,EACL,WAAW,EACX,mBAAmB,EACnB,WAAW,EACX,mBAAmB,GACpB,MAAM,wBAAwB,CAAA;AAE/B,KAAK,QAAQ,GACT,IAAI,GACJ,aAAa,GACb,eAAe,GACf,eAAe,GACf,UAAU,GACV,UAAU,GACV,gBAAgB,GAChB,iBAAiB,GACjB,mBAAmB,GACnB,yBAAyB,CAAA;AAC7B,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,CAAA;AAE7E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,WAA0B,EAC1B,GAAG,KAAK,EACT,EAAE,SAAS,+BAMX;AACD,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,GAAG,UAAU,CAAA;AACtE,wBAAgB,WAAW,CAAC,EAC1B,YAAY,EACZ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,UAAU,+BAY/B;AACD,wBAAgB,OAAO,CAAC,EACtB,YAAY,EACZ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,UAAU,GAAG,UAAU,+BASzB;AACD,wBAAgB,SAAS,CAAC,EACxB,YAAY,EACZ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,GAAG,UAAU,+BAW7B;AAED,wBAAgB,MAAM,CAAC,EACrB,YAAY,EACZ,SAAS,EACT,QAMC,EACD,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG,UAAU,+BAapC"}

package/dist/components/splitter/index.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Group as ResizableGroup, Panel as ResizablePanel, Separator as ResizableSeparator, } from 'react-resizable-panels';
+import { createContext, useContext } from 'react';
+import { GripVertical } from 'lucide-react';
+export { useGroupRef, useGroupCallbackRef, usePanelRef, usePanelCallbackRef, } from 'react-resizable-panels';
+// Only configuration lives here. ContentList renders the measured native Group.
+/**
+ * Keep ContentList inside Root and alternate Content panels with Separator/Handle between them. Root owns layout and resize behavior; ContentList is the visible group. Give the surrounding layout a usable size.
+ *
+ * @example Complete composition
+ * import { Splitter } from '@central-ui/react'
+ *
+ * function Example() {
+ *   return (
+ *     <div className="h-40 w-full">
+ *       <Splitter.Root orientation="horizontal">
+ *         <Splitter.ContentList>
+ *           <Splitter.Content id="editor" defaultSize="50%" minSize="20%">
+ *             <div className="p-3 text-sm">Editor</div>
+ *           </Splitter.Content>
+ *           <Splitter.Separator aria-label="Resize Editor and Preview">
+ *             <Splitter.Handle />
+ *           </Splitter.Separator>
+ *           <Splitter.Content id="preview" defaultSize="50%" minSize="20%">
+ *             <div className="p-3 text-sm">Preview</div>
+ *           </Splitter.Content>
+ *         </Splitter.ContentList>
+ *       </Splitter.Root>
+ *     </div>
+ *   )
+ * }
+ *
+ * @example Stack panels vertically
+ * // Keep the Content/Separator composition and give the surrounding layout a height.
+ * ;<Splitter.Root orientation="vertical">
+ *   {
+ *     // Rest of components here
+ *   }
+ * </Splitter.Root>
+ */
+export function Root({ children, orientation = 'horizontal', ...props }) {
+    return (_jsx(SplitterContext.Provider, { value: { ...props, orientation }, children: children }));
+}
+export function ContentList({ disableStyle, className, ...props }) {
+    const context = useSplitterContext();
+    return (_jsx(ResizableGroup, { ...props, ...context, "data-orientation": context.orientation, "data-component": "splitter-contentlist", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+}
+export function Content({ disableStyle, className, ...props }) {
+    return (_jsx(ResizablePanel, { ...props, "data-component": "splitter-content", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+}
+export function Separator({ disableStyle, className, ...props }) {
+    const { orientation } = useSplitterContext();
+    return (_jsx(ResizableSeparator, { ...props, "data-orientation": orientation, "data-component": "splitter-separator", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+}
+// Native Separator explicitly supports children for a custom grip; all resize behavior stays native.
+export function Handle({ disableStyle, className, children = (_jsx(GripVertical, { "data-component": "splitter-handle-1", strokeWidth: 2, "aria-hidden": true })), ...props }) {
+    const { orientation } = useSplitterContext();
+    return (_jsx("div", { ...props, "data-orientation": orientation, "data-component": "splitter-handle", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: children }));
+}
+const SplitterContext = createContext(null);
+function useSplitterContext() {
+    const context = useContext(SplitterContext);
+    if (!context)
+        throw new Error('Splitter parts must be inside Splitter.Root');
+    return context;
+}
+//# sourceMappingURL=index.js.map

package/dist/components/splitter/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/splitter/index.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,KAAK,IAAI,cAAc,EACvB,KAAK,IAAI,cAAc,EACvB,SAAS,IAAI,kBAAkB,GAChC,MAAM,wBAAwB,CAAA;AAM/B,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEjD,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAG3C,OAAO,EACL,WAAW,EACX,mBAAmB,EACnB,WAAW,EACX,mBAAmB,GACpB,MAAM,wBAAwB,CAAA;AAc/B,gFAAgF;AAChF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,UAAU,IAAI,CAAC,EACnB,QAAQ,EACR,WAAW,GAAG,YAAY,EAC1B,GAAG,KAAK,EACE;IACV,OAAO,CACL,KAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,WAAW,EAAE,YACvD,QAAQ,GACgB,CAC5B,CAAA;AACH,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,EAC1B,YAAY,EACZ,SAAS,EACT,GAAG,KAAK,EACsB;IAC9B,MAAM,OAAO,GAAG,kBAAkB,EAAE,CAAA;IACpC,OAAO,CACL,KAAC,cAAc,OACT,KAAK,KACL,OAAO,sBACO,OAAO,CAAC,WAAW,oBACtB,sBAAsB,yBAChB,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAClD,SAAS,EAAE,SAAS,GACpB,CACH,CAAA;AACH,CAAC;AACD,MAAM,UAAU,OAAO,CAAC,EACtB,YAAY,EACZ,SAAS,EACT,GAAG,KAAK,EACgB;IACxB,OAAO,CACL,KAAC,cAAc,OACT,KAAK,oBACM,kBAAkB,yBACZ,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAClD,SAAS,EAAE,SAAS,GACpB,CACH,CAAA;AACH,CAAC;AACD,MAAM,UAAU,SAAS,CAAC,EACxB,YAAY,EACZ,SAAS,EACT,GAAG,KAAK,EACoB;IAC5B,MAAM,EAAE,WAAW,EAAE,GAAG,kBAAkB,EAAE,CAAA;IAC5C,OAAO,CACL,KAAC,kBAAkB,OACb,KAAK,sBACS,WAAW,oBACd,oBAAoB,yBACd,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAClD,SAAS,EAAE,SAAS,GACpB,CACH,CAAA;AACH,CAAC;AACD,qGAAqG;AACrG,MAAM,UAAU,MAAM,CAAC,EACrB,YAAY,EACZ,SAAS,EACT,QAAQ,GAAG,CACT,KAAC,YAAY,sBACI,mBAAmB,EAClC,WAAW,EAAE,CAAC,wBAEd,CACH,EACD,GAAG,KAAK,EAC2B;IACnC,MAAM,EAAE,WAAW,EAAE,GAAG,kBAAkB,EAAE,CAAA;IAC5C,OAAO,CACL,iBACM,KAAK,sBACS,WAAW,oBACd,iBAAiB,yBACX,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAClD,SAAS,EAAE,SAAS,YAEnB,QAAQ,GACL,CACP,CAAA;AACH,CAAC;AAED,MAAM,eAAe,GAAG,aAAa,CAAqC,IAAI,CAAC,CAAA;AAC/E,SAAS,kBAAkB;IACzB,MAAM,OAAO,GAAG,UAAU,CAAC,eAAe,CAAC,CAAA;IAC3C,IAAI,CAAC,OAAO;QAAE,MAAM,IAAI,KAAK,CAAC,6CAA6C,CAAC,CAAA;IAC5E,OAAO,OAAO,CAAA;AAChB,CAAC"}

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

@@ -0,0 +1,82 @@
+import type { StyleProps } from '../../types/Style.ts';
+import type { UseStepsProps } from '@ark-ui/react/steps';
+import { Steps } from '@ark-ui/react/steps';
+import type { ReactElement } from 'react';
+export declare function useSteps(props: UseStepsProps): import("@ark-ui/react/steps").UseStepsReturn;
+export { useStepsContext } from '@ark-ui/react/steps';
+export { useStepsItemContext } from '@ark-ui/react/steps';
+/**
+ * Root owns the active step. Keep each Item in List with its index, and match Content indices to those items. NextHandler/PreviousHandler supply navigation to your buttons. Indicator reflects progress automatically; CompletedContent is shown after the last step.
+ *
+ * @example Complete composition
+ * import { Button, Stepper } from '@central-ui/react'
+ *
+ * function Example() {
+ *   return (
+ *     <Stepper.Root count={2} defaultStep={0}>
+ *       <div className="flex items-start gap-4">
+ *         <Stepper.List className="w-32 shrink-0">
+ *           <Stepper.Item index={0}>
+ *             <Stepper.OpenButton>
+ *               <Stepper.Indicator />
+ *               Details
+ *             </Stepper.OpenButton>
+ *             <Stepper.Separator />
+ *           </Stepper.Item>
+ *           <Stepper.Item index={1}>
+ *             <Stepper.OpenButton>
+ *               <Stepper.Indicator />
+ *               Review
+ *             </Stepper.OpenButton>
+ *           </Stepper.Item>
+ *         </Stepper.List>
+ *         <div className="w-full flex flex-col gap-3">
+ *           <Stepper.Content index={0}>Set your basics.</Stepper.Content>
+ *           <Stepper.Content index={1}>Check everything.</Stepper.Content>
+ *           <Stepper.CompletedContent>Done.</Stepper.CompletedContent>
+ *           <div className="flex gap-2">
+ *             <Stepper.PreviousHandler>
+ *               <Button.default variant="secondary" size="small">
+ *                 Previous
+ *               </Button.default>
+ *             </Stepper.PreviousHandler>
+ *             <Stepper.NextHandler>
+ *               <Button.default variant="primary" size="small">
+ *                 Next
+ *               </Button.default>
+ *             </Stepper.NextHandler>
+ *           </div>
+ *         </div>
+ *       </div>
+ *     </Stepper.Root>
+ *   )
+ * }
+ *
+ * @example Show the steps horizontally
+ * // Keep the same indexed Item and Content pairs.
+ * ;<Stepper.Root count={2} orientation="horizontal">
+ *   {
+ *     // Rest of components here
+ *   }
+ * </Stepper.Root>
+ */
+export declare function Root({ children, className, orientation, ...props }: Omit<Steps.RootProps, 'asChild'>): import("react").JSX.Element;
+/** Behavior only: give your child control this action. Style the child itself; this wrapper has no preset appearance or disableStyle prop. */
+export declare function NextHandler({ children, ...props }: Omit<Steps.NextTriggerProps, 'asChild' | 'children'> & {
+    /** Supply your own accessible control. It receives the behavior; its own className owns the appearance. */
+    children: ReactElement;
+}): import("react").JSX.Element;
+/** Behavior only: give your child control this action. Style the child itself; this wrapper has no preset appearance or disableStyle prop. */
+export declare function PreviousHandler({ children, ...props }: Omit<Steps.PrevTriggerProps, 'asChild' | 'children'> & {
+    /** Supply your own accessible control. It receives the behavior; its own className owns the appearance. */
+    children: ReactElement;
+}): import("react").JSX.Element;
+export declare function List({ disableStyle, className, ...props }: Steps.ListProps & StyleProps): import("react").JSX.Element;
+export declare function Item({ disableStyle, className, ...props }: Steps.ItemProps & StyleProps): import("react").JSX.Element;
+/** Tracks the surrounding item state automatically. Keep it mounted; do not add your own visibility condition. Use the supplied default visual unless customization is needed. */
+export declare function Indicator({ disableStyle, className, ...props }: Omit<Steps.IndicatorProps, 'children'> & StyleProps): import("react").JSX.Element;
+export declare function Separator({ disableStyle, className, ...props }: Steps.SeparatorProps & StyleProps): import("react").JSX.Element;
+export declare function Content({ disableStyle, className, ...props }: Steps.ContentProps & StyleProps): import("react").JSX.Element;
+export declare function CompletedContent({ disableStyle, className, ...props }: Steps.CompletedContentProps & StyleProps): import("react").JSX.Element;
+export declare function OpenButton({ disableStyle, className, ...props }: Steps.TriggerProps & StyleProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/stepper/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AACxD,OAAO,EAAE,KAAK,EAA2B,MAAM,qBAAqB,CAAA;AAEpE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAIzC,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,gDAE5C;AAGD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAGrD,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAEzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,WAAwB,EACxB,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,CAAC,+BAMlC;AAED,8IAA8I;AAC9I,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE,SAAS,GAAG,UAAU,CAAC,GAAG;IACxD,2GAA2G;IAC3G,QAAQ,EAAE,YAAY,CAAA;CACvB,+BAMA;AAED,8IAA8I;AAC9I,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE,SAAS,GAAG,UAAU,CAAC,GAAG;IACxD,2GAA2G;IAC3G,QAAQ,EAAE,YAAY,CAAA;CACvB,+BAMA;AAED,wBAAgB,IAAI,CAAC,EACnB,YAAY,EACZ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,SAAS,GAAG,UAAU,+BAS9B;AAED,wBAAgB,IAAI,CAAC,EACnB,YAAY,EACZ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,SAAS,GAAG,UAAU,+BAS9B;AAED,kLAAkL;AAClL,wBAAgB,SAAS,CAAC,EACxB,YAAY,EACZ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,UAAU,CAAC,GAAG,UAAU,+BAoBrD;AAED,wBAAgB,SAAS,CAAC,EACxB,YAAY,EACZ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,GAAG,UAAU,+BASnC;AAED,wBAAgB,OAAO,CAAC,EACtB,YAAY,EACZ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,YAAY,GAAG,UAAU,+BASjC;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,YAAY,EACZ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,qBAAqB,GAAG,UAAU,+BAS1C;AAED,wBAAgB,UAAU,CAAC,EACzB,YAAY,EACZ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,YAAY,GAAG,UAAU,+BASjC"}

package/dist/components/stepper/index.js

@@ -0,0 +1,100 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { Steps, useSteps as useArkSteps } from '@ark-ui/react/steps';
+import { Check } from 'lucide-react';
+// Creates a controlled steps state machine for RootProvider.
+export function useSteps(props) {
+    return useArkSteps({ orientation: 'vertical', ...props });
+}
+// Reads the state of the nearest Steps root.
+export { useStepsContext } from '@ark-ui/react/steps';
+// Reads the state of the nearest Steps item.
+export { useStepsItemContext } from '@ark-ui/react/steps';
+/**
+ * Root owns the active step. Keep each Item in List with its index, and match Content indices to those items. NextHandler/PreviousHandler supply navigation to your buttons. Indicator reflects progress automatically; CompletedContent is shown after the last step.
+ *
+ * @example Complete composition
+ * import { Button, Stepper } from '@central-ui/react'
+ *
+ * function Example() {
+ *   return (
+ *     <Stepper.Root count={2} defaultStep={0}>
+ *       <div className="flex items-start gap-4">
+ *         <Stepper.List className="w-32 shrink-0">
+ *           <Stepper.Item index={0}>
+ *             <Stepper.OpenButton>
+ *               <Stepper.Indicator />
+ *               Details
+ *             </Stepper.OpenButton>
+ *             <Stepper.Separator />
+ *           </Stepper.Item>
+ *           <Stepper.Item index={1}>
+ *             <Stepper.OpenButton>
+ *               <Stepper.Indicator />
+ *               Review
+ *             </Stepper.OpenButton>
+ *           </Stepper.Item>
+ *         </Stepper.List>
+ *         <div className="w-full flex flex-col gap-3">
+ *           <Stepper.Content index={0}>Set your basics.</Stepper.Content>
+ *           <Stepper.Content index={1}>Check everything.</Stepper.Content>
+ *           <Stepper.CompletedContent>Done.</Stepper.CompletedContent>
+ *           <div className="flex gap-2">
+ *             <Stepper.PreviousHandler>
+ *               <Button.default variant="secondary" size="small">
+ *                 Previous
+ *               </Button.default>
+ *             </Stepper.PreviousHandler>
+ *             <Stepper.NextHandler>
+ *               <Button.default variant="primary" size="small">
+ *                 Next
+ *               </Button.default>
+ *             </Stepper.NextHandler>
+ *           </div>
+ *         </div>
+ *       </div>
+ *     </Stepper.Root>
+ *   )
+ * }
+ *
+ * @example Show the steps horizontally
+ * // Keep the same indexed Item and Content pairs.
+ * ;<Stepper.Root count={2} orientation="horizontal">
+ *   {
+ *     // Rest of components here
+ *   }
+ * </Stepper.Root>
+ */
+export function Root({ children, className, orientation = 'vertical', ...props }) {
+    return (_jsx(Steps.Root, { ...props, orientation: orientation, asChild: true, children: _jsx(_Fragment, { children: children }) }));
+}
+/** Behavior only: give your child control this action. Style the child itself; this wrapper has no preset appearance or disableStyle prop. */
+export function NextHandler({ children, ...props }) {
+    return (_jsx(Steps.NextTrigger, { ...props, asChild: true, children: children }));
+}
+/** Behavior only: give your child control this action. Style the child itself; this wrapper has no preset appearance or disableStyle prop. */
+export function PreviousHandler({ children, ...props }) {
+    return (_jsx(Steps.PrevTrigger, { ...props, asChild: true, children: children }));
+}
+export function List({ disableStyle, className, ...props }) {
+    return (_jsx(Steps.List, { "data-component": "stepper-list", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props }));
+}
+export function Item({ disableStyle, className, ...props }) {
+    return (_jsx(Steps.Item, { "data-component": "stepper-item", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props }));
+}
+/** Tracks the surrounding item state automatically. Keep it mounted; do not add your own visibility condition. Use the supplied default visual unless customization is needed. */
+export function Indicator({ disableStyle, className, ...props }) {
+    return (_jsx(Steps.ItemContext, { children: (step) => (_jsx(Steps.Indicator, { "data-component": "stepper-indicator", "data-style-disabled": disableStyle ? '' : undefined, "data-completed": step.completed ? '' : undefined, className: className, ...props, children: step.completed ? (_jsx(Check, { "data-component": "stepper-indicator-1", strokeWidth: 2.5 })) : (_jsx("span", { "data-component": "stepper-indicator-2" })) })) }));
+}
+export function Separator({ disableStyle, className, ...props }) {
+    return (_jsx(Steps.Separator, { "data-component": "stepper-separator", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props }));
+}
+export function Content({ disableStyle, className, ...props }) {
+    return (_jsx(Steps.Content, { "data-component": "stepper-content", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props }));
+}
+export function CompletedContent({ disableStyle, className, ...props }) {
+    return (_jsx(Steps.CompletedContent, { "data-component": "stepper-completedcontent", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props }));
+}
+export function OpenButton({ disableStyle, className, ...props }) {
+    return (_jsx(Steps.Trigger, { "data-component": "stepper-openbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props }));
+}
+//# sourceMappingURL=index.js.map

package/dist/components/stepper/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/stepper/index.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,57 @@
+import type { StyleProps } from '../../types/Style.ts';
+import { Switch as BaseSwitch } from '@base-ui/react/switch';
+import type { ReactNode } from 'react';
+type CoreKeys = 'checked' | 'defaultChecked' | 'onCheckedChange' | 'disabled' | 'readOnly' | 'required' | 'name' | 'value' | 'uncheckedValue' | 'form' | 'id' | 'inputRef';
+export type RootProps = Pick<BaseSwitch.Root.Props, CoreKeys> & {
+    children: ReactNode;
+    /** Choose the visual tone. This does not validate data or show/hide feedback messages. */
+    tone?: 'neutral' | 'valid' | 'invalid';
+};
+/**
+ * Keep Button, Indicator, and Label in the same Root. Indicator follows the checked state automatically; do not add a second boolean just for its position.
+ *
+ * @example Complete composition
+ * import { Switch } from '@central-ui/react'
+ *
+ * function Example() {
+ *   return (
+ *     <Switch.Root name="notifications">
+ *       <Switch.Container>
+ *         <Switch.Button>
+ *           <Switch.Indicator />
+ *         </Switch.Button>
+ *         <Switch.Label>Email notifications</Switch.Label>
+ *         <Switch.Description>Receive updates about your account.</Switch.Description>
+ *       </Switch.Container>
+ *     </Switch.Root>
+ *   )
+ * }
+ *
+ * @example Enable the setting initially
+ * // The same Indicator follows the initial checked state automatically.
+ * ;<Switch.Root defaultChecked name="notifications">
+ *   <Switch.Container>
+ *     {
+ *       // Rest of components here
+ *     }
+ *   </Switch.Container>
+ * </Switch.Root>
+ */
+export declare function Root({ children, tone, checked, defaultChecked, onCheckedChange, id, ...props }: RootProps): import("react").JSX.Element;
+export declare const Container: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Button: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SwitchRootProps, "className" | "render" | "nativeButton" | CoreKeys> & {
+    className?: string;
+} & StyleProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+/** Tracks the surrounding item state automatically. Keep it mounted; do not add your own visibility condition. Use the supplied default visual unless customization is needed. */
+export declare const Indicator: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SwitchThumbProps, "className"> & {
+    className?: string;
+} & StyleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+/** Labels the associated control automatically. Supply the visible text; do not wire a second label association. */
+export declare const Label: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "htmlFor"> & StyleProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+export declare const Description: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
+export declare const Error: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
+export declare const Success: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/switch/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACtD,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAS5D,OAAO,KAAK,EAAkB,SAAS,EAA4B,MAAM,OAAO,CAAA;AAIhF,KAAK,QAAQ,GACT,SAAS,GACT,gBAAgB,GAChB,iBAAiB,GACjB,UAAU,GACV,UAAU,GACV,UAAU,GACV,MAAM,GACN,OAAO,GACP,gBAAgB,GAChB,MAAM,GACN,IAAI,GACJ,UAAU,CAAA;AACd,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG;IAC9D,QAAQ,EAAE,SAAS,CAAA;IACnB,0FAA0F;IAC1F,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,CAAA;CACvC,CAAA;AACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,IAAgB,EAChB,OAAO,EACP,cAAsB,EACtB,eAAe,EACf,EAAE,EACF,GAAG,KAAK,EACT,EAAE,SAAS,+BAsBX;AACD,eAAO,MAAM,SAAS,uNAapB,CAAA;AAEF,eAAO,MAAM,MAAM;gBAKC,MAAM;oEAqBxB,CAAA;AACF,kLAAkL;AAClL,eAAO,MAAM,SAAS;gBAEuC,MAAM;wEAYjE,CAAA;AAEF,oHAAoH;AACpH,eAAO,MAAM,KAAK,oPAgBhB,CAAA;AACF,eAAO,MAAM,WAAW,uNAetB,CAAA;AAEF,iHAAiH;AACjH,eAAO,MAAM,KAAK,uNAiBhB,CAAA;AAEF,iHAAiH;AACjH,eAAO,MAAM,OAAO,uNAiBlB,CAAA"}

package/dist/components/switch/index.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Switch as BaseSwitch } from '@base-ui/react/switch';
+import { createContext, forwardRef, useContext, useEffect, useId, useState, } from 'react';
+import { ToneProvider, useToneContext } from "../../utils/Tone.js";
+/**
+ * Keep Button, Indicator, and Label in the same Root. Indicator follows the checked state automatically; do not add a second boolean just for its position.
+ *
+ * @example Complete composition
+ * import { Switch } from '@central-ui/react'
+ *
+ * function Example() {
+ *   return (
+ *     <Switch.Root name="notifications">
+ *       <Switch.Container>
+ *         <Switch.Button>
+ *           <Switch.Indicator />
+ *         </Switch.Button>
+ *         <Switch.Label>Email notifications</Switch.Label>
+ *         <Switch.Description>Receive updates about your account.</Switch.Description>
+ *       </Switch.Container>
+ *     </Switch.Root>
+ *   )
+ * }
+ *
+ * @example Enable the setting initially
+ * // The same Indicator follows the initial checked state automatically.
+ * ;<Switch.Root defaultChecked name="notifications">
+ *   <Switch.Container>
+ *     {
+ *       // Rest of components here
+ *     }
+ *   </Switch.Container>
+ * </Switch.Root>
+ */
+export function Root({ children, tone = 'neutral', checked, defaultChecked = false, onCheckedChange, id, ...props }) {
+    const generatedId = useId();
+    const [messageIds, setMessageIds] = useState([]);
+    const [checkedInternalState, setCheckedInternalState] = useState(defaultChecked);
+    return (_jsx(SwitchContext.Provider, { value: {
+            messageIds,
+            setMessageIds,
+            ...props,
+            id: id ?? generatedId,
+            checked: checked ?? checkedInternalState,
+            onCheckedChange: (next, details) => {
+                onCheckedChange?.(next, details);
+                if (!details.isCanceled)
+                    setCheckedInternalState(next);
+            },
+        }, children: _jsx(ToneProvider, { value: tone, children: children }) }));
+}
+export const Container = forwardRef(function Container({ disableStyle, className, ...props }, ref) {
+    return (_jsx("div", { ...props, ref: ref, "data-component": "switch-container", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+});
+export const Button = forwardRef(function Button({ disableStyle, className, ...props }, ref) {
+    const { messageIds, setMessageIds, ...context } = useSwitchContext();
+    const tone = useToneContext();
+    return (_jsx(BaseSwitch.Root, { ...props, ...context, "aria-invalid": tone === 'invalid' || props['aria-invalid'] || undefined, "aria-describedby": [props['aria-describedby'], ...messageIds].filter(Boolean).join(' ') ||
+            undefined, ref: ref, "data-tone": tone, "data-component": "switch-button", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+});
+/** Tracks the surrounding item state automatically. Keep it mounted; do not add your own visibility condition. Use the supplied default visual unless customization is needed. */
+export const Indicator = forwardRef(function Indicator({ disableStyle, className, ...props }, ref) {
+    return (_jsx(BaseSwitch.Thumb, { ...props, ref: ref, "data-component": "switch-indicator", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+});
+/** Labels the associated control automatically. Supply the visible text; do not wire a second label association. */
+export const Label = forwardRef(function Label({ disableStyle, className, ...props }, ref) {
+    const context = useSwitchContext();
+    return (_jsx("label", { ...props, ref: ref, htmlFor: context.id, "data-disabled": context.disabled ? '' : undefined, "data-component": "switch-label", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+});
+export const Description = forwardRef(function Description({ disableStyle, className, id, ...props }, ref) {
+    const messageId = useMessageId(id);
+    return (_jsx("div", { id: messageId, ...props, ref: ref, "data-component": "switch-description", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+});
+/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
+export const Error = forwardRef(function Error({ disableStyle, className, id, ...props }, ref) {
+    const messageId = useMessageId(id);
+    return (_jsx("div", { id: messageId, ...props, ref: ref, role: "alert", "aria-atomic": "true", "data-component": "switch-error", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+});
+/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
+export const Success = forwardRef(function Success({ disableStyle, className, id, ...props }, ref) {
+    const messageId = useMessageId(id);
+    return (_jsx("div", { id: messageId, ...props, ref: ref, role: "status", "aria-atomic": "true", "data-component": "switch-success", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+});
+const SwitchContext = createContext(null);
+function useSwitchContext() {
+    const context = useContext(SwitchContext);
+    if (!context)
+        throw new globalThis.Error('Switch parts must be inside Switch.Root');
+    return context;
+}
+function useMessageId(id) {
+    const generatedId = useId();
+    const messageId = id ?? generatedId;
+    const { setMessageIds } = useSwitchContext();
+    useEffect(() => {
+        setMessageIds((current) => [...current, messageId]);
+        return () => setMessageIds((current) => current.filter((value) => value !== messageId));
+    }, [messageId, setMessageIds]);
+    return messageId;
+}
+//# sourceMappingURL=index.js.map

package/dist/components/switch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/switch/index.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,110 @@
+import type { StyleProps } from '../../types/Style.ts';
+import type { ComponentProps, HTMLAttributes, ImgHTMLAttributes, ReactElement, ReactNode } from 'react';
+type Pinning = 'first' | 'last';
+/**
+ * Use Root → Surface → ScrollArea → Table for the scrolling table composition. Render your own data rows. Empty is manually controlled; the table does not inspect data to show it. Set pinning on Root when an edge column should remain visible while scrolling.
+ *
+ * To virtualize, import useVirtualizedTable from '@central-ui/react'.
+ * See the hook's types and documentation for configuration and integration examples.
+ *
+ * @example Complete composition
+ * import { Table } from '@central-ui/react'
+ *
+ * const orders = [
+ *   {
+ *     customer: 'Alex Morgan',
+ *     number: '#1048',
+ *     status: 'Paid',
+ *     channel: 'Online',
+ *     region: 'North',
+ *     date: 'Sep 28',
+ *     total: '$248.00',
+ *   },
+ *   {
+ *     customer: 'Sam Lee',
+ *     number: '#1049',
+ *     status: 'Pending',
+ *     channel: 'Retail',
+ *     region: 'West',
+ *     date: 'Sep 29',
+ *     total: '$86.00',
+ *   },
+ *   {
+ *     customer: 'Taylor Reed',
+ *     number: '#1050',
+ *     status: 'Paid',
+ *     channel: 'Online',
+ *     region: 'East',
+ *     date: 'Sep 30',
+ *     total: '$139.00',
+ *   },
+ * ]
+ * function Example() {
+ *   return (
+ *     <Table.Root>
+ *       <Table.Surface>
+ *         <Table.ScrollArea>
+ *           <Table.Table>
+ *             <Table.Head>
+ *               <Table.Row>
+ *                 <Table.HeadCell>Customer</Table.HeadCell>
+ *                 <Table.HeadCell>Status</Table.HeadCell>
+ *                 <Table.HeadCell>Total</Table.HeadCell>
+ *               </Table.Row>
+ *             </Table.Head>
+ *             <Table.Body>
+ *               {orders.map((order) => (
+ *                 <Table.Row key={order.number}>
+ *                   <Table.Cell>{order.customer}</Table.Cell>
+ *                   <Table.Cell>{order.status}</Table.Cell>
+ *                   <Table.Cell>{order.total}</Table.Cell>
+ *                 </Table.Row>
+ *               ))}
+ *             </Table.Body>
+ *           </Table.Table>
+ *         </Table.ScrollArea>
+ *       </Table.Surface>
+ *     </Table.Root>
+ *   )
+ * }
+ *
+ * @example Keep the first column visible during scrolling
+ * // Keep the same Surface/ScrollArea/Table composition; no sticky classes needed on cells.
+ * ;<Table.Root pinning="first">
+ *   <Table.Surface>
+ *     {
+ *       // Rest of components here
+ *     }
+ *   </Table.Surface>
+ * </Table.Root>
+ */
+export declare function Root({ pinning, children, }: {
+    /** Keep the requested edge column visible while scrolling. Cells receive the current pinning state automatically. */
+    pinning?: Pinning;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function Surface({ disableStyle, className, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+export declare function SurfaceHeader({ disableStyle, className, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+export declare function SurfaceFooter({ disableStyle, className, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+export declare function ScrollArea({ disableStyle, className, onScroll, style, ...props }: Omit<ComponentProps<'div'>, 'ref'> & StyleProps): import("react").JSX.Element;
+export declare function Table({ disableStyle, className, ...props }: ComponentProps<'table'> & StyleProps): import("react").JSX.Element;
+export declare function ColGroup({ disableStyle, className, ...props }: ComponentProps<'colgroup'> & StyleProps): import("react").JSX.Element;
+export declare function Col({ disableStyle, className, ...props }: ComponentProps<'col'> & StyleProps): import("react").JSX.Element;
+export declare function Head({ disableStyle, className, ...props }: ComponentProps<'thead'> & StyleProps): import("react").JSX.Element;
+export declare const Body: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLTableSectionElement> & HTMLAttributes<HTMLTableSectionElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;
+export declare const Row: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLTableRowElement> & HTMLAttributes<HTMLTableRowElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLTableRowElement>>;
+export declare function HeadCell({ disableStyle, className, ...props }: ComponentProps<'th'> & StyleProps): import("react").JSX.Element;
+export declare function Cell({ disableStyle, className, ...props }: ComponentProps<'td'> & StyleProps): import("react").JSX.Element;
+export declare function Empty({ disableStyle, className, children, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+export declare function EmptyBody({ disableStyle, className, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+export declare function EmptyTitle({ disableStyle, className, ...props }: HTMLAttributes<HTMLParagraphElement> & StyleProps): import("react").JSX.Element;
+export declare function EmptyDescription({ disableStyle, className, ...props }: ComponentProps<'p'> & StyleProps): import("react").JSX.Element;
+export declare function EmptyImage({ disableStyle, className, ...props }: ImgHTMLAttributes<HTMLImageElement> & StyleProps): import("react").JSX.Element;
+/** Supply the decorative icon as a child. Its classes are preserved; interaction belongs to the surrounding control. */
+export declare function EmptyIcon({ disableStyle, children, className, ...props }: (Omit<ComponentProps<'svg'>, 'children'> & {
+    /** Supply the decorative icon; the wrapper forwards the relevant state and preserves its classes. */
+    children: ReactElement<ComponentProps<'svg'>>;
+}) & StyleProps): ReactElement<import("react").SVGProps<SVGSVGElement>, string | import("react").JSXElementConstructor<any>>;
+export declare function EmptyActionsList({ disableStyle, className, children, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/table/index.tsx"],"names":[],"mappings":"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"}