@yuva-devlab/ui 1.4.4 → 2.1.0

package/dist/components/collapsible/collapsible.mdx

@@ -0,0 +1,18 @@
+import { Meta, Title, Description, Canvas, Controls } from "@storybook/blocks";
+import * as CollapsibleStories from "./collapsible.stories";
+
+<Meta of={CollapsibleStories} />
+
+<Title />
+
+# Collapsible
+
+Interactive component that expands and collapses a section of secondary content.
+
+## Default
+
+<Canvas of={CollapsibleStories.Default} />
+
+## Component Properties
+
+<Controls />

package/dist/components/command/command.css

@@ -18,11 +18,11 @@
   display: flex;
   align-items: center;
   border-bottom: 1px solid var(--border);
-  padding-inline: 0.75rem;
+  padding-inline: var(--space-3, 0.75rem);
 }
 
 .dl-command-input-icon {
-  margin-inline-end: 0.5rem;
+  margin-inline-end: var(--space-2, 0.5rem);
   width: 1rem;
   height: 1rem;
   flex-shrink: 0;
@@ -31,7 +31,7 @@
 
 .dl-command-input {
   display: flex;
-  height: 2.5rem;
+  height: var(--control-height-lg, 2.5rem);
   width: 100%;
   border-radius: var(--radius-md, 0.375rem);
   background-color: transparent;

package/dist/components/command/command.mdx

@@ -0,0 +1,18 @@
+import { Meta, Title, Description, Canvas, Controls } from "@storybook/blocks";
+import * as CommandStories from "./command.stories";
+
+<Meta of={CommandStories} />
+
+<Title />
+
+# Command
+
+Fast, composable, unstyled command menu palette for searching, filtering, and triggering actions.
+
+## Default
+
+<Canvas of={CommandStories.Default} />
+
+## Component Properties
+
+<Controls />

package/dist/components/confirm-dialog/confirm-dialog.mdx

@@ -0,0 +1,18 @@
+import { Meta, Title, Description, Canvas, Controls } from "@storybook/blocks";
+import * as ConfirmDialogStories from "./confirm-dialog.stories";
+
+<Meta of={ConfirmDialogStories} />
+
+<Title />
+
+# Confirm Dialog
+
+Pre-configured dialog component for confirming user decisions before destructive or critical actions.
+
+## Default
+
+<Canvas of={ConfirmDialogStories.Default} />
+
+## Component Properties
+
+<Controls />

package/dist/components/confirmation/confirmation.css

@@ -0,0 +1,75 @@
+.dl-confirmation {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  width: 100%;
+  border-radius: var(--radius-md, 0.375rem);
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--border);
+  background-color: var(--card, var(--background));
+  color: var(--card-foreground, var(--foreground));
+  font-size: 0.875rem;
+}
+
+.dl-confirmation--sm {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.8125rem;
+}
+
+.dl-confirmation--destructive {
+  border-color: color-mix(in oklch, var(--destructive) 40%, transparent);
+  background-color: color-mix(in oklch, var(--destructive) 5%, transparent);
+}
+
+.dl-confirmation__body {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.dl-confirmation__media {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--radius-sm, 0.25rem);
+  background-color: var(--secondary);
+  color: var(--secondary-foreground);
+  flex-shrink: 0;
+}
+
+.dl-confirmation--destructive .dl-confirmation__media {
+  background-color: color-mix(in oklch, var(--destructive) 15%, transparent);
+  color: var(--destructive);
+}
+
+.dl-confirmation__content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-width: 0;
+}
+
+.dl-confirmation__title {
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25;
+  color: var(--foreground);
+}
+
+.dl-confirmation__description {
+  font-size: 0.75rem;
+  color: var(--muted-foreground);
+  line-height: 1.35;
+}
+
+.dl-confirmation__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}

package/dist/components/confirmation/confirmation.mdx

@@ -0,0 +1,22 @@
+import { Meta, Title, Description, Canvas } from "@storybook/blocks";
+import * as ConfirmationStories from "./confirmation.stories";
+
+<Meta of={ConfirmationStories} />
+
+<Title />
+
+# Confirmation
+
+Human-in-the-loop action approval card for sensitive or destructive AI agent actions, with title, risk description, and contextual approve/deny actions.
+
+## Default Command Approval
+
+<Canvas of={ConfirmationStories.Default} />
+
+## Destructive Resource Deletion
+
+<Canvas of={ConfirmationStories.Destructive} />
+
+## IAM Policy Approval
+
+<Canvas of={ConfirmationStories.PolicyApproval} />

