@yuva-devlab/ui 1.4.3 → 2.0.0

package/dist/components/calendar/calendar.css

@@ -0,0 +1,183 @@
+.dl-calendar {
+  --cell-size: var(--control-height-sm, 2rem);
+  display: inline-block;
+  width: fit-content;
+  max-width: 100%;
+  padding: var(--space-3, 0.75rem);
+  box-sizing: border-box;
+  color: var(--foreground);
+}
+
+.dl-calendar .rdp-root {
+  width: fit-content;
+  margin: 0 auto;
+}
+
+.dl-calendar .rdp-months,
+.dl-calendar .dl-calendar__months {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: calc(var(--cell-size, 2rem) * 7);
+  box-sizing: border-box;
+}
+
+@media (min-width: 768px) {
+  .dl-calendar .rdp-months,
+  .dl-calendar .dl-calendar__months {
+    flex-direction: row;
+  }
+}
+
+.dl-calendar .rdp-month,
+.dl-calendar .dl-calendar__month {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  width: 100%;
+}
+
+.dl-calendar table.rdp-month_grid,
+.dl-calendar table.dl-calendar__table,
+.dl-calendar table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+  margin: 0;
+}
+
+.dl-calendar th.rdp-weekday,
+.dl-calendar th {
+  width: calc(100% / 7);
+  height: var(--cell-size, 2rem);
+  text-align: center;
+  vertical-align: middle;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--muted-foreground);
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+.dl-calendar td.rdp-day,
+.dl-calendar td {
+  width: calc(100% / 7);
+  height: var(--cell-size, 2rem);
+  padding: 2px !important;
+  margin: 0;
+  text-align: center;
+  vertical-align: middle;
+  background: transparent !important;
+  border: none !important;
+  box-sizing: border-box;
+}
+
+.dl-calendar .dl-calendar__week-number {
+  display: flex;
+  width: var(--cell-size, 2rem);
+  height: var(--cell-size, 2rem);
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.dl-calendar button.rdp-day_button,
+.dl-calendar .dl-calendar__day-button {
+  width: 100% !important;
+  height: 100% !important;
+  min-width: 0 !important;
+  min-height: 0 !important;
+  margin: 0 auto !important;
+  padding: 0 !important;
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 1 / 1;
+  border-radius: var(--radius-md, 0.375rem) !important;
+  border: none !important;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1;
+  color: var(--foreground);
+  background: transparent;
+  cursor: pointer;
+  box-sizing: border-box;
+  transition: all 0.15s ease;
+}
+
+.dl-calendar button.rdp-day_button:hover:not(:disabled) {
+  background-color: var(--accent) !important;
+  color: var(--accent-foreground) !important;
+}
+
+.dl-calendar td[aria-selected="true"] button.rdp-day_button,
+.dl-calendar td.rdp-selected button.rdp-day_button,
+.dl-calendar button.rdp-day_button[data-selected="true"],
+.dl-calendar button.rdp-day_button[data-selected-single="true"] {
+  background-color: var(--primary) !important;
+  color: var(--primary-foreground) !important;
+  border-radius: var(--radius-md, 0.375rem) !important;
+  font-weight: 600;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
+}
+
+.dl-calendar td[aria-selected="true"] button.rdp-day_button:hover,
+.dl-calendar td.rdp-selected button.rdp-day_button:hover,
+.dl-calendar button.rdp-day_button[data-selected="true"]:hover,
+.dl-calendar button.rdp-day_button[data-selected-single="true"]:hover {
+  background-color: color-mix(in oklch, var(--primary) 88%, black) !important;
+  color: var(--primary-foreground) !important;
+}
+
+.dl-calendar
+  td.rdp-today:not([aria-selected="true"]):not(.rdp-selected)
+  button.rdp-day_button {
+  background-color: color-mix(
+    in oklch,
+    var(--secondary) 60%,
+    transparent
+  ) !important;
+  color: var(--foreground) !important;
+  font-weight: 600;
+  border: 1px solid var(--border) !important;
+}
+
+.dl-calendar td.rdp-range_start {
+  background-color: var(--accent) !important;
+  border-radius: var(--radius-md, 0.375rem) 0 0 var(--radius-md, 0.375rem) !important;
+}
+
+.dl-calendar td.rdp-range_middle {
+  background-color: var(--accent) !important;
+  border-radius: 0 !important;
+}
+
+.dl-calendar td.rdp-range_middle button.rdp-day_button {
+  background: transparent !important;
+  color: var(--accent-foreground) !important;
+  border-radius: 0 !important;
+}
+
+.dl-calendar td.rdp-range_end {
+  background-color: var(--accent) !important;
+  border-radius: 0 var(--radius-md, 0.375rem) var(--radius-md, 0.375rem) !important;
+}
+
+.dl-calendar td.rdp-outside button.rdp-day_button {
+  color: var(--muted-foreground) !important;
+  opacity: 0.35;
+}
+
+.dl-calendar button.rdp-day_button:disabled {
+  color: var(--muted-foreground) !important;
+  opacity: 0.25;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.dl-calendar td.rdp-hidden {
+  visibility: hidden;
+  pointer-events: none;
+}

package/dist/components/calendar/calendar.mdx

@@ -0,0 +1,18 @@
+import { Meta, Title, Description, Canvas, Controls } from "@storybook/blocks";
+import * as CalendarStories from "./calendar.stories";
+
+<Meta of={CalendarStories} />
+
+<Title />
+
+# Calendar
+
+Interactive calendar date selection component supporting day, month, and year navigation.
+
+## Default
+
+<Canvas of={CalendarStories.Default} />
+
+## Component Properties
+
+<Controls />

package/dist/components/card/card.css

@@ -1,5 +1,5 @@
 .dl-card {
-  border-radius: var(--radius-lg, 0.5rem);
+  border-radius: var(--radius, 0.75rem);
   border: 1px solid var(--border);
   background-color: var(--card);
   color: var(--card-foreground);
@@ -9,7 +9,7 @@
   display: flex;
   flex-direction: column;
   gap: 0.375rem;
-  padding: 1.5rem;
+  padding: var(--card-padding, 1.5rem);
 }
 .dl-card__title {
   font-weight: 600;
@@ -21,10 +21,10 @@
   color: var(--muted-foreground);
 }
 .dl-card__content {
-  padding: 1.5rem;
+  padding: var(--card-padding, 1.5rem);
 }
 .dl-card__footer {
   display: flex;
   align-items: center;
-  padding: 1.5rem;
+  padding: var(--card-padding, 1.5rem);
 }

package/dist/components/carousel/carousel.css

@@ -27,18 +27,18 @@
 }
 
 .dl-carousel-item--horizontal {
-  padding-left: 1rem;
+  padding-left: var(--space-4, 1rem);
 }
 
 .dl-carousel-item--vertical {
-  padding-top: 1rem;
+  padding-top: var(--space-4, 1rem);
 }
 
 .dl-carousel-btn {
   position: absolute;
   border-radius: 9999px;
-  width: 2rem;
-  height: 2rem;
+  width: var(--control-height-sm, 2rem);
+  height: var(--control-height-sm, 2rem);
   padding: 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.css

@@ -13,6 +13,8 @@
   cursor: pointer;
   transition: all 0.15s ease;
   user-select: none;
+  white-space: nowrap;
+  flex-shrink: 0;
 }
 
 .dl-copy-button:hover {

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,13 +18,19 @@
 }
 
 .dl-date-picker-icon {
-  margin-inline-end: 0.5rem;
+  margin-inline-end: var(--space-2, 0.5rem);
   width: 1rem;
   height: 1rem;
   flex-shrink: 0;
 }
 
-.dl-date-picker-content {
-  width: auto;
-  padding: 0;
+.dl-date-picker-content,
+.dl-popover.dl-date-picker-content {
+  width: fit-content !important;
+  max-width: fit-content !important;
+  padding: 0 !important;
+  box-shadow: 0 4px 20px rgb(0 0 0 / 0.15);
+  border-radius: var(--radius-lg, 0.5rem);
+  border: 1px solid var(--border);
+  background-color: var(--popover);
 }

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 />