aplance-ui 1.1.0 → 1.2.0

package/registry/components/ui/input-fields/date-picker/calendar.module.css

@@ -1,5 +1,4 @@
-/* calendar.module.css – standard absolute nav layout (shadcn pattern), clean spacing */
-.calendar {
+.calendar {
   --calendar-cell-size: var(--spacing-11);
   --calendar-cell-radius: var(--radius-md);
   --calendar-row-gap: var(--spacing-1);
@@ -44,10 +43,7 @@
     pointer-events: auto;
   }
 }
-
-
-
-.chevron {
+.chevron {
   width: var(--spacing-8);
   height: var(--spacing-8);
 }

package/registry/components/ui/input-fields/date-picker/date-picker.module.css

@@ -1,4 +1,3 @@
-/* date-picker.module.css – clean, premium layout with no hacks */
 .popover_menu {
   max-width: calc(100vw - var(--spacing-11)) !important;
 }
@@ -6,6 +5,8 @@
 .menu_content {
   display: flex;
   flex-direction: column;
+  width: fit-content;
+  max-width: 100%;
 }
 
 .manual_panel {
@@ -17,23 +18,55 @@
   display: flex;
   flex-direction: row;
   gap: var(--spacing-4);
+  min-width: 0;
 }
 
 .calendar_wrap {
   display: flex;
   justify-content: center;
   padding: var(--spacing-4);
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .range_calendars {
   display: flex;
   align-items: flex-start;
   gap: var(--spacing-4);
+  width: fit-content;
+  max-width: 100%;
 }
 
-@media (width <= 48rem) {
-  .range_calendars {
+@media (max-width: 48rem) {
+  .manual_panel,
+  .calendar_wrap,
+  .time_panel {
+    padding: var(--spacing-3);
+  }
+
+  .manual_grid {
     flex-direction: column;
+    gap: var(--spacing-3);
+  }
+
+  .calendar_wrap {
+    justify-content: flex-start;
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+    scrollbar-width: thin;
+  }
+
+  .range_calendars {
+    width: max-content;
+    max-width: none;
+    flex-shrink: 0;
+    gap: var(--spacing-3);
+  }
+
+  .range_time_grid {
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--spacing-3);
   }
 }
 
@@ -55,3 +88,14 @@
   gap: var(--spacing-4);
 }
 
+@media (max-width: 36rem) {
+  .popover_menu {
+    max-width: calc(100vw - var(--spacing-4)) !important;
+  }
+}
+
+@media (max-width: 23rem) {
+  .calendar {
+    --calendar-cell-size: min(var(--spacing-11), calc((100vw - var(--spacing-10)) / 7));
+  }
+}

package/registry/components/ui/input-fields/date-picker/date-picker.tsx

@@ -56,10 +56,10 @@ export { Calendar } from "./calendar";
 export type { CalendarProps } from "./calendar";
 export * from "./types";
 
-const DEFAULT_START_PLACEHOLDER = "Start date";
-const DEFAULT_END_PLACEHOLDER = "End date";
-
-export const DatePicker = (props: DatePickerProps) => {
+const DEFAULT_START_PLACEHOLDER = "Start date";
+const DEFAULT_END_PLACEHOLDER = "End date";
+
+export const DatePicker = (props: DatePickerProps) => {
   const {
     label,
     className,
@@ -629,9 +629,9 @@ export const DatePicker = (props: DatePickerProps) => {
     [timePickerPopover?.align, timePickerPopover?.position],
   );
 
-  const isIndependentRangeMonths = isRange && resolvedRangeMonthCount > 1;
-
-  return (
+  const isIndependentRangeMonths = isRange && resolvedRangeMonthCount > 1;
+
+  return (
     <div className={clsx(sCommon.container, className)} style={style}>
       {label && (
         <div
@@ -758,11 +758,11 @@ export const DatePicker = (props: DatePickerProps) => {
                 </div>
               )}
 
-              <div className={s.calendar_wrap}>
-                {isRange ? (
-                  isIndependentRangeMonths ? (
-                    <div className={s.range_calendars}>
-                      {Array.from({ length: resolvedRangeMonthCount }, (_, index) => {
+              <div className={s.calendar_wrap}>
+                {isRange ? (
+                  isIndependentRangeMonths ? (
+                    <div className={s.range_calendars}>
+                      {Array.from({ length: resolvedRangeMonthCount }, (_, index) => {
                         const month =
                           rangeCalendarMonths[index] ??
                           addMonthOffset(

package/registry/components/ui/input-fields/media-input/media-input.module.css

@@ -92,6 +92,7 @@
 
 .dropzone_inner {
   display: flex;
+  min-width: 0;
   flex-direction: column;
   align-items: center;
   justify-content: center;
@@ -107,24 +108,30 @@
 
 .dropzone_copy {
   display: flex;
+  max-width: 100%;
+  min-width: 0;
   flex-direction: column;
   gap: var(--spacing-2);
   align-items: center;
 }
 
 .dropzone_title {
+  max-width: 100%;
   font-family: var(--font-family-1);
   font-size: var(--font-size-sm);
   color: var(--field-content-color, var(--color-foreground));
   font-weight: 500;
   line-height: 1.3;
+  overflow-wrap: anywhere;
 }
 
 .dropzone_hint {
+  max-width: 100%;
   font-family: var(--font-family-1);
   font-size: var(--font-size-xs);
   color: var(--field-placeholder-color, var(--color-muted-foreground));
   line-height: 1.4;
+  overflow-wrap: anywhere;
 }
 
 /* ── Preview list ─────────────────────────────────────────────────────── */
@@ -272,18 +279,23 @@
 
 .preview_sub {
   display: inline-flex;
+  min-width: 0;
   align-items: center;
   gap: var(--spacing-1);
   font-family: var(--font-family-1);
   font-size: var(--font-size-xs);
   color: var(--color-muted-foreground);
   line-height: 1.3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .preview_error {
   font-family: var(--font-family-1);
   font-size: var(--font-size-xs);
   color: var(--color-error-foreground);
+  overflow-wrap: anywhere;
 }
 
 /* Position only - visuals come from the Button component (variant + size + box layout). */

package/registry/components/ui/input-fields/media-input/media-input.tsx

@@ -109,15 +109,12 @@ export const MediaInput = (props: MediaInputProps) => {
   const resolvedTitle =
     dropzoneTitle ??
     (multiple ? "Drop files here or browse" : "Drop a file here or browse");
-  const resolvedHint =
-    dropzoneHint ??
-    [
-      accept ? `Accepts ${accept}` : null,
-      maxSize ? `Up to ${formatBytes(maxSize)} per file` : null,
-      multiple && maxFiles ? `Max ${maxFiles} files` : null,
-    ]
-      .filter(Boolean)
-      .join(" • ");
+  const hintParts = [
+    accept ? `Accepts ${accept}` : null,
+    maxSize ? `Up to ${formatBytes(maxSize)} per file` : null,
+    multiple && maxFiles ? `Max ${maxFiles} files` : null,
+  ].filter(Boolean);
+  const resolvedHint = dropzoneHint ?? hintParts.join(" - ");
 
   const inputProps = getInputProps({
     id: inputId,
@@ -210,6 +207,10 @@ export const MediaInput = (props: MediaInputProps) => {
     "aria-labelledby": label ? labelId : undefined,
     "aria-describedby": resolvedHint ? hintId : undefined,
     onClick: dropzoneSelectable ? undefined : (e) => e.preventDefault(),
+    onDragEnter: dropzoneSelectable ? undefined : (e) => e.preventDefault(),
+    onDragLeave: dropzoneSelectable ? undefined : (e) => e.preventDefault(),
+    onDragOver: dropzoneSelectable ? undefined : (e) => e.preventDefault(),
+    onDrop: dropzoneSelectable ? undefined : (e) => e.preventDefault(),
   });
 
   return (

package/registry/components/ui/input-fields/media-input/useMediaUpload.tsx

@@ -96,6 +96,12 @@ export function useMediaUpload({
     filesRef.current = isControlled ? value! : internal;
   }, [isControlled, value, internal]);
 
+  useEffect(() => {
+    if (!disabled && !readOnly) return;
+    dragCounter.current = 0;
+    setIsDragging(false);
+  }, [disabled, readOnly]);
+
   // Revoke any preview URLs the hook created on unmount so blob memory is
   // freed even if the consumer forgets to clear state.
   useEffect(
@@ -130,8 +136,11 @@ export function useMediaUpload({
         existing: baseExisting,
       });
 
-      // Single-mode replacement frees the previous preview blob immediately.
-      if (!multiple && existing.length > 0) existing.forEach(revokePreviewUrl);
+      // Single-mode replacement frees the previous preview blob immediately,
+      // but only after a valid replacement exists.
+      if (!multiple && accepted.length > 0 && existing.length > 0) {
+        existing.forEach(revokePreviewUrl);
+      }
 
       const next = multiple ? [...existing, ...accepted] : accepted;
       if (accepted.length > 0) {
@@ -162,6 +171,7 @@ export function useMediaUpload({
       revokePreviewUrl(target);
       const next = filesRef.current.filter((f) => f.id !== id);
       commit(next);
+      setRejections([]);
       onRemove?.(target);
     },
     [commit, disabled, onRemove, readOnly],
@@ -190,9 +200,9 @@ export function useMediaUpload({
 
   const handleDragEnter = useCallback(
     (e: DragEvent) => {
-      if (disabled || readOnly) return;
       e.preventDefault();
       e.stopPropagation();
+      if (disabled || readOnly) return;
       dragCounter.current += 1;
       if (e.dataTransfer?.types?.includes("Files")) setIsDragging(true);
     },
@@ -208,9 +218,9 @@ export function useMediaUpload({
 
   const handleDragOver = useCallback(
     (e: DragEvent) => {
-      if (disabled || readOnly) return;
       e.preventDefault();
       e.stopPropagation();
+      if (disabled || readOnly) return;
       if (e.dataTransfer) e.dataTransfer.dropEffect = "copy";
     },
     [disabled, readOnly],
@@ -218,11 +228,11 @@ export function useMediaUpload({
 
   const handleDrop = useCallback(
     (e: DragEvent) => {
-      if (disabled || readOnly) return;
       e.preventDefault();
       e.stopPropagation();
       dragCounter.current = 0;
       setIsDragging(false);
+      if (disabled || readOnly) return;
       add(e.dataTransfer?.files);
     },
     [add, disabled, readOnly],
@@ -247,18 +257,22 @@ export function useMediaUpload({
       },
       onDragEnter: (e) => {
         overrides.onDragEnter?.(e);
+        if (e.defaultPrevented) return;
         handleDragEnter(e);
       },
       onDragLeave: (e) => {
         overrides.onDragLeave?.(e);
+        if (e.defaultPrevented) return;
         handleDragLeave(e);
       },
       onDragOver: (e) => {
         overrides.onDragOver?.(e);
+        if (e.defaultPrevented) return;
         handleDragOver(e);
       },
       onDrop: (e) => {
         overrides.onDrop?.(e);
+        if (e.defaultPrevented) return;
         handleDrop(e);
       },
     }),

package/registry/components/ui/input-fields/media-input/utils.ts

@@ -138,9 +138,17 @@ export const validateIncomingFiles = (
   const rejected: MediaRejection[] = [];
 
   const seen = new Set(options.existing.map((f) => fileFingerprint(f.file)));
+  const maxFiles =
+    typeof options.maxFiles === "number" && Number.isFinite(options.maxFiles)
+      ? Math.max(0, Math.floor(options.maxFiles))
+      : undefined;
+  const maxSize =
+    typeof options.maxSize === "number" && Number.isFinite(options.maxSize)
+      ? Math.max(0, options.maxSize)
+      : undefined;
   const remainingCapacity = options.multiple
-    ? options.maxFiles
-      ? Math.max(0, options.maxFiles - options.existing.length)
+    ? maxFiles !== undefined
+      ? Math.max(0, maxFiles - options.existing.length)
       : Number.POSITIVE_INFINITY
     : 1;
 
@@ -153,11 +161,11 @@ export const validateIncomingFiles = (
       });
       continue;
     }
-    if (options.maxSize && file.size > options.maxSize) {
+    if (maxSize !== undefined && file.size > maxSize) {
       rejected.push({
         file,
         code: "file-too-large",
-        message: rejectionMessage("file-too-large", { maxSize: options.maxSize }),
+        message: rejectionMessage("file-too-large", { maxSize }),
       });
       continue;
     }
@@ -174,7 +182,7 @@ export const validateIncomingFiles = (
       rejected.push({
         file,
         code: "too-many-files",
-        message: rejectionMessage("too-many-files", { maxFiles: options.maxFiles }),
+        message: rejectionMessage("too-many-files", { maxFiles }),
       });
       continue;
     }

package/registry/registry.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://ui.aplance.com/registry.schema.json",
   "version": 4,
-  "generated": "2026-05-11T11:35:17.188Z",
+  "generated": "2026-05-15T11:50:32.790Z",
   "units": [
     {
       "name": "accordion",
@@ -53,6 +53,24 @@
         "clsx"
       ]
     },
+    {
+      "name": "breadcrumbs",
+      "kind": "component",
+      "group": "ui",
+      "files": [
+        "components/ui/breadcrumbs/breadcrumbs.module.css",
+        "components/ui/breadcrumbs/breadcrumbs.tsx"
+      ],
+      "clientFiles": [
+        "components/ui/breadcrumbs/breadcrumbs.tsx"
+      ],
+      "deps": [],
+      "externalDeps": [
+        "@tabler/icons-react",
+        "clsx",
+        "react"
+      ]
+    },
     {
       "name": "button",
       "kind": "component",
@@ -353,6 +371,27 @@
         "react"
       ]
     },
+    {
+      "name": "infinite-scroll",
+      "kind": "component",
+      "group": "primitives",
+      "files": [
+        "components/primitives/infinite-scroll/infinite-scroll-context.ts",
+        "components/primitives/infinite-scroll/infinite-scroll.module.css",
+        "components/primitives/infinite-scroll/infinite-scroll.tsx"
+      ],
+      "clientFiles": [
+        "components/primitives/infinite-scroll/infinite-scroll-context.ts",
+        "components/primitives/infinite-scroll/infinite-scroll.tsx"
+      ],
+      "deps": [
+        "useResizeObserver"
+      ],
+      "externalDeps": [
+        "clsx",
+        "react"
+      ]
+    },
     {
       "name": "input",
       "kind": "component",
@@ -565,6 +604,30 @@
         "react"
       ]
     },
+    {
+      "name": "slider",
+      "kind": "component",
+      "group": "primitives",
+      "files": [
+        "components/primitives/slider/slider-context.ts",
+        "components/primitives/slider/slider.module.css",
+        "components/primitives/slider/slider.tsx",
+        "components/primitives/slider/types.ts",
+        "components/primitives/slider/utils.ts"
+      ],
+      "clientFiles": [
+        "components/primitives/slider/slider-context.ts",
+        "components/primitives/slider/slider.tsx"
+      ],
+      "deps": [
+        "useResizeObserver"
+      ],
+      "externalDeps": [
+        "@tabler/icons-react",
+        "clsx",
+        "react"
+      ]
+    },
     {
       "name": "stepper",
       "kind": "component",