@donotdev/components 0.0.11 → 0.0.12

package/dist/styles/index.css

@@ -145,7 +145,7 @@
   --font-headline: var(--font-sans);
 
   --font-mono:
-    ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Consolas, Monaco,
+    ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, Monaco,
     'Liberation Mono', monospace;
 
   /* Typography Scale - Musical Scale System (STANDARD density defaults - Major Third 1.25×) */
@@ -702,6 +702,16 @@ em {
 
 /* packages/components/src/styles/patterns.css */
 
+/* Menu scroll area pattern - shared by DropdownMenu, Select, Combobox */
+
+.dndev-menu-scroll-area {
+  max-height: 50dvh;
+}
+
+.dndev-menu-scroll-area .dndev-scroll-area-viewport {
+  max-height: 50dvh;
+}
+
 /* ===========================
          FORM COMPONENTS (BASE)
          =========================== */
@@ -896,6 +906,9 @@ em {
   border-radius: var(--radius-surface);
   box-shadow: var(--shadow-md);
   padding: var(--gap-md); /* 1rem / 16px default */
+  padding-block-start: calc(
+    var(--gap-md) + var(--gap-sm)
+  ); /* Extra top padding for FloatingLabels */
   position: relative;
   overflow: hidden;
   contain: layout style;
@@ -1146,6 +1159,9 @@ em {
   border-radius: var(--radius-floating);
   box-shadow: var(--shadow-md);
   padding: var(--gap-md); /* 1rem / 16px default */
+  padding-block-start: calc(
+    var(--gap-md) + var(--gap-sm)
+  ); /* Extra top padding for FloatingLabels */
   position: relative;
   overflow: hidden;
   contain: layout style;
@@ -2076,8 +2092,9 @@ em {
   display: flex;
   flex-direction: column;
   overflow-y: auto;
-  overflow-x: hidden;
+  overflow-x: visible;
   min-height: 0;
+  padding-block-start: var(--gap-sm);
 }
 
 .dndev-modal-title {
@@ -2136,6 +2153,60 @@ em {
   flex-direction: column;
 }
 
+/* ===========================
+         AUTH FORM PATTERNS
+         =========================== */
+
+/* Auth form step indicator */
+
+.dndev-auth-step {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.5em;
+  padding: var(--gap-sm);
+  border-radius: var(--radius-sm);
+  font-weight: var(--font-weight-semibold);
+  transition: all var(--dur-fast) var(--ease-in-out);
+}
+
+.dndev-auth-step[data-state='active'] {
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+  }
+
+.dndev-auth-step[data-state='pending'] {
+    background-color: var(--muted);
+    color: var(--muted-foreground);
+  }
+
+.dndev-auth-step[data-state='completed'] {
+    background-color: var(--success);
+    color: var(--success-foreground);
+  }
+
+/* Opacity data attribute */
+
+[data-opacity='50'] {
+  opacity: 0.5;
+}
+
+[data-opacity='70'] {
+  opacity: 0.7;
+}
+
+/* Inset data attribute - indent content */
+
+[data-inset='true'] {
+  padding-inline-start: var(--gap-md);
+}
+
+/* Password strength bar height override */
+
+.dndev-password-strength-bar {
+  height: 4px;
+}
+
 /* 5. Individual Component Styles */
 
 /* packages/components/src/atomic/Accordion/Accordion.css */
@@ -3343,7 +3414,7 @@ em {
 .dndev-combobox-content {
   width: var(--radix-popover-trigger-width);
   min-width: var(--radix-popover-trigger-width);
-  max-height: 300px;
+  max-width: var(--radix-popover-trigger-width);
   display: flex;
   flex-direction: column;
   padding: 0;
@@ -3358,14 +3429,6 @@ em {
   width: 100%;
 }
 
-.dndev-combobox-list {
-  overflow-y: auto;
-  padding: var(--gap-tight);
-  display: flex;
-  flex-direction: column;
-  gap: var(--gap-none);
-}
-
 .dndev-combobox-option {
   all: unset;
   display: flex;
@@ -3422,6 +3485,30 @@ em {
   color: var(--muted-foreground);
 }
 
+/* Creatable option styling */
+
+.dndev-combobox-option-create {
+  color: var(--primary);
+  font-style: italic;
+}
+
+.dndev-combobox-option-create-icon {
+  width: var(--icon-md);
+  height: var(--icon-md);
+  margin-inline-end: var(--gap-sm);
+  flex-shrink: 0;
+}
+
+.dndev-combobox-open .dndev-input-with-trailing-icon .dndev-input-icon svg,
+.dndev-combobox-open .dndev-input-with-trailing-icon .dndev-input-icon > * {
+  transform: rotate(180deg);
+}
+
+.dndev-input-with-trailing-icon .dndev-input-icon svg,
+.dndev-input-with-trailing-icon .dndev-input-icon > * {
+  transition: transform var(--dur-fast) var(--ease-in-out);
+}
+
 /* packages/components/src/atomic/DualCard/DualCard.css */
 
 .dndev-dual-card {
@@ -3608,13 +3695,15 @@ em {
   text-align: start;
   display: block;
   line-height: 1.5; /* Match line numbers */
+  font-size: var(--font-size-sm); /* Explicit match with line numbers */
 }
 
-/* Ensure shiki-generated code respects line-height */
+/* Ensure shiki-generated code respects line-height AND font-size */
 
 .dndev-code-code pre,
 .dndev-code-code code {
   line-height: inherit;
+  font-size: inherit; /* Match parent font-size */
 }
 
 /* packages/components/src/atomic/Command/Command.css */
@@ -3992,16 +4081,6 @@ em {
   padding: var(--gap-sm);
 }
 
-/* Dropdown scroll area - constrain height to 50dvh */
-
-.dndev-dropdown-scroll-area {
-  max-height: 50dvh;
-}
-
-.dndev-dropdown-scroll-area .dndev-scroll-area-viewport {
-  max-height: 50dvh;
-}
-
 /* Checked state styling */
 
 .dndev-interactive[data-role='menu-item'][data-state='checked'] {
@@ -4525,6 +4604,49 @@ em {
     margin-inline-start: var(--gap-sm);
   }
 
+/* Floating Label - positioned absolutely at top of input fields */
+
+.dndev-floating-label {
+  position: absolute;
+  inset-inline-start: var(--gap-md);
+  top: calc(-1 * var(--font-size-xs) / 2 - 1px);
+  font-size: var(--font-size-xs);
+  font-weight: 500;
+  pointer-events: none;
+  z-index: 1;
+  background-color: var(--background);
+  padding: 0 var(--gap-sm);
+  line-height: 1;
+  color: var(--foreground);
+}
+
+/* Inherit background when inside floating containers (dropdowns, menus, popovers) */
+
+.dndev-floating .dndev-floating-label,
+.dndev-menu-content .dndev-floating-label,
+[class*='dndev-dropdown'] .dndev-floating-label,
+[class*='dndev-navigation'] .dndev-floating-label {
+  background-color: var(--popover);
+  color: var(--popover-foreground);
+}
+
+/* When floating container has blank glow, use solid popover background */
+
+.dndev-floating[data-glow='blank'] .dndev-floating-label {
+  background-color: var(--popover);
+}
+
+.dndev-floating-label[data-disabled='true'] {
+  color: var(--muted-foreground);
+}
+
+.dndev-floating-label[data-truncate='true'] {
+  max-width: calc(100% - var(--gap-md) * 2);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 /* packages/components/src/atomic/List/List.css */
 
 .dndev-list {
@@ -4833,20 +4955,41 @@ em {
 /* packages/components/src/atomic/PasswordInput/PasswordInput.css */
 
 .dndev-password-input-with-toggle {
-  padding-inline-end: var(--gap-lg);
+  padding-inline-end: calc(var(--gap-xl) + var(--gap-md)) !important;
 }
 
+/* Eye icon toggle - ALWAYS at end, cannot be overridden */
+
 .dndev-password-toggle-button {
-  position: absolute;
-  inset-inline-end: 0;
-  top: 0;
-  height: 100%;
-  padding-inline-start: var(--gap-md);
-  padding-inline-end: var(--gap-md);
+  position: absolute !important;
+  top: 50% !important;
+  transform: translateY(-50%) !important;
+  inset-inline-end: var(--gap-sm) !important;
+  inset-inline-start: unset !important;
+  background: none !important;
+  border: none !important;
+  cursor: pointer !important;
+  padding: var(--gap-tight) !important;
+  display: flex !important;
+  align-items: center !important;
+  opacity: var(--opacity-muted) !important;
+  transition: opacity var(--dur-fast) var(--ease-in-out) !important;
+  -webkit-user-select: none !important;
+     -moz-user-select: none !important;
+          user-select: none !important;
+  z-index: 1 !important;
+}
+
+.dndev-password-toggle-button:hover,
+.dndev-password-toggle-button:focus {
+  opacity: 1 !important;
+  outline: none !important;
 }
 
 .dndev-password-toggle-icon {
   color: var(--muted-foreground);
+  width: var(--icon-sm);
+  height: var(--icon-sm);
 }
 
 /* packages/components/src/atomic/Pagination/Pagination.css */
@@ -4938,9 +5081,32 @@ em {
   height: 100%;
   width: 100%;
   flex: 1;
+  background-color: var(--primary);
   transition: transform var(--dur-normal) var(--ease-in-out);
+
+  /* Variant colors */
 }
 
+[data-variant='default']:is(.dndev-progress [data-radix-progress-indicator]) {
+    background-color: var(--primary);
+  }
+
+[data-variant='accent']:is(.dndev-progress [data-radix-progress-indicator]) {
+    background-color: var(--accent);
+  }
+
+[data-variant='success']:is(.dndev-progress [data-radix-progress-indicator]) {
+    background-color: var(--success);
+  }
+
+[data-variant='warning']:is(.dndev-progress [data-radix-progress-indicator]) {
+    background-color: var(--warning);
+  }
+
+[data-variant='destructive']:is(.dndev-progress [data-radix-progress-indicator]) {
+    background-color: var(--destructive);
+  }
+
 /* packages/components/src/atomic/RadioGroup/RadioGroup.css */
 
 /* Uses shared .dndev-control-group pattern from patterns.css */
@@ -5146,7 +5312,6 @@ em {
   display: flex;
   flex-direction: column;
   padding: 0;
-  overflow-y: auto;
 }
 
 .dndev-interactive[data-radix-select-item] {
@@ -5268,6 +5433,7 @@ em {
   letter-spacing: 0.2em;
   color: var(--accent) !important;
   margin-block-end: var(--gap-md);
+  text-align: center; /* DEFAULT - works without attribute selector */
 }
 
 .dndev-section-full-width[data-text-align='start'] .dndev-section-title {
@@ -5313,11 +5479,13 @@ em {
   transition: transform var(--dur-normal) var(--ease-in-out);
 }
 
-.dndev-section-full-width[data-text-align='start'] .dndev-section-title-trigger {
+.dndev-section-full-width[data-text-align='start']
+  .dndev-section-title-trigger {
   justify-content: flex-start;
 }
 
-.dndev-section-full-width[data-text-align='center'] .dndev-section-title-trigger {
+.dndev-section-full-width[data-text-align='center']
+  .dndev-section-title-trigger {
   justify-content: center;
 }
 
@@ -6187,6 +6355,64 @@ em {
   transform: translateX(calc(2.75rem - 1.25rem - 0.125rem));
 }
 
+/* Switch with labels container */
+
+.dndev-switch-with-labels {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-sm);
+  flex-wrap: wrap;
+}
+
+/* Labels - keep switch and its labels on one line when possible */
+
+.dndev-switch-with-labels > .dndev-switch {
+  flex-shrink: 0;
+}
+
+.dndev-switch-label {
+  font-size: var(--font-size-sm);
+  transition: color var(--dur-normal) var(--ease-in-out),
+    font-weight var(--dur-normal) var(--ease-in-out);
+  white-space: nowrap;
+}
+
+/* Unchecked label - active when switch is unchecked */
+
+.dndev-switch-with-labels:not(:has(.dndev-switch[data-state='checked']))
+  .dndev-switch-label-unchecked,
+.dndev-switch-with-labels[data-checked='false']
+  .dndev-switch-label-unchecked {
+  color: var(--foreground);
+  font-weight: var(--font-weight-medium);
+}
+
+.dndev-switch-with-labels:has(.dndev-switch[data-state='checked'])
+  .dndev-switch-label-unchecked,
+.dndev-switch-with-labels[data-checked='true']
+  .dndev-switch-label-unchecked {
+  color: var(--muted-foreground);
+  font-weight: var(--font-weight-normal);
+}
+
+/* Checked label - active when switch is checked */
+
+.dndev-switch-with-labels:has(.dndev-switch[data-state='checked'])
+  .dndev-switch-label-checked,
+.dndev-switch-with-labels[data-checked='true']
+  .dndev-switch-label-checked {
+  color: var(--foreground);
+  font-weight: var(--font-weight-medium);
+}
+
+.dndev-switch-with-labels:not(:has(.dndev-switch[data-state='checked']))
+  .dndev-switch-label-checked,
+.dndev-switch-with-labels[data-checked='false']
+  .dndev-switch-label-checked {
+  color: var(--muted-foreground);
+  font-weight: var(--font-weight-normal);
+}
+
 /* packages/components/src/atomic/Table/Table.css */
 
 .dndev-table-wrapper {
@@ -6252,7 +6478,7 @@ em {
 /* Table head (th) styles */
 
 .dndev-table-head {
-  text-align: left;
+  text-align: start;
   vertical-align: middle;
   font-weight: 500;
   color: var(--muted-foreground);
@@ -6269,12 +6495,12 @@ em {
     text-align: center;
   }
 
-.dndev-table-head[data-align='right'] {
-    text-align: right;
+.dndev-table-head[data-align='end'] {
+    text-align: end;
   }
 
-.dndev-table-head[data-align='left'] {
-    text-align: left;
+.dndev-table-head[data-align='start'] {
+    text-align: start;
   }
 
 /* Table cell (td) styles */
@@ -6290,14 +6516,48 @@ em {
     text-align: center;
   }
 
-.dndev-table-cell[data-align='right'] {
-    text-align: right;
+.dndev-table-cell[data-align='end'] {
+    text-align: end;
   }
 
-.dndev-table-cell[data-align='left'] {
-    text-align: left;
+.dndev-table-cell[data-align='start'] {
+    text-align: start;
   }
 
+/* Excel-like grid lines variant */
+
+.dndev-table-grid .dndev-table-head,
+.dndev-table-grid .dndev-table-cell {
+  border: 1px solid var(--border);
+  padding: 0;
+}
+
+.dndev-table-grid .dndev-table-row {
+  border-bottom: 1px solid var(--border);
+}
+
+.dndev-table-grid .dndev-table-row:last-child {
+  border-bottom: 1px solid var(--border);
+}
+
+/* Input components inside grid cells should be borderless and fit snugly */
+
+.dndev-table-grid .dndev-table-cell .dndev-input,
+.dndev-table-grid .dndev-table-cell input[type="text"],
+.dndev-table-grid .dndev-table-cell input[type="number"] {
+  border: none;
+  background: transparent;
+  width: 100%;
+  height: 100%;
+  box-shadow: none;
+}
+
+.dndev-table-grid .dndev-table-cell .dndev-input:focus,
+.dndev-table-grid .dndev-table-cell input:focus {
+  outline: 2px solid var(--primary);
+  outline-offset: -2px;
+}
+
 /* Table caption styles */
 
 .dndev-table-caption {
@@ -6314,7 +6574,7 @@ em {
 
 .dndev-table-search-icon {
   position: absolute;
-  left: var(--gap-md);
+  inset-inline-start: var(--gap-md);
   top: 50%;
   transform: translateY(-50%);
   width: var(--icon-md);
@@ -6481,7 +6741,7 @@ em {
 .dndev-tag {
   display: inline-flex;
   align-items: center;
-  gap: var(--gap-xs);
+  gap: var(--gap-sm);
   border-radius: var(--radius-full);
   border: 1px solid transparent;
   font-size: var(--font-size-sm);
@@ -6611,8 +6871,18 @@ em {
   font-weight: var(--font-weight-medium);
   line-height: var(--line-height);
   background-color: transparent; /* Text never has background, only color changes */
+
+  /* Respect semantic HTML elements */
 }
 
+.dndev-text-base:is(strong) {
+    font-weight: var(--font-weight-semibold);
+  }
+
+.dndev-text-base:is(em) {
+    font-style: italic;
+  }
+
 .dndev-text-base[data-variant='default'] {
     color: inherit;
   }
@@ -7560,7 +7830,7 @@ em {
   align-items: stretch;
 }
 
-@media (width <= 699px) {
+@media (width <=699px) {
 
 [data-cols='2'] {
     grid-template-columns: repeat(1, minmax(350px, 1fr));
@@ -7572,14 +7842,14 @@ em {
   align-items: stretch;
 }
 
-@media (width <= 1049px) {
+@media (width <=1049px) {
 
 [data-cols='3'] {
     grid-template-columns: repeat(2, minmax(350px, 1fr));
 }
   }
 
-@media (width <= 699px) {
+@media (width <=699px) {
 
 [data-cols='3'] {
     grid-template-columns: repeat(1, minmax(350px, 1fr));
@@ -7593,21 +7863,21 @@ em {
   /* Responsive: reduce columns when container is narrow */
 }
 
-@media (width <= 1399px) {
+@media (width <=1399px) {
 
 [data-cols='4'] {
     grid-template-columns: repeat(3, minmax(0, 1fr));
 }
   }
 
-@media (width <= 1049px) {
+@media (width <=1049px) {
 
 [data-cols='4'] {
     grid-template-columns: repeat(2, minmax(0, 1fr));
 }
   }
 
-@media (width <= 699px) {
+@media (width <=699px) {
 
 [data-cols='4'] {
     grid-template-columns: repeat(1, minmax(0, 1fr));
@@ -7674,18 +7944,22 @@ em {
 
 code {
   font-family: var(--font-mono);
-  font-size: inherit; /* Inherit parent size */
-  font-weight: inherit; /* Inherit parent weight */
+  font-size: inherit;
+  /* Inherit parent size */
+  font-weight: inherit;
+  /* Inherit parent weight */
   line-height: inherit;
   color: inherit;
-  background: transparent; /* No background by default */
+  background: transparent;
+  /* No background by default */
 }
 
 /* Code variant - visual styling (background, padding, can apply to any element) */
 
 [data-variant='code'] {
   font-family: var(--font-mono);
-  font-size: var(--font-size-sm); /* Default small size */
+  font-size: var(--font-size-sm);
+  /* Default small size */
   background: var(--muted);
   color: var(--muted-foreground);
   padding: var(--gap-sm) var(--gap-md);
@@ -7780,7 +8054,8 @@ h4[data-variant='code'] {
 
 .dndev-relative {
   position: relative;
-  min-width: 0; /* Allow flex items to shrink below content size */
+  min-width: 0;
+  /* Allow flex items to shrink below content size */
 }
 
 .dndev-absolute {
@@ -7885,7 +8160,7 @@ h4[data-variant='code'] {
    RESPONSIVE DISPLAY
    =========================== */
 
-@media (width >= 768px) {
+@media (width >=768px) {
   .dndev-md\:block {
     display: block;
   }
@@ -7911,7 +8186,7 @@ h4[data-variant='code'] {
   }
 }
 
-@media (width >= 1024px) {
+@media (width >=1024px) {
   .dndev-lg\:block {
     display: block;
   }
@@ -7971,6 +8246,10 @@ h4[data-variant='code'] {
    Components are unaffected - they own their own spacing
    =========================== */
 
+.prose {
+  text-align: start;
+}
+
 .prose h1,.prose h2,.prose h3,.prose h4,.prose h5,.prose h6 {
     margin-block: var(--gap-md);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@donotdev/components",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "type": "module",
   "private": false,
   "description": "Styled UI components for DoNotDev",

package/dist/atomic/Combobox/ComboboxPrimitive.d.ts

@@ -1,18 +0,0 @@
-/**
- * @fileoverview Combobox Primitives
- * @description Low-level primitives for building combobox components
- *
- * @version 0.0.1
- * @since 0.0.1
- * @author AMBROISE PARK Consulting
- */
-import * as PopoverPrimitive from '@radix-ui/react-popover';
-export declare const ComboboxRootPrimitive: import("react").FC<PopoverPrimitive.PopoverProps>;
-export declare const ComboboxTriggerPrimitive: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-export declare const ComboboxContentPrimitive: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverContentProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const ComboboxAnchorPrimitive: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & import("react").RefAttributes<HTMLDivElement>>;
-export type ComboboxRootProps = PopoverPrimitive.PopoverProps;
-export type ComboboxTriggerProps = PopoverPrimitive.PopoverTriggerProps;
-export type ComboboxContentProps = PopoverPrimitive.PopoverContentProps;
-export type ComboboxAnchorProps = PopoverPrimitive.PopoverAnchorProps;
-//# sourceMappingURL=ComboboxPrimitive.d.ts.map

package/dist/atomic/Combobox/ComboboxPrimitive.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ComboboxPrimitive.d.ts","sourceRoot":"","sources":["../../../src/atomic/Combobox/ComboboxPrimitive.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAE5D,eAAO,MAAM,qBAAqB,mDAAwB,CAAC;AAC3D,eAAO,MAAM,wBAAwB,oIAA2B,CAAC;AACjE,eAAO,MAAM,wBAAwB,iIAA2B,CAAC;AACjE,eAAO,MAAM,uBAAuB,gIAA0B,CAAC;AAE/D,MAAM,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,YAAY,CAAC;AAC9D,MAAM,MAAM,oBAAoB,GAAG,gBAAgB,CAAC,mBAAmB,CAAC;AACxE,MAAM,MAAM,oBAAoB,GAAG,gBAAgB,CAAC,mBAAmB,CAAC;AACxE,MAAM,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,kBAAkB,CAAC"}

package/dist/atomic/Combobox/ComboboxPrimitive.js

@@ -1,14 +0,0 @@
-// packages/components/src/atomic/Combobox/ComboboxPrimitive.tsx
-/**
- * @fileoverview Combobox Primitives
- * @description Low-level primitives for building combobox components
- *
- * @version 0.0.1
- * @since 0.0.1
- * @author AMBROISE PARK Consulting
- */
-import * as PopoverPrimitive from '@radix-ui/react-popover';
-export const ComboboxRootPrimitive = PopoverPrimitive.Root;
-export const ComboboxTriggerPrimitive = PopoverPrimitive.Trigger;
-export const ComboboxContentPrimitive = PopoverPrimitive.Content;
-export const ComboboxAnchorPrimitive = PopoverPrimitive.Anchor;