package/dist/components/context/context.css

@@ -0,0 +1,80 @@
+.dl-context-usage {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.75rem;
+  border-radius: var(--radius-md, 0.375rem);
+  border: 1px solid var(--border);
+  background-color: var(--card, var(--background));
+  font-size: 0.8125rem;
+}
+
+.dl-context-usage--sm {
+  padding: 0.5rem;
+  font-size: 0.75rem;
+}
+
+.dl-context-usage__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.dl-context-usage__title {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-weight: 600;
+  color: var(--foreground);
+}
+
+.dl-context-usage__fraction {
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
+  font-size: 0.75rem;
+  color: var(--muted-foreground);
+}
+
+.dl-context-usage__bar-bg {
+  position: relative;
+  width: 100%;
+  height: 0.375rem;
+  border-radius: 9999px;
+  background-color: var(--muted);
+  overflow: hidden;
+}
+
+.dl-context-usage__bar-fill {
+  height: 100%;
+  border-radius: 9999px;
+  transition: width 0.3s ease;
+  background-color: var(--primary);
+}
+
+.dl-context-usage__bar-fill--warning {
+  background-color: var(--warning);
+}
+
+.dl-context-usage__bar-fill--danger {
+  background-color: var(--destructive);
+}
+
+.dl-context-usage__breakdown {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  font-size: 0.6875rem;
+  color: var(--muted-foreground);
+  margin-top: 0.25rem;
+}
+
+.dl-context-usage__pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.125rem 0.375rem;
+  border-radius: var(--radius-sm, 0.25rem);
+  background-color: var(--muted);
+}

package/dist/components/context/context.mdx

@@ -0,0 +1,18 @@
+import { Meta, Title, Description, Canvas, Controls } from "@storybook/blocks";
+import * as ContextStories from "./context.stories";
+
+<Meta of={ContextStories} />
+
+<Title />
+
+# Context Usage
+
+Token gauge visualizing context window consumption, remaining capacity thresholds, and token category breakdowns (input, output, reasoning, cache).
+
+## Default
+
+<Canvas of={ContextStories.Default} />
+
+## Component Properties
+
+<Controls />

package/dist/components/context-menu/context-menu.mdx

@@ -0,0 +1,18 @@
+import { Meta, Title, Description, Canvas, Controls } from "@storybook/blocks";
+import * as ContextMenuStories from "./context-menu.stories";
+
+<Meta of={ContextMenuStories} />
+
+<Title />
+
+# Context Menu
+
+Right-click contextual menu providing contextual actions anchored to targeted elements.
+
+## Default
+
+<Canvas of={ContextMenuStories.Default} />
+
+## Component Properties
+
+<Controls />

package/dist/components/copy-button/copy-button.mdx

@@ -0,0 +1,18 @@
+import { Meta, Title, Description, Canvas, Controls } from "@storybook/blocks";
+import * as CopyButtonStories from "./copy-button.stories";
+
+<Meta of={CopyButtonStories} />
+
+<Title />
+
+# Copy Button
+
+One-click clipboard copying trigger with visual icon state transitions and tooltip feedback.
+
+## Default
+
+<Canvas of={CopyButtonStories.Default} />
+
+## Component Properties
+
+<Controls />

package/dist/components/data-table/data-table.css

