@yuva-devlab/ui 1.2.0 → 1.3.0

package/dist/components/alert/alert.css

@@ -3,39 +3,61 @@
   width: 100%;
   border-radius: var(--radius-lg, 0.5rem);
   border: 1px solid var(--border);
-  padding: 1rem;
+  padding: 0.875rem 1rem;
   font-size: 0.875rem;
   display: grid;
-  grid-template-columns: auto 1fr;
-  gap: 0 0.75rem;
+  grid-template-columns: 1fr;
+  row-gap: 0.25rem;
   align-items: start;
 }
-.dl-alert svg {
+
+.dl-alert:has(> svg) {
+  grid-template-columns: 1rem 1fr;
+  column-gap: 0.75rem;
+}
+
+.dl-alert > svg {
+  grid-column: 1;
+  grid-row: 1 / span 2;
   width: 1rem;
   height: 1rem;
   margin-top: 0.125rem;
+  color: currentColor;
+  flex-shrink: 0;
+}
+
+.dl-alert:has(> svg) .dl-alert__title,
+.dl-alert:has(> svg) .dl-alert__desc {
+  grid-column: 2;
 }
+
 .dl-alert--default {
-  background-color: var(--background);
+  background-color: var(--card, var(--background));
   color: var(--foreground);
 }
+
 .dl-alert--destructive {
-  border-color: color-mix(in oklch, var(--destructive) 50%, transparent);
+  border-color: color-mix(in oklch, var(--destructive) 45%, transparent);
   color: var(--destructive);
   background-color: color-mix(
     in oklch,
-    var(--destructive) 6%,
+    var(--destructive) 8%,
     var(--background)
   );
 }
+
 .dl-alert__title {
   font-weight: 600;
-  line-height: 1;
+  line-height: 1.35;
   letter-spacing: -0.01em;
-  margin-bottom: 0.25rem;
 }
+
 .dl-alert__desc {
   font-size: 0.875rem;
   color: var(--muted-foreground);
   line-height: 1.5;
 }
+
+.dl-alert--destructive .dl-alert__desc {
+  color: color-mix(in oklch, var(--destructive) 80%, var(--foreground));
+}

package/dist/components/alert/alert.mdx

@@ -0,0 +1,26 @@
+import { Meta, Title, Description, Canvas, Controls } from "@storybook/blocks";
+import * as AlertStories from "./alert.stories";
+
+<Meta of={AlertStories} />
+
+<Title />
+
+# Alert
+
+The `Alert` component displays contextual feedback, announcements, or critical system errors to users with accessible ARIA semantics and high-contrast color styling.
+
+## Default Alert
+
+Used for neutral announcements, system notices, and informational messages.
+
+<Canvas of={AlertStories.Default} />
+
+## Destructive Alert
+
+Used for critical runtime exceptions, failed agent steps, or irreversible actions.
+
+<Canvas of={AlertStories.Destructive} />
+
+## Component Properties
+
+<Controls />

package/dist/components/alert-dialog/alert-dialog.css

@@ -19,15 +19,19 @@
   top: 50%;
   transform: translate(-50%, -50%);
   z-index: 50;
-  display: grid;
-  width: 100%;
-  max-width: 32rem;
+  display: flex;
+  flex-direction: column;
+  width: calc(100% - 2rem);
+  max-width: var(--dl-dialog-max-width, 32rem);
+  max-height: calc(100dvh - 3rem);
   gap: 1rem;
   border: 1px solid var(--border);
   background-color: var(--background);
   padding: 1.5rem;
   box-shadow: 0 8px 32px rgb(0 0 0 / 0.2);
   border-radius: var(--radius-lg, 0.5rem);
+  overflow-y: auto;
+  overscroll-behavior: contain;
 }
 
 .dl-alert-dialog-content[data-state="open"] {
@@ -43,6 +47,7 @@
   flex-direction: column;
   gap: 0.5rem;
   text-align: center;
+  flex-shrink: 0;
 }
 
 @media (min-width: 640px) {
@@ -55,6 +60,7 @@
   display: flex;
   flex-direction: column-reverse;
   gap: 0.5rem;
+  flex-shrink: 0;
 }
 
 @media (min-width: 640px) {

package/dist/components/avatar/avatar.mdx

@@ -0,0 +1,18 @@
+import { Meta, Title, Description, Canvas, Controls } from "@storybook/blocks";
+import * as AvatarStories from "./avatar.stories";
+
+<Meta of={AvatarStories} />
+
+<Title />
+
+# Avatar
+
+Image element with fallback text initials for representing users, agents, or entities.
+
+## Default
+
+<Canvas of={AvatarStories.Default} />
+
+## Component Properties
+
+<Controls />

package/dist/components/badge/badge.mdx

@@ -0,0 +1,24 @@
+import { Meta, Title, Description, Canvas, Controls } from "@storybook/blocks";
+import * as BadgeStories from "./badge.stories";
+
+<Meta of={BadgeStories} />
+
+<Title />
+
+# Badge
+
+Displays metadata, statuses, count indicators, or short labels with semantic color tokens.
+
+## Default
+
+<Canvas of={BadgeStories.Default} />
+
+## Variants
+
+Available in `default`, `secondary`, `outline`, `destructive`, `success`, `warning`, and `info`.
+
+<Canvas of={BadgeStories.AllVariants} />
+
+## Component Properties
+
+<Controls />

package/dist/components/button/button.mdx

@@ -0,0 +1,40 @@
+import { Meta, Title, Description, Canvas, Controls } from "@storybook/blocks";
+import * as ButtonStories from "./button.stories";
+
+<Meta of={ButtonStories} />
+
+<Title />
+
+# Button
+
+Buttons allow users to take actions, submit forms, and make choices with a single tap or click. Built with pure CSS tokens and accessible interactive states.
+
+## Default
+
+<Canvas of={ButtonStories.Default} />
+
+## Variants
+
+Available in `default`, `secondary`, `outline`, `destructive`, `ghost`, and `link`.
+
+<Canvas of={ButtonStories.AllVariants} />
+
+## Sizes
+
+Supports `sm`, `default`, `lg`, and `icon`.
+
+<Canvas of={ButtonStories.AllSizes} />
+
+## With Icons
+
+Integrates seamlessly with Lucide or any SVG icon set.
+
+<Canvas of={ButtonStories.WithIcons} />
+
+## Disabled State
+
+<Canvas of={ButtonStories.Disabled} />
+
+## Component Properties
+
+<Controls />

package/dist/components/card/card.mdx

@@ -0,0 +1,18 @@
+import { Meta, Title, Description, Canvas, Controls } from "@storybook/blocks";
+import * as CardStories from "./card.stories";
+
+<Meta of={CardStories} />
+
+<Title />
+
+# Card
+
+Structured content container featuring header, title, description, content body, and action footer subcomponents.
+
+## Default
+
+<Canvas of={CardStories.Default} />
+
+## Component Properties
+
+<Controls />

package/dist/components/checkbox/checkbox.mdx

@@ -0,0 +1,22 @@
+import { Meta, Title, Description, Canvas, Controls } from "@storybook/blocks";
+import * as CheckboxStories from "./checkbox.stories";
+
+<Meta of={CheckboxStories} />
+
+<Title />
+
+# Checkbox
+
+Accessible binary selection control built upon Radix UI Checkbox supporting checked, unchecked, and indeterminate states.
+
+## Default
+
+<Canvas of={CheckboxStories.Default} />
+
+## Disabled State
+
+<Canvas of={CheckboxStories.Disabled} />
+
+## Component Properties
+
+<Controls />

package/dist/components/dialog/dialog.css

@@ -17,15 +17,19 @@
   top: 50%;
   transform: translate(-50%, -50%);
   z-index: 50;
-  display: grid;
-  width: 100%;
-  max-width: 32rem;
-  gap: 1rem;
+  display: flex;
+  flex-direction: column;
+  width: calc(100% - 2rem);
+  max-width: var(--dl-dialog-max-width, 32rem);
+  max-height: calc(100dvh - 3rem);
   border: 1px solid var(--border);
   background-color: var(--background);
-  padding: 1.5rem;
-  box-shadow: 0 8px 32px rgb(0 0 0/0.18);
-  border-radius: var(--radius-lg, 0.5rem);
+  padding: 0;
+  gap: 0;
+  box-shadow: 0 16px 48px rgb(0 0 0 / 0.24);
+  border-radius: var(--radius-lg, 0.75rem);
+  overflow: hidden;
+  overscroll-behavior: contain;
 }
 .dl-dialog-content[data-state="open"] {
   animation: dl-zoom-in 150ms ease;
@@ -34,10 +38,42 @@
   animation: dl-zoom-out 150ms ease;
 }
 
