@vectramindnpm/unified-design-system 0.2.3 → 0.2.5

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ui/time-picker.css"],"sourcesContent":["/* ── Shared TimePicker (components/ui/time-picker.tsx) ──────────────────────\n   Page-agnostic hour/minute scroller — self-contained field look so it works\n   consistently wherever it's used, without depending on any host app's own\n   form-field base class. Colocated with, and imported directly by, the\n   component.\n\n   Converted from the source app's time-picker.scss: flattened out of Sass\n   nesting and out from under that app's `#fpneo` Tailwind-important wrapper\n   (a host-app-specific selector that would never match here), and with its\n   `@apply` utilities inlined as plain CSS so this file has zero build-step\n   dependency on Tailwind. */\n\n.shared-time-picker__field {\n  position: relative;\n  display: flex;\n  height: 2.25rem;\n  width: 100%;\n  cursor: pointer;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n  border-radius: 0.5rem;\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n  font-size: 0.8125rem;\n  border: 1px solid var(--color-neutral-350);\n  background: var(--color-ext-f8f8fb);\n}\n\n.shared-time-picker__field[data-open='true'] {\n  border-color: var(--color-brand-blue);\n  box-shadow: 0 0 0 1px var(--color-ext-5c62bc40);\n}\n\n.shared-time-picker__field[data-disabled='true'] {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.shared-time-picker__value {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: var(--color-neutral-600);\n  font-weight: 400;\n}\n\n.shared-time-picker__value[data-filled='true'] {\n  color: var(--color-brand-blue);\n  font-weight: 600;\n}\n\n.shared-time-picker__icon {\n  font-size: 0.875rem;\n  color: var(--color-neutral-gray);\n  flex-shrink: 0;\n}\n\n.shared-time-picker__popup {\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  z-index: 30;\n  display: flex;\n  background: var(--color-neutral-white);\n  border-radius: 0.5rem;\n  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);\n  border: 1px solid var(--color-neutral-350);\n  overflow: hidden;\n}\n\n.shared-time-picker__popup--up {\n  top: auto;\n  bottom: calc(100% + 4px);\n}\n\n.shared-time-picker__col {\n  max-height: 200px;\n  overflow-y: auto;\n  width: 56px;\n  scrollbar-width: none; /* Firefox */\n  -ms-overflow-style: none; /* legacy Edge/IE */\n}\n\n.shared-time-picker__col::-webkit-scrollbar {\n  display: none; /* Chrome/Safari/WebKit */\n}\n\n.shared-time-picker__sep {\n  display: flex;\n  align-items: center;\n  color: var(--color-neutral-gray);\n  font-weight: 600;\n}\n\n.shared-time-picker__option {\n  text-align: center;\n  font-size: 0.8125rem;\n  padding: 6px 0;\n  color: var(--color-neutral-700);\n  cursor: pointer;\n}\n\n.shared-time-picker__option:hover:not([data-selected='true']):not([data-disabled='true']) {\n  background: var(--color-neutral-200);\n}\n\n.shared-time-picker__option[data-selected='true'] {\n  background: rgba(92, 98, 188, 0.1);\n  color: var(--color-brand-blue);\n  font-weight: 700;\n}\n\n.shared-time-picker__option[data-disabled='true'] {\n  color: var(--color-neutral-600);\n  opacity: 0.5;\n  pointer-events: none;\n  cursor: default;\n}\n"],"mappings":";AAYA,CAAC;AACC,YAAU;AACV,WAAS;AACT,UAAQ;AACR,SAAO;AACP,UAAQ;AACR,eAAa;AACb,mBAAiB;AACjB,OAAK;AACL,iBAAe;AACf,gBAAc;AACd,iBAAe;AACf,aAAW;AACX,UAAQ,IAAI,MAAM,IAAI;AACtB,cAAY,IAAI;AAClB;AAEA,CAjBC,yBAiByB,CAAC;AACzB,gBAAc,IAAI;AAClB,cAAY,EAAE,EAAE,EAAE,IAAI,IAAI;AAC5B;AAEA,CAtBC,yBAsByB,CAAC;AACzB,WAAS;AACT,kBAAgB;AAClB;AAEA,CAAC;AACC,eAAa;AACb,YAAU;AACV,iBAAe;AACf,SAAO,IAAI;AACX,eAAa;AACf;AAEA,CARC,yBAQyB,CAAC;AACzB,SAAO,IAAI;AACX,eAAa;AACf;AAEA,CAAC;AACC,aAAW;AACX,SAAO,IAAI;AACX,eAAa;AACf;AAEA,CAAC;AACC,YAAU;AACV,OAAK,KAAK,KAAK,EAAE;AACjB,QAAM;AACN,WAAS;AACT,WAAS;AACT,cAAY,IAAI;AAChB,iBAAe;AACf,cAAY,EAAE,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACrC,UAAQ,IAAI,MAAM,IAAI;AACtB,YAAU;AACZ;AAEA,CAAC;AACC,OAAK;AACL,UAAQ,KAAK,KAAK,EAAE;AACtB;AAEA,CAAC;AACC,cAAY;AACZ,cAAY;AACZ,SAAO;AACP,mBAAiB;AACjB,sBAAoB;AACtB;AAEA,CARC,uBAQuB;AACtB,WAAS;AACX;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,SAAO,IAAI;AACX,eAAa;AACf;AAEA,CAAC;AACC,cAAY;AACZ,aAAW;AACX,WAAS,IAAI;AACb,SAAO,IAAI;AACX,UAAQ;AACV;AAEA,CARC,0BAQ0B,MAAM,KAAK,CAAC,oBAAsB,KAAK,CAAC;AACjE,cAAY,IAAI;AAClB;AAEA,CAZC,0BAY0B,CAAC;AAC1B,cAAY,KAAK,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE;AAC9B,SAAO,IAAI;AACX,eAAa;AACf;AAEA,CAlBC,0BAkB0B,CAAC;AAC1B,SAAO,IAAI;AACX,WAAS;AACT,kBAAgB;AAChB,UAAQ;AACV;","names":[]}
+{"version":3,"sources":["../src/components/ui/time-picker.css"],"sourcesContent":["/* ── Shared TimePicker (components/ui/time-picker.tsx) ──────────────────────\r\n   Page-agnostic hour/minute scroller — self-contained field look so it works\r\n   consistently wherever it's used, without depending on any host app's own\r\n   form-field base class. Colocated with, and imported directly by, the\r\n   component.\r\n\r\n   Converted from the source app's time-picker.scss: flattened out of Sass\r\n   nesting and out from under that app's `#fpneo` Tailwind-important wrapper\r\n   (a host-app-specific selector that would never match here), and with its\r\n   `@apply` utilities inlined as plain CSS so this file has zero build-step\r\n   dependency on Tailwind. */\r\n\r\n.shared-time-picker__field {\r\n  position: relative;\r\n  display: flex;\r\n  height: 2.25rem;\r\n  width: 100%;\r\n  cursor: pointer;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 0.5rem;\r\n  border-radius: 0.5rem;\r\n  padding-left: 0.75rem;\r\n  padding-right: 0.75rem;\r\n  font-size: 0.8125rem;\r\n  border: 1px solid var(--color-neutral-350);\r\n  background: var(--color-ext-f8f8fb);\r\n}\r\n\r\n.shared-time-picker__field[data-open='true'] {\r\n  border-color: var(--color-brand-blue);\r\n  box-shadow: 0 0 0 1px var(--color-ext-5c62bc40);\r\n}\r\n\r\n.shared-time-picker__field[data-disabled='true'] {\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n}\r\n\r\n.shared-time-picker__value {\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  color: var(--color-neutral-600);\r\n  font-weight: 400;\r\n}\r\n\r\n.shared-time-picker__value[data-filled='true'] {\r\n  color: var(--color-brand-blue);\r\n  font-weight: 600;\r\n}\r\n\r\n.shared-time-picker__icon {\r\n  font-size: 0.875rem;\r\n  color: var(--color-neutral-gray);\r\n  flex-shrink: 0;\r\n}\r\n\r\n.shared-time-picker__popup {\r\n  position: absolute;\r\n  top: calc(100% + 4px);\r\n  left: 0;\r\n  z-index: 30;\r\n  display: flex;\r\n  background: var(--color-neutral-white);\r\n  border-radius: 0.5rem;\r\n  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);\r\n  border: 1px solid var(--color-neutral-350);\r\n  overflow: hidden;\r\n}\r\n\r\n.shared-time-picker__popup--up {\r\n  top: auto;\r\n  bottom: calc(100% + 4px);\r\n}\r\n\r\n.shared-time-picker__col {\r\n  max-height: 200px;\r\n  overflow-y: auto;\r\n  width: 56px;\r\n  scrollbar-width: none; /* Firefox */\r\n  -ms-overflow-style: none; /* legacy Edge/IE */\r\n}\r\n\r\n.shared-time-picker__col::-webkit-scrollbar {\r\n  display: none; /* Chrome/Safari/WebKit */\r\n}\r\n\r\n.shared-time-picker__sep {\r\n  display: flex;\r\n  align-items: center;\r\n  color: var(--color-neutral-gray);\r\n  font-weight: 600;\r\n}\r\n\r\n.shared-time-picker__option {\r\n  text-align: center;\r\n  font-size: 0.8125rem;\r\n  padding: 6px 0;\r\n  color: var(--color-neutral-700);\r\n  cursor: pointer;\r\n}\r\n\r\n.shared-time-picker__option:hover:not([data-selected='true']):not([data-disabled='true']) {\r\n  background: var(--color-neutral-200);\r\n}\r\n\r\n.shared-time-picker__option[data-selected='true'] {\r\n  background: rgba(92, 98, 188, 0.1);\r\n  color: var(--color-brand-blue);\r\n  font-weight: 700;\r\n}\r\n\r\n.shared-time-picker__option[data-disabled='true'] {\r\n  color: var(--color-neutral-600);\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n  cursor: default;\r\n}\r\n"],"mappings":";AAYA,CAAC;AACC,YAAU;AACV,WAAS;AACT,UAAQ;AACR,SAAO;AACP,UAAQ;AACR,eAAa;AACb,mBAAiB;AACjB,OAAK;AACL,iBAAe;AACf,gBAAc;AACd,iBAAe;AACf,aAAW;AACX,UAAQ,IAAI,MAAM,IAAI;AACtB,cAAY,IAAI;AAClB;AAEA,CAjBC,yBAiByB,CAAC;AACzB,gBAAc,IAAI;AAClB,cAAY,EAAE,EAAE,EAAE,IAAI,IAAI;AAC5B;AAEA,CAtBC,yBAsByB,CAAC;AACzB,WAAS;AACT,kBAAgB;AAClB;AAEA,CAAC;AACC,eAAa;AACb,YAAU;AACV,iBAAe;AACf,SAAO,IAAI;AACX,eAAa;AACf;AAEA,CARC,yBAQyB,CAAC;AACzB,SAAO,IAAI;AACX,eAAa;AACf;AAEA,CAAC;AACC,aAAW;AACX,SAAO,IAAI;AACX,eAAa;AACf;AAEA,CAAC;AACC,YAAU;AACV,OAAK,KAAK,KAAK,EAAE;AACjB,QAAM;AACN,WAAS;AACT,WAAS;AACT,cAAY,IAAI;AAChB,iBAAe;AACf,cAAY,EAAE,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACrC,UAAQ,IAAI,MAAM,IAAI;AACtB,YAAU;AACZ;AAEA,CAAC;AACC,OAAK;AACL,UAAQ,KAAK,KAAK,EAAE;AACtB;AAEA,CAAC;AACC,cAAY;AACZ,cAAY;AACZ,SAAO;AACP,mBAAiB;AACjB,sBAAoB;AACtB;AAEA,CARC,uBAQuB;AACtB,WAAS;AACX;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,SAAO,IAAI;AACX,eAAa;AACf;AAEA,CAAC;AACC,cAAY;AACZ,aAAW;AACX,WAAS,IAAI;AACb,SAAO,IAAI;AACX,UAAQ;AACV;AAEA,CARC,0BAQ0B,MAAM,KAAK,CAAC,oBAAsB,KAAK,CAAC;AACjE,cAAY,IAAI;AAClB;AAEA,CAZC,0BAY0B,CAAC;AAC1B,cAAY,KAAK,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE;AAC9B,SAAO,IAAI;AACX,eAAa;AACf;AAEA,CAlBC,0BAkB0B,CAAC;AAC1B,SAAO,IAAI;AACX,WAAS;AACT,kBAAgB;AAChB,UAAQ;AACV;","names":[]}

