prime-ui-kit 0.7.11 → 0.9.0

package/src/components/progress-circle/examples/states.tsx

@@ -1,87 +0,0 @@
-import { ProgressCircle, Typography } from "prime-ui-kit";
-
-/**
- * Typical fill levels and clamping: `value` is clamped to `[0, max]`; if `max <= 0`, scale falls back to `100`.
- * Playground: `snippets/progress/circle-states.tsx`.
- */
-export default function StatesExample() {
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexWrap: "wrap",
-        gap: "var(--prime-sys-spacing-xl)",
-        alignItems: "flex-end",
-        justifyContent: "center",
-      }}
-    >
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          gap: "var(--prime-sys-spacing-s)",
-        }}
-      >
-        <Typography.Root as="span" variant="body-compact" tone="muted">
-          value 0
-        </Typography.Root>
-        <ProgressCircle.Root value={0}>0%</ProgressCircle.Root>
-      </div>
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          gap: "var(--prime-sys-spacing-s)",
-        }}
-      >
-        <Typography.Root as="span" variant="body-compact" tone="muted">
-          value 50
-        </Typography.Root>
-        <ProgressCircle.Root value={50}>50%</ProgressCircle.Root>
-      </div>
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          gap: "var(--prime-sys-spacing-s)",
-        }}
-      >
-        <Typography.Root as="span" variant="body-compact" tone="muted">
-          value 100
-        </Typography.Root>
-        <ProgressCircle.Root value={100}>100%</ProgressCircle.Root>
-      </div>
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          gap: "var(--prime-sys-spacing-s)",
-        }}
-      >
-        <Typography.Root as="span" variant="body-compact" tone="muted">
-          value −20 → 0
-        </Typography.Root>
-        <ProgressCircle.Root value={-20}>clamp</ProgressCircle.Root>
-      </div>
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          gap: "var(--prime-sys-spacing-s)",
-        }}
-      >
-        <Typography.Root as="span" variant="body-compact" tone="muted">
-          value 140, max 100
-        </Typography.Root>
-        <ProgressCircle.Root value={140} max={100}>
-          full
-        </ProgressCircle.Root>
-      </div>
-    </div>
-  );
-}

package/src/components/radio/examples/notification-channel.tsx

@@ -1,29 +0,0 @@
-import { Radio } from "prime-ui-kit";
-
-import styles from "./radio-examples.module.css";
-
-/** Product alerts: mutually exclusive delivery channel (not multi-select — use Checkbox for that). */
-export default function NotificationChannelExample() {
-  return (
-    <fieldset className={styles.fieldsetPlain}>
-      <legend className={styles.legend}>Security alerts</legend>
-      <p className={styles.helperBelowLegend}>
-        Choose one primary channel for account and login notices.
-      </p>
-      <div className={styles.columnTight}>
-        <Radio.Root name="security-alert-example" value="email" defaultChecked>
-          <Radio.Label>Email</Radio.Label>
-          <Radio.Hint>Sent to your verified address immediately.</Radio.Hint>
-        </Radio.Root>
-        <Radio.Root name="security-alert-example" value="sms">
-          <Radio.Label>SMS</Radio.Label>
-          <Radio.Hint>Requires a phone number on file.</Radio.Hint>
-        </Radio.Root>
-        <Radio.Root name="security-alert-example" value="app">
-          <Radio.Label>Mobile app only</Radio.Label>
-          <Radio.Hint>No email or SMS; push when the app is installed.</Radio.Hint>
-        </Radio.Root>
-      </div>
-    </fieldset>
-  );
-}

package/src/components/radio/examples/radio-examples.module.css

@@ -1,31 +0,0 @@
-.fieldsetPlain {
-  margin: 0;
-  padding: 0;
-  border: none;
-  min-width: 0;
-}
-
-.legend {
-  font-size: var(--prime-sys-typography-sizeScale-s);
-  font-weight: 600;
-  margin-bottom: var(--prime-sys-spacing-x2);
-}
-
-.columnTight {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-sys-spacing-x2);
-}
-
-.selectionMeta {
-  margin: var(--prime-sys-spacing-x3) 0 0;
-  font-size: var(--prime-sys-typography-sizeScale-s);
-  color: var(--prime-sys-color-content-secondary);
-}
-
-.helperBelowLegend {
-  margin: 0 0 var(--prime-sys-spacing-x2);
-  max-width: 40rem;
-  font-size: var(--prime-sys-typography-sizeScale-s);
-  color: var(--prime-sys-color-content-secondary);
-}

package/src/components/radio/examples/settings-group.tsx

