@yuva-devlab/ui 1.1.0 → 1.3.0

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.css

@@ -0,0 +1,30 @@
+.dl-card {
+  border-radius: var(--radius-lg, 0.5rem);
+  border: 1px solid var(--border);
+  background-color: var(--card);
+  color: var(--card-foreground);
+  box-shadow: 0 1px 3px rgb(0 0 0/0.08);
+}
+.dl-card__header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  padding: 1.5rem;
+}
+.dl-card__title {
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: -0.01em;
+}
+.dl-card__desc {
+  font-size: 0.875rem;
+  color: var(--muted-foreground);
+}
+.dl-card__content {
+  padding: 1.5rem;
+}
+.dl-card__footer {
+  display: flex;
+  align-items: center;
+  padding: 1.5rem;
+}

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/carousel/carousel.css

@@ -0,0 +1,67 @@
+.dl-carousel {
+  position: relative;
+}
+
+.dl-carousel-viewport {
+  overflow: hidden;
+}
+
+.dl-carousel-track {
+  display: flex;
+}
+
+.dl-carousel-track--horizontal {
+  margin-left: -1rem;
+}
+
+.dl-carousel-track--vertical {
+  margin-top: -1rem;
+  flex-direction: column;
+}
+
+.dl-carousel-item {
+  min-width: 0;
+  flex-shrink: 0;
+  flex-grow: 0;
+  flex-basis: 100%;
+}
+
+.dl-carousel-item--horizontal {
+  padding-left: 1rem;
+}
+
+.dl-carousel-item--vertical {
+  padding-top: 1rem;
+}
+
+.dl-carousel-btn {
+  position: absolute;
+  border-radius: 9999px;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+}
+
+.dl-carousel-btn--prev-horizontal {
+  left: -3rem;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.dl-carousel-btn--prev-vertical {
+  top: -3rem;
+  left: 50%;
+  transform: translateX(-50%) rotate(90deg);
+}
+
+.dl-carousel-btn--next-horizontal {
+  right: -3rem;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.dl-carousel-btn--next-vertical {
+  bottom: -3rem;
+  left: 50%;
+  transform: translateX(-50%) rotate(90deg);
+}

package/dist/components/chart/chart.css

@@ -0,0 +1,38 @@
+.dl-chart-container {
+  display: flex;
+  aspect-ratio: 16 / 9;
+  justify-content: center;
+  font-size: 0.75rem;
+}
+
+.dl-chart-container .recharts-cartesian-axis-tick text {
+  fill: var(--muted-foreground);
+}
+
+.dl-chart-container .recharts-cartesian-grid line[stroke="#ccc"] {
+  stroke: color-mix(in oklch, var(--border) 50%, transparent);
+}
+
+.dl-chart-container .recharts-layer {
+  outline: none;
+}
+
+.dl-chart-tooltip {
+  display: grid;
+  min-width: 8rem;
+  align-items: flex-start;
+  gap: 0.375rem;
+  border-radius: var(--radius-lg, 0.5rem);
+  border: 1px solid color-mix(in oklch, var(--border) 50%, transparent);
+  background-color: var(--background);
+  padding: 0.375rem 0.625rem;
+  font-size: 0.75rem;
+  box-shadow: 0 8px 32px rgb(0 0 0 / 0.18);
+}
+
+.dl-chart-legend {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+}

package/dist/components/checkbox/checkbox.css

@@ -0,0 +1,27 @@
+.dl-checkbox {
+  display: flex;
+  height: 1rem;
+  width: 1rem;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-sm, 0.25rem);
+  border: 1px solid var(--primary);
+  box-shadow: 0 1px 2px rgb(0 0 0/0.05);
+  cursor: pointer;
+  background: transparent;
+  padding: 0;
+  transition: background-color 0.15s ease;
+}
+.dl-checkbox:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+.dl-checkbox:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.dl-checkbox[data-state="checked"] {
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+}

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/command/command.css

@@ -0,0 +1,125 @@
+.dl-command {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: var(--radius-md, 0.375rem);
+  background-color: var(--popover);
+  color: var(--popover-foreground);
+  width: 100%;
+  height: 100%;
+}
+
+.dl-command-dialog-content {
+  overflow: hidden;
+  padding: 0;
+}
+
+.dl-command-input-wrapper {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--border);
+  padding-inline: 0.75rem;
+}
+
+.dl-command-input-icon {
+  margin-inline-end: 0.5rem;
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  opacity: 0.5;
+}
+
+.dl-command-input {
+  display: flex;
+  height: 2.5rem;
+  width: 100%;
+  border-radius: var(--radius-md, 0.375rem);
+  background-color: transparent;
+  padding-block: 0.75rem;
+  font-size: 0.875rem;
+  color: var(--foreground);
+  outline: none;
+  border: none;
+  font-family: inherit;
+}
+
+.dl-command-input::placeholder {
+  color: var(--muted-foreground);
+}
+
+.dl-command-input:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.dl-command-list {
+  max-height: 18.75rem;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.dl-command-empty {
+  padding-block: 1.5rem;
+  text-align: center;
+  font-size: 0.875rem;
+  color: var(--muted-foreground);
+}
+
+.dl-command-group {
+  overflow: hidden;
+  padding: 0.25rem;
+}
+
+.dl-command-group [cmdk-group-heading] {
+  padding-inline: 0.5rem;
+  padding-block: 0.375rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--muted-foreground);
+}
+
+.dl-command-separator {
+  margin-inline: -0.25rem;
+  height: 1px;
+  background-color: var(--border);
+}
+
+.dl-command-item {
+  position: relative;
+  display: flex;
+  cursor: default;
+  gap: 0.5rem;
+  user-select: none;
+  align-items: center;
+  border-radius: var(--radius-sm, 0.25rem);
+  padding: 0.375rem 0.5rem;
+  font-size: 0.875rem;
+  outline: none;
+  color: inherit;
+  transition:
+    background-color 0.1s ease,
+    color 0.1s ease;
+}
+
+.dl-command-item[data-disabled="true"] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.dl-command-item[data-selected="true"] {
+  background-color: var(--accent);
+  color: var(--accent-foreground);
+}
+
+.dl-command-item svg {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+
+.dl-command-shortcut {
+  margin-inline-start: auto;
+  font-size: 0.75rem;
+  letter-spacing: 0.1em;
+  color: var(--muted-foreground);
+}

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

@@ -0,0 +1,19 @@
+.dl-context-menu-content {
+  z-index: 50;
+  min-width: 8rem;
+  overflow: hidden;
+  border-radius: var(--radius-md, 0.375rem);
+  border: 1px solid var(--border);
+  background-color: var(--popover);
+  color: var(--popover-foreground);
+  padding: 0.25rem;
+  box-shadow: 0 4px 24px rgb(0 0 0 / 0.12);
+}
+
+.dl-context-menu-content[data-state="open"] {
+  animation: dl-fade-in 100ms ease;
+}
+
+.dl-context-menu-content[data-state="closed"] {
+  animation: dl-fade-out 100ms ease;
+}

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

@@ -0,0 +1,30 @@
+.dl-date-picker-trigger {
+  width: 100%;
+  justify-content: flex-start;
+  text-align: left;
+  font-weight: 400;
+  height: 2.25rem;
+  border-color: var(--border);
+  background-color: color-mix(in oklch, var(--secondary) 40%, transparent);
+}
+
+.dl-date-picker-trigger:hover {
+  background-color: color-mix(in oklch, var(--secondary) 60%, transparent);
+  color: var(--foreground);
+}
+
+.dl-date-picker-trigger--placeholder {
+  color: var(--muted-foreground);
+}
+
+.dl-date-picker-icon {
+  margin-inline-end: 0.5rem;
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+
+.dl-date-picker-content {
+  width: auto;
+  padding: 0;
+}

package/dist/components/dialog/dialog.css

@@ -0,0 +1,145 @@
+.dl-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background-color: rgb(0 0 0 / 0.75);
+}
+.dl-dialog-overlay[data-state="open"] {
+  animation: dl-fade-in 150ms ease;
+}
+.dl-dialog-overlay[data-state="closed"] {
+  animation: dl-fade-out 150ms ease;
+}
+
+.dl-dialog-content {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 50;
+  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: 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;
+}
+.dl-dialog-content[data-state="closed"] {
+  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: 1.25rem;
+  top: 1.25rem;
+  border-radius: var(--radius-sm, 0.25rem);
+  opacity: 0.7;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  padding: 0.25rem;
+  transition: opacity 0.15s ease;
+  color: var(--foreground);
+  z-index: 10;
+}
+.dl-dialog-close:hover {
+  opacity: 1;
+}
+.dl-dialog-close:focus-visible {
+  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.25;
+  letter-spacing: -0.01em;
+}
+.dl-dialog__desc {
+  font-size: 0.875rem;
+  color: var(--muted-foreground);
+}

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/drawer/drawer.css

@@ -0,0 +1,64 @@
+.dl-drawer-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background-color: rgb(0 0 0 / 0.8);
+}
+
+.dl-drawer-content {
+  position: fixed;
+  inset-inline: 0;
+  bottom: 0;
+  z-index: 50;
+  margin-top: 6rem;
+  display: flex;
+  height: auto;
+  flex-direction: column;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+  border: 1px solid var(--border);
+  background-color: var(--background);
+}
+
+.dl-drawer-handle {
+  margin-inline: auto;
+  margin-top: 1rem;
+  height: 0.5rem;
+  width: 6.25rem;
+  border-radius: 9999px;
+  background-color: var(--muted);
+}
+
+.dl-drawer-header {
+  display: grid;
+  gap: 0.375rem;
+  padding: 1rem;
+  text-align: center;
+}
+
+@media (min-width: 640px) {
+  .dl-drawer-header {
+    text-align: left;
+  }
+}
+
+.dl-drawer-footer {
+  margin-top: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1rem;
+}
+
+.dl-drawer-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: -0.01em;
+  color: var(--foreground);
+}
+
+.dl-drawer-desc {
+  font-size: 0.875rem;
+  color: var(--muted-foreground);
+}