@yuva-devlab/ui 1.4.4 → 2.0.0

package/dist/components/carousel/carousel.mdx

@@ -0,0 +1,18 @@
+import { Meta, Title, Description, Canvas, Controls } from "@storybook/blocks";
+import * as CarouselStories from "./carousel.stories";
+
+<Meta of={CarouselStories} />
+
+<Title />
+
+# Carousel
+
+Motion-driven cyclic slideshow component for cycling through sequential media or card elements.
+
+## Default
+
+<Canvas of={CarouselStories.Default} />
+
+## Component Properties
+
+<Controls />

package/dist/components/chart/chart.css

@@ -30,9 +30,95 @@
   box-shadow: 0 8px 32px rgb(0 0 0 / 0.18);
 }
 
+.dl-chart-tooltip__label {
+  font-weight: 500;
+}
+.dl-chart-tooltip__grid {
+  display: grid;
+  gap: 0.375rem;
+}
+.dl-chart-tooltip__item {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  gap: 0.5rem;
+}
+.dl-chart-tooltip__item--center {
+  align-items: center;
+}
+.dl-chart-tooltip__item svg {
+  color: var(--muted-foreground);
+  width: 0.625rem;
+  height: 0.625rem;
+}
+
+.dl-chart-tooltip__indicator {
+  flex-shrink: 0;
+  border-radius: var(--radius-xs, 0.125rem);
+  background-color: var(--color-bg);
+}
+.dl-chart-tooltip__indicator--dot {
+  width: 0.625rem;
+  height: 0.625rem;
+}
+.dl-chart-tooltip__indicator--line {
+  width: 0.25rem;
+}
+.dl-chart-tooltip__indicator--dashed {
+  width: 0;
+  border: 1.5px dashed var(--color-border);
+  background: transparent;
+}
+.dl-chart-tooltip__indicator--nested {
+  margin-block: 0.125rem;
+}
+
+.dl-chart-tooltip__row {
+  display: flex;
+  flex: 1 1 0%;
+  justify-content: space-between;
+  align-items: center;
+  line-height: 1;
+}
+.dl-chart-tooltip__row--end {
+  align-items: flex-end;
+}
+.dl-chart-tooltip__item-label {
+  color: var(--muted-foreground);
+}
+.dl-chart-tooltip__item-value {
+  font-family: var(--font-mono, monospace);
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  color: var(--foreground);
+}
+
 .dl-chart-legend {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 1rem;
 }
+.dl-chart-legend--top {
+  padding-bottom: 0.75rem;
+}
+.dl-chart-legend--bottom {
+  padding-top: 0.75rem;
+}
+
+.dl-chart-legend__item {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+.dl-chart-legend__item svg {
+  color: var(--muted-foreground);
+  width: 0.75rem;
+  height: 0.75rem;
+}
+.dl-chart-legend__indicator {
+  flex-shrink: 0;
+  border-radius: var(--radius-xs, 0.125rem);
+  width: 0.5rem;
+  height: 0.5rem;
+}

package/dist/components/chart/chart.mdx

@@ -0,0 +1,18 @@
+import { Meta, Title, Description, Canvas, Controls } from "@storybook/blocks";
+import * as ChartStories from "./chart.stories";
+
+<Meta of={ChartStories} />
+
+<Title />
+
+# Chart
+
+Responsive data visualization charting components powered by Recharts with design system token integration.
+
+## Default
+
+<Canvas of={ChartStories.Default} />
+
+## Component Properties
+
+<Controls />

package/dist/components/checkbox/checkbox.css

@@ -25,3 +25,14 @@
   background-color: var(--primary);
   color: var(--primary-foreground);
 }
+
+.dl-checkbox-indicator {
+  display: grid;
+  place-content: center;
+  color: currentColor;
+}
+
+.dl-checkbox-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}

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/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/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/form/form.mdx

@@ -0,0 +1,18 @@
+import { Meta, Title, Description, Canvas, Controls } from "@storybook/blocks";
+import * as FormStories from "./form.stories";
+
+<Meta of={FormStories} />
+
+<Title />
+
+# Form
+
+Form management primitive integrating validation messages, field descriptions, and labels.
+
+## Default
+
+<Canvas of={FormStories.Default} />
+
+## Component Properties
+
+<Controls />

package/dist/components/hover-card/hover-card.mdx

@@ -0,0 +1,18 @@
+import { Meta, Title, Description, Canvas, Controls } from "@storybook/blocks";
+import * as HoverCardStories from "./hover-card.stories";
+
+<Meta of={HoverCardStories} />
+
+<Title />
+
+# Hover Card
+
+Allows sighted users to preview content available behind a link or trigger upon mouse hover.
+
+## Default
+
+<Canvas of={HoverCardStories.Default} />
+
+## Component Properties
+
+<Controls />

package/dist/components/input-otp/input-otp.mdx

@@ -0,0 +1,18 @@
+import { Meta, Title, Description, Canvas, Controls } from "@storybook/blocks";
+import * as InputOtpStories from "./input-otp.stories";
+
+<Meta of={InputOtpStories} />
+
+<Title />
+
+# Input OTP
+
+One-time password and verification code input component with discrete segmented digit boxes.
+
+## Default
+
+<Canvas of={InputOtpStories.Default} />
+
+## Component Properties
+
+<Controls />

package/dist/components/label/label.mdx

@@ -0,0 +1,18 @@
+import { Meta, Title, Description, Canvas, Controls } from "@storybook/blocks";
+import * as LabelStories from "./label.stories";
+
+<Meta of={LabelStories} />
+
+<Title />
+
+# Label
+
+Accessible text label associated with form controls for screen reader compatibility.
+
+## Default
+
+<Canvas of={LabelStories.Default} />
+
+## Component Properties
+
+<Controls />