prime-ui-kit 0.7.13 → 0.9.1

package/src/components/select/examples/pattern-controlled.tsx

@@ -1,29 +0,0 @@
-import * as React from "react";
-
-import { Select } from "@/components/select/Select";
-import { Typography } from "@/components/typography/Typography";
-
-import styles from "./examples.module.css";
-
-/** Controlled `value` / `onChange`; mirrors `playground/snippets/select/controlled.tsx`. */
-export default function SelectPatternControlledExample() {
-  const [tier, setTier] = React.useState("pro");
-
-  return (
-    <div className={`${styles.stack} ${styles.stackNarrow}`}>
-      <Select.Root value={tier} onChange={setTier} placeholder="Tier">
-        <Select.Trigger aria-label="Subscription tier">
-          <Select.Value />
-        </Select.Trigger>
-        <Select.Content>
-          <Select.Item value="free">Free</Select.Item>
-          <Select.Item value="pro">Pro</Select.Item>
-          <Select.Item value="team">Team</Select.Item>
-        </Select.Content>
-      </Select.Root>
-      <Typography.Root as="p" variant="caption" tone="muted" className={styles.caption}>
-        Current value in parent state: <code>{tier}</code>
-      </Typography.Root>
-    </div>
-  );
-}

package/src/components/select/examples/pattern-features.tsx

@@ -1,33 +0,0 @@
-import { Select } from "@/components/select/Select";
-
-const ZONES = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "K"] as const;
-
-/** Groups, labels, separator, disabled item, long scrollable list; mirrors `playground/snippets/select/features.tsx`. */
-export default function SelectPatternFeaturesExample() {
-  return (
-    <Select.Root placeholder="Zones and groups">
-      <Select.Trigger>
-        <Select.Value />
-      </Select.Trigger>
-      <Select.Content>
-        <Select.Group>
-          <Select.GroupLabel>Available now</Select.GroupLabel>
-          <Select.Item value="east-1">East — node 1</Select.Item>
-          <Select.Item value="east-2">East — node 2</Select.Item>
-        </Select.Group>
-        <Select.Separator />
-        <Select.Group>
-          <Select.GroupLabel>Planned</Select.GroupLabel>
-          <Select.Item value="west-1" disabled>
-            West — node 1 (reserved)
-          </Select.Item>
-          {ZONES.map((z, i) => (
-            <Select.Item key={z} value={`zone-${i}`}>
-              Reserve {z}
-            </Select.Item>
-          ))}
-        </Select.Group>
-      </Select.Content>
-    </Select.Root>
-  );
-}

package/src/components/select/examples/pattern-full-width.tsx

@@ -1,21 +0,0 @@
-import { Select } from "@/components/select/Select";
-
-import styles from "./examples.module.css";
-
-/** Narrow column shows trigger `width: 100%`; mirrors `playground/snippets/select/full-width.tsx`. */
-export default function SelectPatternFullWidthExample() {
-  return (
-    <div className={styles.fullWidthShell}>
-      <Select.Root defaultValue="ship" placeholder="Shipping method">
-        <Select.Trigger>
-          <Select.Value />
-        </Select.Trigger>
-        <Select.Content>
-          <Select.Item value="pickup">Pickup</Select.Item>
-          <Select.Item value="ship">Courier</Select.Item>
-          <Select.Item value="post">Post</Select.Item>
-        </Select.Content>
-      </Select.Root>
-    </div>
-  );
-}

package/src/components/select/examples/pattern-multiple.tsx