package/dist/index.d.cts

@@ -318,8 +318,22 @@ interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProp
 }
 declare function Badge({ className, variant, style, dot, children, ...props }: BadgeProps): React$1.JSX.Element;
 
+/**
+ * Button's variant surface is six semantic colors × five sizes × two shapes, all
+ * independently composable — plus a small set of named "preset" variants
+ * (cancel/save/close, formButtonSubmit/Cancel/Back, borderPrimary, deptedit, submenu)
+ * that restore fixed page-context styling (sizing + a specific color skin) as a single
+ * prop, instead of every call site repeating the same `className` string. See
+ * `PRESET_BASE`/`PRESET_OVERRIDE` below for exactly what each one renders. `pill` isn't
+ * in this list - it's a `shape`, not a variant (`shape="pill"`, combinable with any
+ * variant above).
+ *
+ * `refreshIcon`/`selectedIcon` were dropped entirely rather than folded in: an icon-only
+ * refresh/selected button already has a proper home in `ButtonIcon` (`variant="refresh"`),
+ * so Button doesn't need to duplicate that.
+ */
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "secondary" | "destructive" | "outline" | "cancel" | "close" | "ghost" | "primary" | "borderPrimary" | "deptedit" | "submenu" | "save" | "formButtonSubmit" | "formButtonCancel" | "formButtonBack" | null | undefined;
+    variant?: "link" | "secondary" | "destructive" | "outline" | "cancel" | "close" | "primary" | "ghost" | "borderPrimary" | "deptedit" | "submenu" | "save" | "formButtonSubmit" | "formButtonCancel" | "formButtonBack" | null | undefined;
     size?: "sm" | "lg" | "default" | "icon" | "iconLg" | null | undefined;
     shape?: "pill" | "default" | null | undefined;
     selected?: boolean | null | undefined;
