@yuva-devlab/ui 1.4.3 → 2.0.0

package/dist/components/status-chip/status-chip.mdx

@@ -0,0 +1,18 @@
+import { Meta, Title, Description, Canvas, Controls } from "@storybook/blocks";
+import * as StatusChipStories from "./status-chip.stories";
+
+<Meta of={StatusChipStories} />
+
+<Title />
+
+# Status Chip
+
+Compact lifecycle status badge displaying status tones and indicator dots.
+
+## Default
+
+<Canvas of={StatusChipStories.Default} />
+
+## Component Properties
+
+<Controls />

package/dist/components/table/table.css

@@ -28,15 +28,17 @@
   transition: background-color 0.1s;
 }
 .dl-table__head-cell {
-  height: 2.5rem;
-  padding: 0 0.5rem;
+  height: var(--control-height-md, 2.5rem);
+  padding: var(--table-row-padding-y, 0.5rem)
+    var(--table-row-padding-x, 0.75rem);
   text-align: left;
   font-weight: 500;
   color: var(--muted-foreground);
   white-space: nowrap;
 }
 .dl-table__cell {
-  padding: 0.75rem 0.5rem;
+  padding: var(--table-row-padding-y, 0.75rem)
+    var(--table-row-padding-x, 0.75rem);
   vertical-align: middle;
 }
 .dl-table__caption {

package/dist/components/tabs/tabs.css

@@ -1,9 +1,9 @@
 .dl-tabs-list {
   display: inline-flex;
-  height: 2.25rem;
+  height: var(--control-height-md, 2.25rem);
   align-items: center;
   justify-content: center;
-  border-radius: var(--radius-lg, 0.5rem);
+  border-radius: var(--radius, 0.5rem);
   background-color: var(--muted);
   padding: 0.25rem;
   color: var(--muted-foreground);
@@ -13,7 +13,7 @@
   align-items: center;
   justify-content: center;
   white-space: nowrap;
-  border-radius: var(--radius-md, 0.375rem);
+  border-radius: calc(var(--radius, 0.5rem) - 2px);
   padding: 0.25rem 0.75rem;
   font-size: 0.875rem;
   font-weight: 500;

package/dist/components/textarea/textarea.css

@@ -2,11 +2,11 @@
   display: block;
   min-height: 4rem;
   width: 100%;
-  border-radius: var(--radius-md, 0.375rem);
+  border-radius: var(--radius, 0.375rem);
   border: 1px solid var(--input);
   background-color: transparent;
-  padding-block: 0.5rem;
-  padding-inline: 0.75rem;
+  padding-block: var(--space-2, 0.5rem);
+  padding-inline: var(--space-3, 0.75rem);
   font-size: 0.75rem;
   font-family: inherit;
   color: var(--foreground);

package/dist/components/textarea/textarea.mdx

@@ -0,0 +1,18 @@
+import { Meta, Title, Description, Canvas, Controls } from "@storybook/blocks";
+import * as TextareaStories from "./textarea.stories";
+
+<Meta of={TextareaStories} />
+
+<Title />
+
+# Textarea
+
+Multi-line form text input element supporting token-based borders, focus rings, and sizing.
+
+## Default
+
+<Canvas of={TextareaStories.Default} />
+
+## Component Properties
+
+<Controls />

package/dist/components/toggle/toggle.css

@@ -65,21 +65,21 @@
 
 /* Sizes */
 .dl-toggle--size-default {
-  height: 2.25rem;
-  padding-inline: 0.5rem;
-  min-width: 2.25rem;
+  height: var(--control-height-md, 2.25rem);
+  padding-inline: var(--space-2, 0.5rem);
+  min-width: var(--control-height-md, 2.25rem);
 }
 
 .dl-toggle--size-sm {
-  height: 2rem;
-  padding-inline: 0.375rem;
-  min-width: 2rem;
+  height: var(--control-height-sm, 2rem);
+  padding-inline: calc(var(--space-2, 0.5rem) - 2px);
+  min-width: var(--control-height-sm, 2rem);
 }
 
 .dl-toggle--size-lg {
-  height: 2.5rem;
-  padding-inline: 0.625rem;
-  min-width: 2.5rem;
+  height: var(--control-height-lg, 2.5rem);
+  padding-inline: var(--space-3, 0.75rem);
+  min-width: var(--control-height-lg, 2.5rem);
 }
 
 /* Group */

package/dist/components/toggle/toggle.mdx

@@ -0,0 +1,18 @@
+import { Meta, Title, Description, Canvas, Controls } from "@storybook/blocks";
+import * as ToggleStories from "./toggle.stories";
+
+<Meta of={ToggleStories} />
+
+<Title />
+
+# Toggle
+
+Two-state button that can be either on or off.
+
+## Default
+
+<Canvas of={ToggleStories.Default} />
+
+## Component Properties
+
+<Controls />

package/dist/components/toggle-group/toggle-group.mdx

@@ -0,0 +1,18 @@
+import { Meta, Title, Description, Canvas, Controls } from "@storybook/blocks";
+import * as ToggleGroupStories from "./toggle-group.stories";
+
+<Meta of={ToggleGroupStories} />
+
+<Title />
+
+# Toggle Group
+
+Group of two-state toggle buttons configured for single or multiple selection.
+
+## Default
+
+<Canvas of={ToggleGroupStories.Default} />
+
+## Component Properties
+
+<Controls />

package/dist/components/tooltip/tooltip.mdx

@@ -0,0 +1,18 @@
+import { Meta, Title, Description, Canvas, Controls } from "@storybook/blocks";
+import * as TooltipStories from "./tooltip.stories";
+
+<Meta of={TooltipStories} />
+
+<Title />
+
+# Tooltip
+
+Popup that displays contextual information related to an element when focused or hovered.
+
+## Default
+
+<Canvas of={TooltipStories.Default} />
+
+## Component Properties
+
+<Controls />

package/dist/components/typography/heading.mdx

@@ -0,0 +1,36 @@
+import { Meta, Title, Description, Canvas, Controls } from "@storybook/blocks";
+import * as HeadingStories from "./heading.stories";
+
+<Meta of={HeadingStories} />
+
+<Title />
+
+# Heading
+
+Accessible typography heading primitive that decouples semantic DOM hierarchy (`as="h1"`) from visual presentation size (`size="h3"`).
+
+## Default
+
+<Canvas of={HeadingStories.Default} />
+
+## All Sizes
+
+Available in `display`, `h1`, `h2`, `h3`, `h4`, `h5`, and `h6`.
+
+<Canvas of={HeadingStories.AllSizes} />
+
+## Decoupled Semantic Hierarchy
+
+Ensures document accessibility and SEO compliance by allowing headings to render the correct semantic level while visually matching the UI design specs.
+
+<Canvas of={HeadingStories.DecoupledHierarchy} />
+
+## Color Variants
+
+Supports semantic token colors: `default`, `primary`, `muted`, `success`, `warning`, `destructive`, and `info`.
+
+<Canvas of={HeadingStories.ColorVariants} />
+
+## Component Properties
+
+<Controls />

package/dist/components/typography/text.mdx

@@ -0,0 +1,34 @@
+import { Meta, Title, Description, Canvas, Controls } from "@storybook/blocks";
+import * as TextStories from "./text.stories";
+
+<Meta of={TextStories} />
+
+<Title />
+
+# Text
+
+Versatile body, caption, code, and metric typography primitive with semantic color tokens and responsive hierarchy.
+
+## Default
+
+<Canvas of={TextStories.Default} />
+
+## All Variants
+
+Available in `body-lg`, `body`, `body-sm`, `caption`, `code`, and `metric`.
+
+<Canvas of={TextStories.AllVariants} />
+
+## Color Variants
+
+Supports `default`, `muted`, `subtle`, `primary`, `success`, `warning`, `destructive`, and `info`.
+
+<Canvas of={TextStories.ColorVariants} />
+
+## Single-Line Truncation
+
+<Canvas of={TextStories.Truncated} />
+
+## Component Properties
+
+<Controls />

package/dist/components/typography/typography.css

@@ -0,0 +1,98 @@
+/**
+ * @file typography.css
+ * @description Typography primitive styling and modifier attributes.
+ * Governed by W3C Cascade Layers.
+ */
+
+@layer dl-components {
+  /* ── Color Modifiers ───────────────────────────────────────────────────── */
+  .dl-heading[data-typography-color="default"],
+  .dl-text[data-typography-color="default"] {
+    color: var(--foreground);
+  }
+
+  .dl-heading[data-typography-color="muted"],
+  .dl-text[data-typography-color="muted"] {
+    color: var(--muted-foreground);
+  }
+
+  .dl-heading[data-typography-color="subtle"],
+  .dl-text[data-typography-color="subtle"] {
+    color: color-mix(in oklch, var(--muted-foreground) 80%, transparent);
+  }
+
+  .dl-heading[data-typography-color="primary"],
+  .dl-text[data-typography-color="primary"] {
+    color: var(--primary);
+  }
+
+  .dl-heading[data-typography-color="destructive"],
+  .dl-text[data-typography-color="destructive"] {
+    color: var(--destructive);
+  }
+
+  .dl-heading[data-typography-color="warning"],
+  .dl-text[data-typography-color="warning"] {
+    color: var(--warning);
+  }
+
+  .dl-heading[data-typography-color="success"],
+  .dl-text[data-typography-color="success"] {
+    color: var(--success);
+  }
+
+  .dl-heading[data-typography-color="info"],
+  .dl-text[data-typography-color="info"] {
+    color: var(--info);
+  }
+
+  /* ── Alignment Modifiers ───────────────────────────────────────────────── */
+  .dl-heading[data-typography-align="left"],
+  .dl-text[data-typography-align="left"] {
+    text-align: left;
+  }
+
+  .dl-heading[data-typography-align="center"],
+  .dl-text[data-typography-align="center"] {
+    text-align: center;
+  }
+
+  .dl-heading[data-typography-align="right"],
+  .dl-text[data-typography-align="right"] {
+    text-align: right;
+  }
+
+  /* ── Truncation Modifier ───────────────────────────────────────────────── */
+  .dl-heading[data-typography-truncate="true"],
+  .dl-text[data-typography-truncate="true"] {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* ── Weight Overrides ──────────────────────────────────────────────────── */
+  .dl-heading[data-typography-weight="normal"],
+  .dl-text[data-typography-weight="normal"] {
+    font-weight: 400;
+  }
+
+  .dl-heading[data-typography-weight="medium"],
+  .dl-text[data-typography-weight="medium"] {
+    font-weight: 500;
+  }
+
+  .dl-heading[data-typography-weight="semibold"],
+  .dl-text[data-typography-weight="semibold"] {
+    font-weight: 600;
+  }
+
+  .dl-heading[data-typography-weight="bold"],
+  .dl-text[data-typography-weight="bold"] {
+    font-weight: 700;
+  }
+
+  .dl-heading[data-typography-weight="extrabold"],
+  .dl-text[data-typography-weight="extrabold"] {
+    font-weight: 800;
+  }
+}