@@ -1,30 +0,0 @@
-import * as React from "react";
-
-import { Select } from "@/components/select/Select";
-import { Typography } from "@/components/typography/Typography";
-
-import styles from "./examples.module.css";
-
-/** Controlled multiselect; mirrors `playground/snippets/select/multiple.tsx` (English labels). */
-export default function SelectPatternMultipleExample() {
-  const [value, setValue] = React.useState<string[]>(["eng"]);
-
-  return (
-    <div className={`${styles.stack} ${styles.stackNarrow}`}>
-      <Select.Root multiple value={value} onChange={setValue} placeholder="Choose departments">
-        <Select.Trigger aria-label="Departments">
-          <Select.Value />
-        </Select.Trigger>
-        <Select.Content>
-          <Select.Item value="eng">Engineering</Select.Item>
-          <Select.Item value="design">Design</Select.Item>
-          <Select.Item value="sales">Sales</Select.Item>
-          <Select.Item value="hr">HR</Select.Item>
-        </Select.Content>
-      </Select.Root>
-      <Typography.Root as="p" variant="caption" tone="muted" className={styles.caption}>
-        Selected: <code>{value.length ? value.join(", ") : "—"}</code>
-      </Typography.Root>
-    </div>
-  );
-}

package/src/components/select/examples/pattern-native.tsx

@@ -1,14 +0,0 @@
-import { Select } from "@/components/select/Select";
-
-/** Native `<select>` via `native`; optional `Select.Content` wrapper; mirrors `playground/snippets/select/native.tsx`. */
-export default function SelectPatternNativeExample() {
-  return (
-    <Select.Root native placeholder="Mode">
-      <Select.Content>
-        <Select.Item value="auto">Auto</Select.Item>
-        <Select.Item value="light">Light</Select.Item>
-        <Select.Item value="dark">Dark</Select.Item>
-      </Select.Content>
-    </Select.Root>
-  );
-}

package/src/components/select/examples/pattern-sizes.tsx

@@ -1,51 +0,0 @@
-import { Select } from "@/components/select/Select";
-
-import styles from "./examples.module.css";
-
-/** `size` ladder `s`–`xl`; mirrors `playground/snippets/select/sizes.tsx`. */
-export default function SelectPatternSizesExample() {
-  return (
-    <div className={`${styles.stack} ${styles.stackNarrow}`}>
-      <Select.Root size="s" placeholder="Size s">
-        <Select.Trigger>
-          <Select.Value />
-        </Select.Trigger>
-        <Select.Content>
-          <Select.Item value="a">A</Select.Item>
-          <Select.Item value="b">B</Select.Item>
-          <Select.Item value="c">C</Select.Item>
-        </Select.Content>
-      </Select.Root>
-      <Select.Root size="m" placeholder="Size m">
-        <Select.Trigger>
-          <Select.Value />
-        </Select.Trigger>
-        <Select.Content>
-          <Select.Item value="a">A</Select.Item>
-          <Select.Item value="b">B</Select.Item>
-          <Select.Item value="c">C</Select.Item>
-        </Select.Content>
-      </Select.Root>
-      <Select.Root size="l" placeholder="Size l">
-        <Select.Trigger>
-          <Select.Value />
-        </Select.Trigger>
-        <Select.Content>
-          <Select.Item value="a">A</Select.Item>
-          <Select.Item value="b">B</Select.Item>
-          <Select.Item value="c">C</Select.Item>
-        </Select.Content>
-      </Select.Root>
-      <Select.Root size="xl" placeholder="Size xl">
-        <Select.Trigger>
-          <Select.Value />
-        </Select.Trigger>
-        <Select.Content>
-          <Select.Item value="a">A</Select.Item>
-          <Select.Item value="b">B</Select.Item>
-          <Select.Item value="c">C</Select.Item>
-        </Select.Content>
-      </Select.Root>
-    </div>
-  );
-}

package/src/components/select/examples/pattern-states.tsx

