@bizapps/design-system-testing 1.0.0 → 1.0.2

package/dist/main.cjs

@@ -1951,6 +1951,7 @@ function TabsContent({
 var DEFAULT_DURATION = 3e3;
 var MAX_TOASTS = 5;
 function createStore() {
+  const timers = /* @__PURE__ */ new Map();
   const store = {
     toasts: [],
     listeners: [],
@@ -1965,10 +1966,15 @@ function createStore() {
         store.toasts = [{ id: toastId, ...item }, ...store.toasts].slice(0, MAX_TOASTS);
       }
       store.listeners.forEach((l) => l([...store.toasts]));
-      if (item.duration > 0) setTimeout(() => store.remove(toastId), item.duration);
+      if (item.duration > 0) {
+        clearTimeout(timers.get(toastId));
+        timers.set(toastId, setTimeout(() => store.remove(toastId), item.duration));
+      }
       return toastId;
     },
     remove(id) {
+      clearTimeout(timers.get(id));
+      timers.delete(id);
       store.toasts = store.toasts.filter((t) => t.id !== id);
       store.listeners.forEach((l) => l([...store.toasts]));
     },
@@ -2810,7 +2816,8 @@ function Combobox({
         options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
           cmdk.Command.Item,
           {
-            value: option.label,
+            value: option.value,
+            keywords: [option.label],
             disabled: option.disabled,
             onSelect: () => {
               onValueChange?.(option.value === value ? "" : option.value);
@@ -3092,9 +3099,10 @@ var Dropzone = ({
       if (fileRejections.length > 0) {
         const message = fileRejections.at(0)?.errors.at(0)?.message;
         onError?.(new Error(message));
-        return;
       }
-      onDrop?.(acceptedFiles, fileRejections, event);
+      if (acceptedFiles.length > 0) {
+        onDrop?.(acceptedFiles, fileRejections, event);
+      }
     },
     ...props
   });
@@ -3786,18 +3794,14 @@ var ColorPicker = ({
   className,
   ...props
 }) => {
-  const selectedColor = Color__default.default(value);
-  const defaultColor = Color__default.default(defaultValue);
-  const [hue, setHue] = react.useState(selectedColor.hue() || defaultColor.hue() || 0);
-  const [saturation, setSaturation] = react.useState(
-    selectedColor.saturationl() || defaultColor.saturationl() || 100
-  );
-  const [lightness, setLightness] = react.useState(
-    selectedColor.lightness() || defaultColor.lightness() || 50
-  );
-  const [alpha, setAlpha] = react.useState(selectedColor.alpha() * 100 || defaultColor.alpha() * 100);
+  const baseColor = value !== void 0 ? Color__default.default(value) : Color__default.default(defaultValue);
+  const [hue, setHue] = react.useState(baseColor.hue());
+  const [saturation, setSaturation] = react.useState(baseColor.saturationl());
+  const [lightness, setLightness] = react.useState(baseColor.lightness());
+  const [alpha, setAlpha] = react.useState(baseColor.alpha() * 100);
   const [mode, setMode] = react.useState("hex");
   const onChangeRef = react.useRef(onChange);
+  const mounted = react.useRef(false);
   react.useEffect(() => {
     onChangeRef.current = onChange;
   });
@@ -3811,6 +3815,10 @@ var ColorPicker = ({
     }
   }, [value]);
   react.useEffect(() => {
+    if (!mounted.current) {
+      mounted.current = true;
+      return;
+    }
     if (onChangeRef.current) {
       const color = Color__default.default.hsl(hue, saturation, lightness).alpha(alpha / 100);
       const rgba = color.rgb().array();
@@ -4260,7 +4268,7 @@ function NavLinkItem({
         /* @__PURE__ */ jsxRuntime.jsxs(
           "a",
           {
-            href: link.href,
+            href: sanitizeHref(link.href),
             onClick: (e) => {
               e.preventDefault();
               onNavLinkClick?.(link.href);
@@ -4294,7 +4302,7 @@ function NavLinkItem({
             children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-1", children: link.dropdownItems.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(
               "a",
               {
-                href: item.href,
+                href: sanitizeHref(item.href),
                 onClick: (e) => {
                   e.preventDefault();
                   onNavLinkClick?.(item.href);
@@ -4364,7 +4372,7 @@ var Navbar = react.forwardRef(
               /* @__PURE__ */ jsxRuntime.jsx(
                 "a",
                 {
-                  href: link.href,
+                  href: sanitizeHref(link.href),
                   className: "text-muted-foreground hover:text-foreground text-xs transition-colors",
                   children: link.label
                 }
@@ -4862,17 +4870,14 @@ var eventCalendarStyles = `
     --sx-color-outline-variant: var(--color-border);
     --sx-internal-color-text: var(--color-foreground);
     font-size: 13px;
-    font-family: inherit;
+    font-family: var(--font-sans, inherit);
 }
 
 /* \u2500\u2500 Outer wrapper \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 .sx-tcce .sx__calendar-wrapper {
-    border-radius: 12px;
+    border-radius: var(--border-radius-article, 0.875rem);
     border: 1px solid var(--color-border);
     overflow: hidden;
-    box-shadow:
-        0 1px 3px rgba(0, 0, 0, 0.04),
-        0 4px 16px rgba(0, 0, 0, 0.06);
 }
 
 /* \u2500\u2500 Header bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
@@ -4881,6 +4886,8 @@ var eventCalendarStyles = `
     min-height: 52px;
     border-bottom: 1px solid var(--color-border);
     background: var(--color-background);
+    display: flex;
+    align-items: center;
 }
 
 /* Range title \u2014 "June 2026" */
@@ -4889,34 +4896,38 @@ var eventCalendarStyles = `
     font-weight: 700;
     letter-spacing: -0.02em;
     color: var(--color-foreground);
+    font-family: var(--font-heading, inherit);
 }
 
-/* "Today" button */
+/* "Today" button \u2014 primary style */
 .sx-tcce .sx__today-button {
     font-size: 12px;
-    font-weight: 500;
-    height: 30px;
-    padding: 0 12px;
-    border-radius: 6px;
-    border: 1px solid var(--color-border);
-    background: var(--color-background);
-    color: var(--color-foreground);
+    font-weight: 600;
+    height: 32px;
+    padding: 0 14px;
+    border-radius: var(--border-radius-secondary-button, 0.625rem);
+    border: none;
+    background: var(--color-primary);
+    color: var(--color-primary-foreground);
     cursor: pointer;
-    transition: background 120ms;
+    transition: opacity 150ms;
 }
 .sx-tcce .sx__today-button:hover {
-    background: var(--color-muted);
+    opacity: 0.88;
+}
+.sx-tcce .sx__today-button:active {
+    opacity: 0.72;
 }
 
 /* Prev / Next arrow buttons */
 .sx-tcce .sx__chevron-wrapper {
-    width: 30px;
-    height: 30px;
-    min-width: 30px;
-    border-radius: 6px;
+    width: 32px;
+    height: 32px;
+    min-width: 32px;
+    border-radius: var(--border-radius-secondary-button, 0.625rem);
     border: 1px solid var(--color-border);
     background: var(--color-background);
-    transition: background 120ms;
+    transition: background 150ms;
 }
 .sx-tcce .sx__chevron-wrapper:hover {
     background: var(--color-muted);
@@ -4937,9 +4948,9 @@ var eventCalendarStyles = `
 .sx-tcce .sx__view-selection-selected-item {
     font-size: 12px;
     font-weight: 600;
-    height: 30px;
-    padding: 0 10px;
-    border-radius: 6px;
+    height: 32px;
+    padding: 0 12px;
+    border-radius: var(--border-radius-secondary-button, 0.625rem);
     background: var(--color-primary);
     color: var(--color-primary-foreground);
     border: none;
@@ -4947,9 +4958,11 @@ var eventCalendarStyles = `
     align-items: center;
     gap: 4px;
     cursor: pointer;
-    transition: opacity 120ms;
+    transition: opacity 150ms;
 }
-.sx-tcce .sx__view-selection-selected-item:hover {
+.sx-tcce .sx__view-selection-selected-item:hover,
+.sx-tcce .sx__view-selection-selected-item:focus,
+.sx-tcce .sx__view-selection-selected-item:active {
     opacity: 0.85;
 }
 
@@ -4958,14 +4971,13 @@ var eventCalendarStyles = `
     width: 13px;
     height: 13px;
     opacity: 0.6;
-    filter: brightness(0) invert(1); /* make it white */
+    filter: brightness(0) invert(1);
 }
 
 /* Dropdown list of views */
 .sx-tcce .sx__view-selection-items {
-    border-radius: 8px;
+    border-radius: var(--border-radius-outline, 0.5rem);
     border: 1px solid var(--color-border);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
     padding: 4px;
     gap: 2px;
     background: var(--color-background);
@@ -4997,18 +5009,17 @@ var eventCalendarStyles = `
     display: inline-flex;
     align-items: center;
     gap: 2px;
-    height: 30px;
+    height: 32px;
     padding: 0 8px;
     border: 1px solid var(--color-border);
-    border-radius: 6px;
+    border-radius: var(--border-radius-secondary-button, 0.625rem);
     background: var(--color-background);
     cursor: pointer;
     transition: border-color 150ms;
+    overflow: hidden;
 }
 .sx-tcce .sx__date-input-wrapper:focus-within {
     border-color: var(--color-primary);
-    outline: 2px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
-    outline-offset: 0;
 }
 
 .sx-tcce .sx__date-input {
@@ -5033,7 +5044,9 @@ var eventCalendarStyles = `
     justify-content: center;
     background: transparent;
     border: none;
+    outline: none;
     cursor: pointer;
+    appearance: none;
 }
 .sx-tcce .sx__date-input-chevron {
     width: 12px;
@@ -5043,9 +5056,8 @@ var eventCalendarStyles = `
 
 /* Date picker popup (the calendar that drops when clicking the date input) */
 .sx-tcce .sx__date-picker-popup {
-    border-radius: 10px;
+    border-radius: var(--border-radius-article, 0.875rem);
     border: 1px solid var(--color-border);
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
     overflow: hidden;
     font-size: 12px;
     background: var(--color-background);
@@ -5132,6 +5144,7 @@ var eventCalendarStyles = `
     display: flex;
     align-items: center;
     justify-content: center;
+    transition: background 150ms;
 }
 
 /* Today highlight */
@@ -5157,6 +5170,7 @@ var eventCalendarStyles = `
     font-weight: 500;
     background-color: transparent !important;
     border-inline-start-width: 3px !important;
+    cursor: pointer;
 }
 .sx-tcce .sx__month-grid-event-time {
     font-size: 10px;
@@ -5183,7 +5197,7 @@ var eventCalendarStyles = `
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: background 120ms;
+    transition: background 150ms;
 }
 .sx-tcce .sx__week-grid__date--is-today .sx__week-grid__date-number {
     background: var(--color-primary) !important;
@@ -5204,7 +5218,7 @@ var eventCalendarStyles = `
 }
 .sx-tcce .sx__time-grid-event {
     border-radius: 6px;
-    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+    cursor: pointer;
 }
 .sx-tcce .sx__time-grid-event-inner {
     padding: 4px 7px;
@@ -5226,11 +5240,8 @@ var eventCalendarStyles = `
 
 /* \u2500\u2500 Event modal \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 .sx-tcce .sx__event-modal {
-    border-radius: 10px;
+    border-radius: var(--border-radius-article, 0.875rem);
     border: 1px solid var(--color-border);
-    box-shadow:
-        0 4px 12px rgba(0, 0, 0, 0.08),
-        0 12px 32px rgba(0, 0, 0, 0.1);
     font-size: 13px;
     min-width: 220px;
     max-width: 300px;
@@ -5240,6 +5251,7 @@ var eventCalendarStyles = `
     font-size: 14px;
     font-weight: 700;
     letter-spacing: -0.01em;
+    font-family: var(--font-heading, inherit);
 }
 .sx-tcce .sx__event-modal__time {
     font-size: 12px;
@@ -5356,10 +5368,11 @@ function useEventCalendar({
       }
     });
   }
+  const eventsKey = JSON.stringify(events);
   react.useEffect(() => {
     eventsMapRef.current = new Map(events.map((e) => [String(e.id), e]));
     eventsService$1.current.set(events.map(toScheduleXEvent));
-  }, [events]);
+  }, [eventsKey]);
   react.useEffect(() => {
     const app = calendarApp.current;
     if (!app) return;