@@ -1,30 +0,0 @@
-import { Radio } from "prime-ui-kit";
-
-import styles from "./radio-examples.module.css";
-
-/** Settings screen: `fieldset` + `legend`, theme radios, one disabled tier-gated option. */
-export default function SettingsGroupExample() {
-  return (
-    <fieldset className={styles.fieldsetPlain}>
-      <legend className={styles.legend}>Appearance</legend>
-      <div className={styles.columnTight}>
-        <Radio.Root name="theme-example" value="light" defaultChecked>
-          <Radio.Label>Light</Radio.Label>
-          <Radio.Hint>Best for bright environments.</Radio.Hint>
-        </Radio.Root>
-        <Radio.Root name="theme-example" value="dark">
-          <Radio.Label>Dark</Radio.Label>
-          <Radio.Hint>Reduced glare in low light.</Radio.Hint>
-        </Radio.Root>
-        <Radio.Root name="theme-example" value="system">
-          <Radio.Label>Match system</Radio.Label>
-          <Radio.Hint>Follows your OS light/dark schedule.</Radio.Hint>
-        </Radio.Root>
-        <Radio.Root name="theme-example" value="contrast" disabled>
-          <Radio.Label>High contrast</Radio.Label>
-          <Radio.Hint>Available on Enterprise; contact sales to enable.</Radio.Hint>
-        </Radio.Root>
-      </div>
-    </fieldset>
-  );
-}

package/src/components/radio/examples/shipping-method.tsx

@@ -1,26 +0,0 @@
-import { Radio } from "prime-ui-kit";
-
-import styles from "./radio-examples.module.css";
-
-/** Checkout-style carrier choice: same `name`, short hints under each option. */
-export default function ShippingMethodExample() {
-  return (
-    <fieldset className={styles.fieldsetPlain}>
-      <legend className={styles.legend}>Shipping method</legend>
-      <div className={styles.columnTight}>
-        <Radio.Root name="shipping-example" value="standard" defaultChecked>
-          <Radio.Label>Standard (5–7 business days)</Radio.Label>
-          <Radio.Hint>Free on orders over $50.</Radio.Hint>
-        </Radio.Root>
-        <Radio.Root name="shipping-example" value="express">
-          <Radio.Label>Express (2 business days)</Radio.Label>
-          <Radio.Hint>Flat rate; tracking included.</Radio.Hint>
-        </Radio.Root>
-        <Radio.Root name="shipping-example" value="pickup">
-          <Radio.Label>Pick up in store</Radio.Label>
-          <Radio.Hint>Ready next day at your selected location.</Radio.Hint>
-        </Radio.Root>
-      </div>
-    </fieldset>
-  );
-}

package/src/components/segmented-control/examples/canonical-composition.tsx

@@ -1,70 +0,0 @@
-import { Icon, SegmentedControl, Typography } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./segmented-examples.module.css";
-
-/**
- * Canonical composition: controlled group, icon + text, and icon-only segments with visually hidden labels.
- */
-export default function CanonicalCompositionExample() {
-  const [period, setPeriod] = React.useState("week");
-
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        gap: "var(--prime-sys-spacing-l)",
-        alignItems: "flex-start",
-      }}
-    >
-      <SegmentedControl.Root defaultValue="light">
-        <SegmentedControl.Item value="light">
-          <SegmentedControl.Icon>
-            <Icon name="theme.light" />
-          </SegmentedControl.Icon>
-          Light
-        </SegmentedControl.Item>
-        <SegmentedControl.Item value="dark">
-          <SegmentedControl.Icon>
-            <Icon name="theme.dark" />
-          </SegmentedControl.Icon>
-          Dark
-        </SegmentedControl.Item>
-      </SegmentedControl.Root>
-
-      <SegmentedControl.Root value={period} onValueChange={setPeriod}>
-        <SegmentedControl.Item value="day">Day</SegmentedControl.Item>
-        <SegmentedControl.Item value="week">Week</SegmentedControl.Item>
-        <SegmentedControl.Item value="month">Month</SegmentedControl.Item>
-      </SegmentedControl.Root>
-
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: "var(--prime-sys-spacing-s)",
-          alignItems: "flex-start",
-        }}
-      >
-        <Typography.Root as="span" variant="body-compact" tone="muted">
-          Layout preview
-        </Typography.Root>
-        <SegmentedControl.Root defaultValue="grid">
-          <SegmentedControl.Item value="feed">
-            <SegmentedControl.Icon>
-              <Icon name="nav.home" />
-            </SegmentedControl.Icon>
-            <span className={styles.visuallyHidden}>Feed</span>
-          </SegmentedControl.Item>
-          <SegmentedControl.Item value="grid">
-            <SegmentedControl.Icon>
-              <Icon name="nav.layoutGrid" />
-            </SegmentedControl.Icon>
-            <span className={styles.visuallyHidden}>Grid</span>
-          </SegmentedControl.Item>
-        </SegmentedControl.Root>
-      </div>
-    </div>
-  );
-}