@@ -1,47 +0,0 @@
-import { Select } from "@/components/select/Select";
-
-import styles from "./examples.module.css";
-
-/** Placeholder, `defaultValue`, root `disabled`, `hasError`; mirrors `playground/snippets/select/states.tsx`. */
-export default function SelectPatternStatesExample() {
-  return (
-    <div className={`${styles.stack} ${styles.stackNarrow}`}>
-      <Select.Root placeholder="Placeholder only">
-        <Select.Trigger>
-          <Select.Value />
-        </Select.Trigger>
-        <Select.Content>
-          <Select.Item value="a">Option A</Select.Item>
-          <Select.Item value="b">Option B</Select.Item>
-        </Select.Content>
-      </Select.Root>
-      <Select.Root defaultValue="b" placeholder="With default value">
-        <Select.Trigger>
-          <Select.Value />
-        </Select.Trigger>
-        <Select.Content>
-          <Select.Item value="a">Option A</Select.Item>
-          <Select.Item value="b">Option B</Select.Item>
-        </Select.Content>
-      </Select.Root>
-      <Select.Root defaultValue="on" disabled placeholder="Disabled">
-        <Select.Trigger>
-          <Select.Value />
-        </Select.Trigger>
-        <Select.Content>
-          <Select.Item value="off">Off</Select.Item>
-          <Select.Item value="on">On</Select.Item>
-        </Select.Content>
-      </Select.Root>
-      <Select.Root hasError placeholder="Validation error">
-        <Select.Trigger>
-          <Select.Value />
-        </Select.Trigger>
-        <Select.Content>
-          <Select.Item value="1">Item 1</Select.Item>
-          <Select.Item value="2">Item 2</Select.Item>
-        </Select.Content>
-      </Select.Root>
-    </div>
-  );
-}

package/src/components/slider/examples/composition.tsx

@@ -1,14 +0,0 @@
-import { Slider } from "prime-ui-kit";
-
-/**
- * Visible `label` (linked `label` / `htmlFor` to the input) vs no visible label — then set `aria-label`
- * for screen readers (fractional step for “layer opacity”).
- */
-export default function SliderCompositionExample() {
-  return (
-    <>
-      <Slider.Root label="Screen brightness" defaultValue={55} />
-      <Slider.Root defaultValue={20} min={0} max={1} step={0.05} aria-label="Layer opacity" />
-    </>
-  );
-}

package/src/components/slider/examples/features.tsx

@@ -1,17 +0,0 @@
-import { Slider } from "prime-ui-kit";
-
-/** Custom range and stepping: `min` / `max` / `step` — e.g. whole degrees or coarse percentage stops. */
-export default function SliderFeaturesExample() {
-  return (
-    <>
-      <Slider.Root label="Temperature, °C" min={16} max={30} step={1} defaultValue={22} />
-      <Slider.Root
-        label="Position by quarters (step 25)"
-        min={0}
-        max={100}
-        step={25}
-        defaultValue={50}
-      />
-    </>
-  );
-}

package/src/components/slider/examples/full-width.tsx

@@ -1,12 +0,0 @@
-import { Slider } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-/** Root stretches to the parent width — in a narrow column the track grows with the column. */
-export default function SliderFullWidthExample() {
-  return (
-    <div className={styles.narrowColumn}>
-      <Slider.Root label="Width inside a narrow column" defaultValue={40} />
-    </div>
-  );
-}

package/src/components/stepper/examples/01-checkout-horizontal.tsx

@@ -1,32 +0,0 @@
-import { Stepper } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-/**
- * Checkout: horizontal ordered list with chevron separators; steps jump when clicked.
- */
-export default function StepperExampleCheckoutHorizontal() {
-  const [step, setStep] = React.useState(1);
-
-  return (
-    <div className={styles.stack}>
-      <Stepper.Root orientation="horizontal" currentStep={step} className={styles.rail}>
-        <Stepper.Step type="button" onClick={() => setStep(0)}>
-          <Stepper.Indicator />
-          <Stepper.Content title="Cart" description="Review items" />
-        </Stepper.Step>
-        <Stepper.SeparatorIcon />
-        <Stepper.Step type="button" onClick={() => setStep(1)}>
-          <Stepper.Indicator />
-          <Stepper.Content title="Shipping" description="Address & delivery" />
-        </Stepper.Step>
-        <Stepper.SeparatorIcon />
-        <Stepper.Step type="button" onClick={() => setStep(2)}>
-          <Stepper.Indicator />
-          <Stepper.Content title="Payment" description="Card or wallet" />
-        </Stepper.Step>
-      </Stepper.Root>
-    </div>
-  );
-}