@@ -0,0 +1,71 @@
+.dl-data-table-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border-radius: var(--radius-md, 0.375rem);
+  border: 1px solid var(--border);
+  background-color: var(--card, var(--background));
+  overflow: hidden;
+}
+
+.dl-data-table-wrapper {
+  overflow-x: auto;
+  width: 100%;
+}
+
+.dl-data-table-sort-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  background: transparent;
+  border: none;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  padding: 0;
+  user-select: none;
+}
+
+.dl-data-table-sort-btn:hover {
+  color: var(--foreground);
+}
+
+.dl-data-table-sort-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+  color: var(--muted-foreground);
+  transition: color 0.15s ease;
+}
+
+.dl-data-table-sort-btn:hover .dl-data-table-sort-icon {
+  color: var(--foreground);
+}
+
+.dl-data-table-row--clickable {
+  cursor: pointer;
+}
+
+.dl-data-table-footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.75rem 1rem;
+  border-top: 1px solid var(--border);
+  background-color: var(--background);
+  font-size: 0.8125rem;
+  color: var(--muted-foreground);
+}
+
+.dl-data-table-summary {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.dl-data-table-empty {
+  padding: 3rem 1rem;
+  text-align: center;
+  color: var(--muted-foreground);
+}

package/dist/components/data-table/data-table.mdx

@@ -0,0 +1,22 @@
+import { Meta, Title, Description, Canvas } from "@storybook/blocks";
+import * as DataTableStories from "./data-table.stories";
+
+<Meta of={DataTableStories} />
+
+<Title />
+
+# Data Table
+
+Enterprise-grade data table uniting `@yuva-devlab/ui` Table and Pagination primitives with column sorting, customizable cell renderers, and empty state fallbacks.
+
+## Default with Pagination
+
+<Canvas of={DataTableStories.Default} />
+
+## Static (No Pagination)
+
+<Canvas of={DataTableStories.WithoutPagination} />
+
+## Empty State Fallback
+
+<Canvas of={DataTableStories.Empty} />

package/dist/components/date-picker/date-picker.css

@@ -3,7 +3,7 @@
   justify-content: flex-start;
   text-align: left;
   font-weight: 400;
-  height: 2.25rem;
+  height: var(--control-height-md, 2.25rem);
   border-color: var(--border);
   background-color: color-mix(in oklch, var(--secondary) 40%, transparent);
 }
@@ -18,7 +18,7 @@
 }
 
 .dl-date-picker-icon {
-  margin-inline-end: 0.5rem;
+  margin-inline-end: var(--space-2, 0.5rem);
   width: 1rem;
   height: 1rem;
   flex-shrink: 0;

package/dist/components/date-picker/date-picker.mdx

@@ -0,0 +1,18 @@
+import { Meta, Title, Description, Canvas, Controls } from "@storybook/blocks";
+import * as DatePickerStories from "./date-picker.stories";
+
+<Meta of={DatePickerStories} />
+
+<Title />
+
+# Date Picker
+
+Accessible date picker component featuring an interactive popover calendar with local timezone safety.
+
+## Default
+
+<Canvas of={DatePickerStories.Default} />
+
+## Component Properties
+
+<Controls />

package/dist/components/dialog/dialog.css

@@ -28,7 +28,7 @@
   padding: 0;
   gap: 0;
   box-shadow: 0 16px 48px rgb(0 0 0 / 0.24);
-  border-radius: var(--radius-lg, 0.75rem);
+  border-radius: var(--radius, 0.75rem);
   overflow: hidden;
   overscroll-behavior: contain;
 }
@@ -112,8 +112,8 @@
 .dl-dialog__header {
   display: flex;
   flex-direction: column;
-  gap: 0.375rem;
-  padding: 1.25rem 1.5rem;
+  gap: var(--form-field-gap, 0.375rem);
+  padding: var(--dialog-padding, 1.25rem 1.5rem);
   padding-right: 3.5rem;
   border-bottom: 1px solid var(--border);
   flex-shrink: 0;
@@ -122,14 +122,14 @@
   flex: 1 1 auto;
   min-height: 0;
   overflow-y: auto;
-  padding: 1.25rem 1.5rem;
+  padding: var(--dialog-padding, 1.25rem 1.5rem);
 }
 .dl-dialog__footer {
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
-  gap: 0.5rem;
-  padding: 0.875rem 1.5rem;
+  gap: var(--form-field-gap, 0.5rem);
+  padding: var(--dialog-padding, 0.875rem 1.5rem);
   border-top: 1px solid var(--border);
   background-color: color-mix(in srgb, var(--muted) 35%, transparent);
   flex-shrink: 0;

package/dist/components/drawer/drawer.mdx

@@ -0,0 +1,18 @@
+import { Meta, Title, Description, Canvas, Controls } from "@storybook/blocks";
+import * as DrawerStories from "./drawer.stories";
+
+<Meta of={DrawerStories} />
+
+<Title />
+
+# Drawer
+
+Sliding modal drawer panel typically anchored to the viewport edge for secondary tasks.
+
+## Default
+
+<Canvas of={DrawerStories.Default} />
+
+## Component Properties
+
+<Controls />

package/dist/components/dropdown-menu/dropdown-menu.css

@@ -51,6 +51,24 @@
   font-weight: 600;
   color: var(--muted-foreground);
 }