+/* ── Sizing Variants ── */
+.dl-dialog--sm {
+  max-width: 24rem;
+}
+.dl-dialog--md {
+  max-width: 32rem;
+}
+.dl-dialog--lg {
+  width: 90vw;
+  max-width: 44rem;
+  height: 80vh;
+  max-height: 80vh;
+}
+.dl-dialog--xl {
+  width: 92vw;
+  max-width: 56rem;
+  height: 85vh;
+  max-height: 85vh;
+}
+.dl-dialog--2xl {
+  width: 94vw;
+  max-width: 72rem;
+  height: 85vh;
+  max-height: 85vh;
+}
+.dl-dialog--full {
+  width: calc(100vw - 2rem);
+  max-width: calc(100vw - 2rem);
+  height: calc(100dvh - 2rem);
+  max-height: calc(100dvh - 2rem);
+}
+
 .dl-dialog-close {
   position: absolute;
-  right: 1rem;
-  top: 1rem;
+  right: 1.25rem;
+  top: 1.25rem;
   border-radius: var(--radius-sm, 0.25rem);
   opacity: 0.7;
   cursor: pointer;
@@ -46,6 +82,7 @@
   padding: 0.25rem;
   transition: opacity 0.15s ease;
   color: var(--foreground);
+  z-index: 10;
 }
 .dl-dialog-close:hover {
   opacity: 1;
@@ -54,22 +91,52 @@
   outline: 2px solid var(--ring);
   outline-offset: 2px;
 }