package/src/components/stepper/examples/02-onboarding-vertical.tsx

@@ -1,51 +0,0 @@
-import { Button, Stepper } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-/**
- * Onboarding wizard: vertical semantic stepper, controlled index, back / next actions.
- */
-export default function StepperExampleOnboardingVertical() {
-  const [step, setStep] = React.useState(0);
-  const last = 2;
-
-  return (
-    <div className={styles.stack}>
-      <Stepper.Root currentStep={step} orientation="vertical" className={styles.rail}>
-        <Stepper.Step type="button" onClick={() => setStep(0)}>
-          <Stepper.Indicator />
-          <Stepper.Content title="Welcome" description="Product tour and goals" />
-          <Stepper.Arrow />
-        </Stepper.Step>
-        <Stepper.Step type="button" onClick={() => setStep(1)}>
-          <Stepper.Indicator />
-          <Stepper.Content title="Team" description="Invite collaborators" />
-          <Stepper.Arrow />
-        </Stepper.Step>
-        <Stepper.Step type="button" onClick={() => setStep(2)}>
-          <Stepper.Indicator />
-          <Stepper.Content title="Done" description="You are ready to build" />
-        </Stepper.Step>
-      </Stepper.Root>
-      <div className={styles.actions}>
-        <Button.Root
-          mode="stroke"
-          variant="neutral"
-          disabled={step <= 0}
-          onClick={() => setStep((s) => s - 1)}
-        >
-          Back
-        </Button.Root>
-        <Button.Root
-          mode="filled"
-          variant="primary"
-          disabled={step >= last}
-          onClick={() => setStep((s) => s + 1)}
-        >
-          Next
-        </Button.Root>
-      </div>
-    </div>
-  );
-}

package/src/components/stepper/examples/03-vertical-primitive-rail.tsx

@@ -1,36 +0,0 @@
-import { VerticalStepper } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-const STEPS = ["Basics", "Security", "Billing"] as const;
-
-function rowState(idx: number, active: number): "default" | "active" | "completed" {
-  if (idx < active) return "completed";
-  if (idx === active) return "active";
-  return "default";
-}
-
-/**
- * Vertical rail without `<ol>` semantics: app-owned `state` per row (e.g. store or router).
- */
-export default function StepperExampleVerticalPrimitiveRail() {
-  const [active, setActive] = React.useState(1);
-
-  return (
-    <VerticalStepper.Root className={styles.rail}>
-      {STEPS.map((label, idx) => (
-        <VerticalStepper.Item
-          key={label}
-          type="button"
-          state={rowState(idx, active)}
-          onClick={() => setActive(idx)}
-        >
-          <VerticalStepper.ItemIndicator>{String(idx + 1)}</VerticalStepper.ItemIndicator>
-          {label}
-          {rowState(idx, active) === "active" ? <VerticalStepper.Arrow /> : null}
-        </VerticalStepper.Item>
-      ))}
-    </VerticalStepper.Root>
-  );
-}

package/src/components/stepper/examples/04-checkout-step-error.tsx

@@ -1,30 +0,0 @@
-import { Stepper } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-/**
- * Checkout with a prior step flagged `error` while a later step stays active (e.g. fix shipping
- * from the payment screen).
- */
-export default function StepperExampleCheckoutStepError() {
-  return (
-    <div className={styles.stack}>
-      <Stepper.Root orientation="horizontal" currentStep={2} className={styles.rail}>
-        <Stepper.Step type="button">
-          <Stepper.Indicator />
-          <Stepper.Content title="Cart" />
-        </Stepper.Step>
-        <Stepper.SeparatorIcon />
-        <Stepper.Step type="button" status="error">
-          <Stepper.Indicator />
-          <Stepper.Content title="Shipping" description="Address could not be verified" />
-        </Stepper.Step>
-        <Stepper.SeparatorIcon />
-        <Stepper.Step type="button">
-          <Stepper.Indicator />
-          <Stepper.Content title="Payment" />
-        </Stepper.Step>
-      </Stepper.Root>
-    </div>
-  );
-}