@@ -359,6 +373,7 @@ interface IconProps$1 extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElemen
     actionColor?: ActionColor;
     tooltipText?: string;
     showTooltip?: boolean;
+    label?: string;
 }
 declare const ButtonIcon: React$1.ForwardRefExoticComponent<IconProps$1 & React$1.RefAttributes<HTMLButtonElement>>;
 
@@ -518,6 +533,7 @@ interface FormFieldProps {
     hint?: string;
     children: React__default.ReactNode;
     className?: string;
+    id?: string;
 }
 /**
  * Reusable form field wrapper — consistent label, field, and error layout.
@@ -650,6 +666,8 @@ interface TabProps extends VariantProps<typeof tabVariants> {
     className?: string;
     disabled?: boolean;
     onClick?: () => void;
+    id?: string;
+    panelId?: string;
 }
 declare const Tab: React$1.ForwardRefExoticComponent<TabProps & React$1.RefAttributes<HTMLDivElement>>;
 

package/dist/index.d.ts

@@ -318,8 +318,22 @@ interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProp
 }
 declare function Badge({ className, variant, style, dot, children, ...props }: BadgeProps): React$1.JSX.Element;
 
+/**
+ * Button's variant surface is six semantic colors × five sizes × two shapes, all
+ * independently composable — plus a small set of named "preset" variants
+ * (cancel/save/close, formButtonSubmit/Cancel/Back, borderPrimary, deptedit, submenu)
+ * that restore fixed page-context styling (sizing + a specific color skin) as a single
+ * prop, instead of every call site repeating the same `className` string. See
+ * `PRESET_BASE`/`PRESET_OVERRIDE` below for exactly what each one renders. `pill` isn't
+ * in this list - it's a `shape`, not a variant (`shape="pill"`, combinable with any
+ * variant above).
+ *
+ * `refreshIcon`/`selectedIcon` were dropped entirely rather than folded in: an icon-only
+ * refresh/selected button already has a proper home in `ButtonIcon` (`variant="refresh"`),
+ * so Button doesn't need to duplicate that.
+ */
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "secondary" | "destructive" | "outline" | "cancel" | "close" | "ghost" | "primary" | "borderPrimary" | "deptedit" | "submenu" | "save" | "formButtonSubmit" | "formButtonCancel" | "formButtonBack" | null | undefined;
+    variant?: "link" | "secondary" | "destructive" | "outline" | "cancel" | "close" | "primary" | "ghost" | "borderPrimary" | "deptedit" | "submenu" | "save" | "formButtonSubmit" | "formButtonCancel" | "formButtonBack" | null | undefined;
     size?: "sm" | "lg" | "default" | "icon" | "iconLg" | null | undefined;
     shape?: "pill" | "default" | null | undefined;
     selected?: boolean | null | undefined;
@@ -359,6 +373,7 @@ interface IconProps$1 extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElemen
     actionColor?: ActionColor;
     tooltipText?: string;
     showTooltip?: boolean;
+    label?: string;
 }
 declare const ButtonIcon: React$1.ForwardRefExoticComponent<IconProps$1 & React$1.RefAttributes<HTMLButtonElement>>;
 
@@ -518,6 +533,7 @@ interface FormFieldProps {
     hint?: string;
     children: React__default.ReactNode;
     className?: string;
+    id?: string;
 }
 /**
  * Reusable form field wrapper — consistent label, field, and error layout.
@@ -650,6 +666,8 @@ interface TabProps extends VariantProps<typeof tabVariants> {
     className?: string;
     disabled?: boolean;
     onClick?: () => void;
+    id?: string;
+    panelId?: string;
 }
 declare const Tab: React$1.ForwardRefExoticComponent<TabProps & React$1.RefAttributes<HTMLDivElement>>;