package/src/components/segmented-control/examples/catalog-filters.tsx

@@ -1,41 +0,0 @@
-import { SegmentedControl, Typography } from "prime-ui-kit";
-import * as React from "react";
-
-type StockFilter = "all" | "in_stock" | "preorder";
-
-function isStockFilter(value: string): value is StockFilter {
-  return value === "all" || value === "in_stock" || value === "preorder";
-}
-
-/**
- * Compact filter strip: few exclusive scopes above a product grid (pair with Select when options grow).
- */
-export default function CatalogFiltersExample() {
-  const [stock, setStock] = React.useState<StockFilter>("all");
-
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        gap: "var(--prime-sys-spacing-s)",
-        alignItems: "flex-start",
-      }}
-    >
-      <Typography.Root as="span" variant="caption" tone="muted">
-        Availability
-      </Typography.Root>
-      <SegmentedControl.Root
-        value={stock}
-        onValueChange={(v) => {
-          if (isStockFilter(v)) setStock(v);
-        }}
-        size="s"
-      >
-        <SegmentedControl.Item value="all">All</SegmentedControl.Item>
-        <SegmentedControl.Item value="in_stock">In stock</SegmentedControl.Item>
-        <SegmentedControl.Item value="preorder">Pre-order</SegmentedControl.Item>
-      </SegmentedControl.Root>
-    </div>
-  );
-}

package/src/components/segmented-control/examples/composition.tsx

@@ -1,55 +0,0 @@
-import { Icon, SegmentedControl, Typography } from "prime-ui-kit";
-
-import styles from "./segmented-examples.module.css";
-
-/** Icon + text and icon-only segments with visually hidden labels (mirrors playground/snippets/segmented/composition). */
-export default function SegmentedCompositionExample() {
-  return (
-    <div className={styles.demoStack}>
-      <div className={styles.demoRow}>
-        <Typography.Root as="span" variant="body-compact" tone="muted">
-          Icon and label
-        </Typography.Root>
-        <SegmentedControl.Root defaultValue="light">
-          <SegmentedControl.Item value="light">
-            <SegmentedControl.Icon>
-              <Icon name="theme.light" />
-            </SegmentedControl.Icon>
-            Light
-          </SegmentedControl.Item>
-          <SegmentedControl.Item value="dark">
-            <SegmentedControl.Icon>
-              <Icon name="theme.dark" />
-            </SegmentedControl.Icon>
-            Dark
-          </SegmentedControl.Item>
-        </SegmentedControl.Root>
-      </div>
-      <div className={styles.demoRow}>
-        <Typography.Root as="span" variant="body-compact" tone="muted">
-          Icon-only + visually hidden text
-        </Typography.Root>
-        <SegmentedControl.Root defaultValue="grid">
-          <SegmentedControl.Item value="feed">
-            <SegmentedControl.Icon>
-              <Icon name="nav.home" />
-            </SegmentedControl.Icon>
-            <span className={styles.visuallyHidden}>Feed</span>
-          </SegmentedControl.Item>
-          <SegmentedControl.Item value="grid">
-            <SegmentedControl.Icon>
-              <Icon name="nav.layoutGrid" />
-            </SegmentedControl.Icon>
-            <span className={styles.visuallyHidden}>Grid</span>
-          </SegmentedControl.Item>
-          <SegmentedControl.Item value="compact">
-            <SegmentedControl.Icon>
-              <Icon name="theme.light" />
-            </SegmentedControl.Icon>
-            <span className={styles.visuallyHidden}>Compact</span>
-          </SegmentedControl.Item>
-        </SegmentedControl.Root>
-      </div>
-    </div>
-  );
-}

package/src/components/segmented-control/examples/features.tsx