package/src/components/stepper/examples/05-horizontal-primitive.tsx

@@ -1,37 +0,0 @@
-import { HorizontalStepper } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-const STEPS = ["Draft", "Review", "Publish"] as const;
-
-function rowState(idx: number, active: number): "default" | "active" | "completed" {
-  if (idx < active) return "completed";
-  if (idx === active) return "active";
-  return "default";
-}
-
-/**
- * Horizontal primitive rail: non-semantic `div` + buttons; you supply each `state`.
- */
-export default function StepperExampleHorizontalPrimitive() {
-  const [active, setActive] = React.useState(0);
-
-  return (
-    <HorizontalStepper.Root className={styles.rail}>
-      {STEPS.map((label, idx) => (
-        <React.Fragment key={label}>
-          {idx > 0 ? <HorizontalStepper.SeparatorIcon /> : null}
-          <HorizontalStepper.Item
-            type="button"
-            state={rowState(idx, active)}
-            onClick={() => setActive(idx)}
-          >
-            <HorizontalStepper.ItemIndicator>{String(idx + 1)}</HorizontalStepper.ItemIndicator>
-            {label}
-          </HorizontalStepper.Item>
-        </React.Fragment>
-      ))}
-    </HorizontalStepper.Root>
-  );
-}

package/src/components/stepper/examples/composition.tsx

@@ -1,31 +0,0 @@
-import { IconMail, Stepper } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-/** Custom `Indicator`, `Content`, and an extra icon beside the label. */
-export default function StepperCompositionExample() {
-  const [step, setStep] = React.useState(1);
-
-  return (
-    <Stepper.Root orientation="horizontal" currentStep={step} className={styles.horizontalRail2xl}>
-      <Stepper.Step type="button" onClick={() => setStep(0)}>
-        <Stepper.Indicator>✓</Stepper.Indicator>
-        <Stepper.Content title="Invite" description="Email sent" />
-      </Stepper.Step>
-      <Stepper.SeparatorIcon />
-      <Stepper.Step type="button" onClick={() => setStep(1)}>
-        <Stepper.Indicator />
-        <div className={styles.stepLabelRow}>
-          <IconMail className={styles.iconMuted} aria-hidden />
-          <Stepper.Content title="Confirm email" description="Use the link from the message" />
-        </div>
-      </Stepper.Step>
-      <Stepper.SeparatorIcon />
-      <Stepper.Step type="button" onClick={() => setStep(2)}>
-        <Stepper.Indicator />
-        <Stepper.Content title="Done" />
-      </Stepper.Step>
-    </Stepper.Root>
-  );
-}

package/src/components/stepper/examples/features.tsx

@@ -1,29 +0,0 @@
-import { Stepper } from "prime-ui-kit";
-import * as React from "react";
-
-/** `Stepper.Item` / `ItemIndicator` aliases, explicit `index`, list `SeparatorIcon` nodes. */
-export default function StepperFeaturesExample() {
-  const [step, setStep] = React.useState(0);
-
-  return (
-    <Stepper.Root orientation="horizontal" currentStep={step}>
-      <Stepper.Item type="button" onClick={() => setStep(0)}>
-        <Stepper.ItemIndicator />
-        <Stepper.Content title="Current step" />
-      </Stepper.Item>
-      <Stepper.SeparatorIcon />
-      <Stepper.Item type="button" index={2} onClick={() => setStep(2)}>
-        <Stepper.ItemIndicator />
-        <Stepper.Content
-          title="Custom number"
-          description="index=2 → circle shows 3; status still follows currentStep"
-        />
-      </Stepper.Item>
-      <Stepper.SeparatorIcon />
-      <Stepper.Item type="button" onClick={() => setStep(3)}>
-        <Stepper.ItemIndicator />
-        <Stepper.Content title="Auto index" description="next index after preceding steps" />
-      </Stepper.Item>
-    </Stepper.Root>
-  );
-}