+.dl-dialog-close svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.dl-dialog-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
 
 .dl-dialog__header {
   display: flex;
   flex-direction: column;
   gap: 0.375rem;
+  padding: 1.25rem 1.5rem;
+  padding-right: 3.5rem;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+.dl-dialog__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  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;
+  border-top: 1px solid var(--border);
+  background-color: color-mix(in srgb, var(--muted) 35%, transparent);
+  flex-shrink: 0;
 }
 .dl-dialog__title {
   font-size: 1.125rem;
   font-weight: 600;
-  line-height: 1;
+  line-height: 1.25;
   letter-spacing: -0.01em;
 }
 .dl-dialog__desc {

package/dist/components/dialog/dialog.mdx

@@ -0,0 +1,18 @@
+import { Meta, Title, Description, Canvas, Controls } from "@storybook/blocks";
+import * as DialogStories from "./dialog.stories";
+
+<Meta of={DialogStories} />
+
+<Title />
+
+# Dialog
+
+Modal dialog built on accessible Radix primitives with focus trapping, ESC dismiss, and animated backdrop overlays.
+
+## Default
+
+<Canvas of={DialogStories.Default} />
+
+## Component Properties
+
+<Controls />

package/dist/components/input/input.mdx

@@ -0,0 +1,30 @@
+import { Meta, Title, Description, Canvas, Controls } from "@storybook/blocks";
+import * as InputStories from "./input.stories";
+
+<Meta of={InputStories} />
+
+<Title />
+
+# Input
+
+Form text input supporting start and end icons, password masking toggles, error borders, and customizable focus rings.
+
+## Default
+
+<Canvas of={InputStories.Default} />
+
+## With Start Icon
+
+<Canvas of={InputStories.WithStartIcon} />
+
+## With End Icon
+
+<Canvas of={InputStories.WithEndIcon} />
+
+## Disabled State
+
+<Canvas of={InputStories.Disabled} />
+
+## Component Properties
+
+<Controls />

package/dist/components/progress/progress.mdx

@@ -0,0 +1,18 @@
+import { Meta, Title, Description, Canvas, Controls } from "@storybook/blocks";
+import * as ProgressStories from "./progress.stories";
+
+<Meta of={ProgressStories} />
+
+<Title />
+
+# Progress
+
+Visual progress indicator displaying task completion, data loading, or quota utilization.
+
+## Default
+
+<Canvas of={ProgressStories.Default} />
+
+## Component Properties
+
+<Controls />

package/dist/components/select/select.mdx

@@ -0,0 +1,18 @@
+import { Meta, Title, Description, Canvas, Controls } from "@storybook/blocks";
+import * as SelectStories from "./select.stories";
+
+<Meta of={SelectStories} />
+
+<Title />
+
+# Select
+
+Accessible dropdown selector component built on Radix primitives with grouped items, keyboard navigation, and custom trigger values.
+
+## Default
+
+<Canvas of={SelectStories.Default} />
+
+## Component Properties
+
+<Controls />

package/dist/components/skeleton/skeleton.mdx

@@ -0,0 +1,18 @@
+import { Meta, Title, Description, Canvas, Controls } from "@storybook/blocks";
+import * as SkeletonStories from "./skeleton.stories";
+
+<Meta of={SkeletonStories} />
+
+<Title />
+
+# Skeleton
+
+Placeholder skeleton loading animation used while waiting for data or component trees to resolve.
+
+## Default
+
+<Canvas of={SkeletonStories.Default} />
+
+## Component Properties
+
+<Controls />

package/dist/components/sonner/sonner.mdx

@@ -0,0 +1,22 @@
+import { Meta, Title, Description, Canvas, Controls } from "@storybook/blocks";
+import * as SonnerStories from "./sonner.stories";
+
+<Meta of={SonnerStories} />
+
+<Title />
+
+# Toaster / Toast
+
+An opinionated, elegant toast notification component built upon Sonner and styled with `@yuva-devlab/ui` design system tokens.
+
+## Default
+
+<Canvas of={SonnerStories.Default} />
+
+## With Action Button
+
+<Canvas of={SonnerStories.WithAction} />
+
+## Component Properties
+
+<Controls />

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

@@ -0,0 +1,24 @@
+import { Meta, Title, Description, Canvas, Controls } from "@storybook/blocks";
+import * as StatusBadgeStories from "./status-badge.stories";
+
+<Meta of={StatusBadgeStories} />
+
+<Title />
+
+# StatusBadge
+
+Context-aware status indicator with colored dot and semantic token mapping for agent execution states.
+
+## Default
+
+<Canvas of={StatusBadgeStories.Default} />
+
+## Statuses
+
+Automatically adapts its color and pulse dot based on status names like `Active`, `Completed`, `In Progress`, `Needs Approval`, `Failed`, and `Offline`.
+
+<Canvas of={StatusBadgeStories.AllStatuses} />
+
+## Component Properties
+
+<Controls />

package/dist/components/switch/switch.mdx

@@ -0,0 +1,22 @@
+import { Meta, Title, Description, Canvas, Controls } from "@storybook/blocks";
+import * as SwitchStories from "./switch.stories";
+
+<Meta of={SwitchStories} />
+
+<Title />
+
+# Switch
+
+A control that allows the user to toggle between checked and unchecked states.
+
+## Default
+
+<Canvas of={SwitchStories.Default} />
+
+## Disabled State
+
+<Canvas of={SwitchStories.Disabled} />
+
+## Component Properties
+
+<Controls />

package/dist/components/table/table.mdx

@@ -0,0 +1,18 @@
+import { Meta, Title, Description, Canvas, Controls } from "@storybook/blocks";
+import * as TableStories from "./table.stories";
+
+<Meta of={TableStories} />
+
+<Title />
+
+# Table
+
+Accessible data table layout components providing header, body, rows, cells, and captions with hover row highlights.
+
+## Default
+
+<Canvas of={TableStories.Default} />
+
+## Component Properties
+
+<Controls />

package/dist/components/tabs/tabs.mdx

@@ -0,0 +1,18 @@
+import { Meta, Title, Description, Canvas, Controls } from "@storybook/blocks";
+import * as TabsStories from "./tabs.stories";
+
+<Meta of={TabsStories} />
+
+<Title />
+
+# Tabs
+
+Tabbed interface built upon Radix UI Tabs for switching between related views and panels with keyboard accessibility.
+
+## Default
+
+<Canvas of={TabsStories.Default} />
+
+## Component Properties
+
+<Controls />