@@ -1,45 +0,0 @@
-import { SegmentedControl, Typography } from "prime-ui-kit";
-
-import styles from "./segmented-examples.module.css";
-
-/** Two, three, and four segments; arrow keys on the focused radiogroup (mirrors playground/snippets/segmented/features). */
-export default function SegmentedFeaturesExample() {
-  return (
-    <div className={styles.demoStack}>
-      <div className={styles.demoRow}>
-        <Typography.Root as="span" variant="body-compact" tone="muted">
-          Two segments
-        </Typography.Root>
-        <SegmentedControl.Root defaultValue="all">
-          <SegmentedControl.Item value="all">All tasks</SegmentedControl.Item>
-          <SegmentedControl.Item value="mine">Mine</SegmentedControl.Item>
-        </SegmentedControl.Root>
-      </div>
-      <div className={styles.demoRow}>
-        <Typography.Root as="span" variant="body-compact" tone="muted">
-          Three segments
-        </Typography.Root>
-        <SegmentedControl.Root defaultValue="day">
-          <SegmentedControl.Item value="day">Today</SegmentedControl.Item>
-          <SegmentedControl.Item value="week">Week</SegmentedControl.Item>
-          <SegmentedControl.Item value="month">Month</SegmentedControl.Item>
-        </SegmentedControl.Root>
-      </div>
-      <div className={styles.demoRow}>
-        <Typography.Root as="span" variant="body-compact" tone="muted">
-          Four segments
-        </Typography.Root>
-        <SegmentedControl.Root defaultValue="q1">
-          <SegmentedControl.Item value="q1">Q1</SegmentedControl.Item>
-          <SegmentedControl.Item value="q2">Q2</SegmentedControl.Item>
-          <SegmentedControl.Item value="q3">Q3</SegmentedControl.Item>
-          <SegmentedControl.Item value="q4">Q4</SegmentedControl.Item>
-        </SegmentedControl.Root>
-      </div>
-      <Typography.Root as="p" variant="body-compact" tone="muted" className={styles.demoCaption}>
-        With focus on the <code>radiogroup</code>, ArrowLeft / ArrowRight move selection (disabled
-        items are skipped).
-      </Typography.Root>
-    </div>
-  );
-}

package/src/components/segmented-control/examples/pricing-toggle.tsx

@@ -1,39 +0,0 @@
-import { SegmentedControl, Typography } from "prime-ui-kit";
-import * as React from "react";
-
-type BillingCycle = "monthly" | "annual";
-
-function isBillingCycle(value: string): value is BillingCycle {
-  return value === "monthly" || value === "annual";
-}
-
-/**
- * SaaS-style billing cycle toggle: two clear options, often paired with price copy elsewhere.
- */
-export default function PricingToggleExample() {
-  const [cycle, setCycle] = React.useState<BillingCycle>("monthly");
-
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        gap: "var(--prime-sys-spacing-m)",
-        alignItems: "flex-start",
-      }}
-    >
-      <SegmentedControl.Root
-        value={cycle}
-        onValueChange={(v) => {
-          if (isBillingCycle(v)) setCycle(v);
-        }}
-      >
-        <SegmentedControl.Item value="monthly">Monthly</SegmentedControl.Item>
-        <SegmentedControl.Item value="annual">Annual</SegmentedControl.Item>
-      </SegmentedControl.Root>
-      <Typography.Root as="p" variant="body-compact" tone="muted">
-        Showing prices for <strong>{cycle === "monthly" ? "monthly" : "annual"}</strong> billing.
-      </Typography.Root>
-    </div>
-  );
-}

package/src/components/segmented-control/examples/segmented-examples.module.css

@@ -1,41 +0,0 @@
-/* Visually hidden label for icon-only segments (accessible name). */
-.visuallyHidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-/* Layout helpers aligned with playground/snippets/segmented demos */
-.demoRow {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: var(--prime-sys-spacing-m);
-}
-
-.demoStack {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-sys-spacing-m);
-}
-
-.fullWidthShelf {
-  width: min(100%, 22rem);
-}
-
-/* Higher specificity than SegmentedControl `.root` (`width: fit-content`) without `!important`. */
-.fullWidthShelf .fullWidthRoot {
-  width: 100%;
-}
-
-.demoCaption {
-  margin-top: var(--prime-sys-spacing-s);
-  font-size: var(--prime-sys-typography-sizeScale-s);
-  color: var(--prime-sys-color-content-muted);
-}

package/src/components/segmented-control/examples/view-mode.tsx