package/src/components/stepper/examples/full-width.tsx

@@ -1,34 +0,0 @@
-import { Stepper } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-/** Horizontal rail with `className="w-full justify-between"` inside a wide card. */
-export default function StepperFullWidthExample() {
-  const [step, setStep] = React.useState(2);
-
-  return (
-    <div className={styles.fullWidthCard}>
-      <Stepper.Root
-        orientation="horizontal"
-        currentStep={step}
-        className={styles.horizontalSpreadRoot}
-      >
-        <Stepper.Step type="button" onClick={() => setStep(0)}>
-          <Stepper.Indicator />
-          <Stepper.Content title="Build" />
-        </Stepper.Step>
-        <Stepper.SeparatorIcon />
-        <Stepper.Step type="button" onClick={() => setStep(1)}>
-          <Stepper.Indicator />
-          <Stepper.Content title="Test" />
-        </Stepper.Step>
-        <Stepper.SeparatorIcon />
-        <Stepper.Step type="button" onClick={() => setStep(2)}>
-          <Stepper.Indicator />
-          <Stepper.Content title="Release" />
-        </Stepper.Step>
-      </Stepper.Root>
-    </div>
-  );
-}

package/src/components/stepper/examples/low-level-api.tsx

@@ -1,58 +0,0 @@
-import { HorizontalStepper, VerticalStepper } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-/** `HorizontalStepper` / `VerticalStepper`: you own each row `state`; no semantic `<ol>`. */
-export default function StepperLowLevelApiExample() {
-  const [horizontalActive, setHorizontalActive] = React.useState(0);
-  const [verticalActive, setVerticalActive] = React.useState(0);
-
-  const steps = [
-    { label: "Profile", indicator: "1" },
-    { label: "Role", indicator: "2" },
-    { label: "Access", indicator: "3" },
-  ] as const;
-
-  const getState = (idx: number): "completed" | "active" | "default" => {
-    if (idx < horizontalActive) return "completed";
-    if (idx === horizontalActive) return "active";
-    return "default";
-  };
-
-  const getStateV = (idx: number): "completed" | "active" | "default" => {
-    if (idx < verticalActive) return "completed";
-    if (idx === verticalActive) return "active";
-    return "default";
-  };
-
-  return (
-    <div className={styles.stackLoose}>
-      <HorizontalStepper.Root className={styles.horizontalRailMd}>
-        {steps.map((step, idx) => (
-          <React.Fragment key={step.label}>
-            {idx > 0 ? <HorizontalStepper.SeparatorIcon /> : null}
-            <HorizontalStepper.Item state={getState(idx)} onClick={() => setHorizontalActive(idx)}>
-              <HorizontalStepper.ItemIndicator>{step.indicator}</HorizontalStepper.ItemIndicator>
-              {step.label}
-            </HorizontalStepper.Item>
-          </React.Fragment>
-        ))}
-      </HorizontalStepper.Root>
-
-      <VerticalStepper.Root className={styles.verticalRail}>
-        {steps.map((step, idx) => (
-          <VerticalStepper.Item
-            key={step.label}
-            state={getStateV(idx)}
-            onClick={() => setVerticalActive(idx)}
-          >
-            <VerticalStepper.ItemIndicator>{step.indicator}</VerticalStepper.ItemIndicator>
-            {step.label}
-            {getStateV(idx) === "active" ? <VerticalStepper.Arrow /> : null}
-          </VerticalStepper.Item>
-        ))}
-      </VerticalStepper.Root>
-    </div>
-  );
-}