+.dl-menu-item--inset,
+.dl-menu-label--inset {
+  padding-left: 2rem;
+}
+.dl-menu-item__chevron {
+  margin-left: auto;
+  width: 1rem;
+  height: 1rem;
+}
+.dl-menu-item__icon {
+  width: 1rem;
+  height: 1rem;
+}
+.dl-menu-item__radio-dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  fill: currentColor;
+}
 .dl-menu-separator {
   margin: 0.25rem -0.25rem;
   height: 1px;

package/dist/components/dropdown-menu/dropdown-menu.mdx

@@ -0,0 +1,18 @@
+import { Meta, Title, Description, Canvas, Controls } from "@storybook/blocks";
+import * as DropdownMenuStories from "./dropdown-menu.stories";
+
+<Meta of={DropdownMenuStories} />
+
+<Title />
+
+# Dropdown Menu
+
+Displays a menu of actions or options triggered by a button with full keyboard navigation.
+
+## Default
+
+<Canvas of={DropdownMenuStories.Default} />
+
+## Component Properties
+
+<Controls />

package/dist/components/empty-state/empty-state.css

@@ -0,0 +1,67 @@
+/**
+ * @file empty-state.css
+ * @description Scoped styles for the EmptyState component.
+ * Governed by semantic design tokens.
+ */
+
+.dl-empty-state {
+  position: relative;
+  display: flex;
+  min-height: 14rem;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border-radius: var(--radius, 0.5rem);
+  border: 1px dashed var(--border);
+  background-color: color-mix(in oklab, var(--card) 40%, transparent);
+  padding: var(--card-padding, var(--space-6, 1.5rem));
+  text-align: center;
+  backdrop-filter: blur(8px);
+}
+
+.dl-empty-state__icon-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--control-height-lg, 2.5rem);
+  height: var(--control-height-lg, 2.5rem);
+  border-radius: var(--radius-md, 0.375rem);
+  border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent);
+  background-color: color-mix(in oklab, var(--primary) 10%, transparent);
+  color: var(--primary);
+  margin-bottom: var(--space-3, 0.75rem);
+}
+
+.dl-empty-state__icon-box svg {
+  width: var(--icon-md, 1.25rem);
+  height: var(--icon-md, 1.25rem);
+}
+
+.dl-empty-state__title {
+  font-family: var(--theme-font-display, var(--theme-font-sans, inherit));
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.25;
+  letter-spacing: -0.01em;
+  color: var(--foreground);
+  margin: 0;
+}
+
+.dl-empty-state__description {
+  margin: 0;
+  margin-top: var(--space-1, 0.25rem);
+  max-width: 24rem;
+  font-size: 0.75rem;
+  line-height: 1.5;
+  color: var(--muted-foreground);
+}
+
+.dl-empty-state__actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2, 0.5rem);
+  margin-top: var(--space-4, 1rem);
+}

package/dist/components/empty-state/empty-state.mdx

@@ -0,0 +1,18 @@
+import { Meta, Title, Description, Canvas, Controls } from "@storybook/blocks";
+import * as EmptyStateStories from "./empty-state.stories";
+
+<Meta of={EmptyStateStories} />
+
+<Title />
+
+# Empty State
+
+Informational placeholder displayed when tables, collections, or searches yield zero results.
+
+## Default
+
+<Canvas of={EmptyStateStories.Default} />
+
+## Component Properties
+
+<Controls />

package/dist/components/file-tree/file-tree.css

@@ -0,0 +1,58 @@
+.dl-file-tree {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  font-size: 0.8125rem;
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
+  user-select: none;
+  background-color: var(--card, var(--background));
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md, 0.375rem);
+  padding: 0.375rem;
+}
+
+.dl-file-tree__node {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--radius-sm, 0.25rem);
+  cursor: pointer;
+  color: var(--muted-foreground);
+  transition: all 0.12s ease;
+}
+
+.dl-file-tree__node:hover {
+  background-color: var(--accent);
+  color: var(--accent-foreground);
+}
+
+.dl-file-tree__node--active {
+  background-color: var(--accent);
+  color: var(--foreground);
+  font-weight: 500;
+}
+
+.dl-file-tree__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+
+.dl-file-tree__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dl-file-tree__children {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  margin-left: 0.75rem;
+  padding-left: 0.5rem;
+  border-left: 1px solid var(--border);
+}