@@ -1,52 +0,0 @@
-import { SegmentedControl, Typography } from "prime-ui-kit";
-import * as React from "react";
-
-type CatalogView = "list" | "grid" | "table";
-
-function isCatalogView(value: string): value is CatalogView {
-  return value === "list" || value === "grid" || value === "table";
-}
-
-/**
- * Catalog or dashboard view mode: mutually exclusive layout, state owned by the parent.
- */
-export default function ViewModeExample() {
-  const [view, setView] = React.useState<CatalogView>("list");
-
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        gap: "var(--prime-sys-spacing-m)",
-        alignItems: "flex-start",
-      }}
-    >
-      <div
-        style={{
-          display: "flex",
-          flexWrap: "wrap",
-          gap: "var(--prime-sys-spacing-m)",
-          alignItems: "center",
-        }}
-      >
-        <Typography.Root as="span" variant="body-compact" tone="muted">
-          View
-        </Typography.Root>
-        <SegmentedControl.Root
-          value={view}
-          onValueChange={(v) => {
-            if (isCatalogView(v)) setView(v);
-          }}
-        >
-          <SegmentedControl.Item value="list">List</SegmentedControl.Item>
-          <SegmentedControl.Item value="grid">Grid</SegmentedControl.Item>
-          <SegmentedControl.Item value="table">Table</SegmentedControl.Item>
-        </SegmentedControl.Root>
-      </div>
-      <Typography.Root as="p" variant="body-default" tone="muted">
-        Active layout: <strong>{view}</strong>
-      </Typography.Root>
-    </div>
-  );
-}

package/src/components/segmented-progress-bar/examples/distribution-breakdown.tsx

@@ -1,16 +0,0 @@
-import { SegmentedProgressBar } from "prime-ui-kit";
-
-/** Part-to-whole job outcomes with a visible title and per-segment labels for tooltips and SR distribution. */
-export default function DistributionBreakdownExample() {
-  return (
-    <SegmentedProgressBar.Root
-      label="Pipeline results"
-      segments={[
-        { value: 30, label: "Failed", tone: "danger" },
-        { value: 25, label: "Queued", tone: "warning" },
-        { value: 35, label: "Succeeded", tone: "success" },
-        { value: 10, label: "Skipped", tone: "neutral" },
-      ]}
-    />
-  );
-}

package/src/components/segmented-progress-bar/examples/multi-phase-rollout.tsx

@@ -1,15 +0,0 @@
-import { SegmentedProgressBar } from "prime-ui-kit";
-
-/** Rollout mix by phase: weights reflect share of accounts or environments on each tier. */
-export default function MultiPhaseRolloutExample() {
-  return (
-    <SegmentedProgressBar.Root
-      label="Feature rollout"
-      segments={[
-        { value: 15, label: "Internal", tone: "neutral" },
-        { value: 35, label: "Beta", tone: "warning" },
-        { value: 50, label: "General availability", tone: "success" },
-      ]}
-    />
-  );
-}

package/src/components/segmented-progress-bar/examples/segment-gaps.tsx

@@ -1,23 +0,0 @@
-import { SegmentedProgressBar } from "prime-ui-kit";
-
-const segments = [
-  { value: 50, label: "Region A", tone: "primary" as const },
-  { value: 50, label: "Region B", tone: "neutral" as const },
-];
-
-/** Default continuous bar vs hairline separators — weights and tones are unchanged. */
-export default function SegmentGapsExample() {
-  return (
-    <>
-      <SegmentedProgressBar.Root
-        segments={segments}
-        label="Continuous (default, segmentGap none)"
-      />
-      <SegmentedProgressBar.Root
-        segmentGap="hairline"
-        segments={segments}
-        label="Hairline separators"
-      />
-    </>
-  );
-}

package/src/components/segmented-progress-bar/examples/size-ladder.tsx

@@ -1,19 +0,0 @@
-import { SegmentedProgressBar } from "prime-ui-kit";
-
-const segments = [
-  { value: 40, tone: "danger" as const },
-  { value: 35, tone: "warning" as const },
-  { value: 25, tone: "success" as const },
-];
-
-/** Same weights across the control size scale (aligned with ProgressBar). */
-export default function SizeLadderExample() {
-  return (
-    <>
-      <SegmentedProgressBar.Root size="s" segments={segments} />
-      <SegmentedProgressBar.Root segments={segments} />
-      <SegmentedProgressBar.Root size="l" segments={segments} />
-      <SegmentedProgressBar.Root size="xl" segments={segments} />
-    </>
-  );
-}

package/src/components/segmented-progress-bar/examples/storage-mix.tsx

@@ -1,16 +0,0 @@
-import { SegmentedProgressBar } from "prime-ui-kit";
-
-/** Non-status categories: tones differentiate segments without implying pass/fail. */
-export default function StorageMixExample() {
-  return (
-    <SegmentedProgressBar.Root
-      label="Disk usage by type"
-      segmentGap="hairline"
-      segments={[
-        { value: 42, label: "Documents", tone: "primary" },
-        { value: 33, label: "Media", tone: "neutral" },
-        { value: 25, label: "Applications", tone: "warning" },
-      ]}
-    />
-  );
-}