@hilum/ui 3.6.9 → 3.6.11

package/llms.txt

@@ -5,9 +5,9 @@
 ## Key Facts
 
 - Package name: `@hilum/ui`
-- Package version: 3.6.8
-- Component modules: 103
-- Atom components: 72
+- Package version: 3.6.11
+- Component modules: 104
+- Atom components: 73
 - Molecule components: 31
 - Docs site: https://ui.hilum.dev
 - GitHub repository: https://github.com/hilum-labs/hilum-ui
@@ -90,6 +90,7 @@ Primary exports:
 - Chart (/atoms/chart/) — Recharts-based data visualization with design-system styling.
 - Chat Message (/molecules/chat-message/) — Chat transcript row with avatar, author metadata, alignment, and message bubble tone. Composes: Avatar.
 - Checkbox (/atoms/checkbox/) — Binary selection control with checked, unchecked, and indeterminate states.
+- Checkbox Card (/atoms/checkbox-card/) — Clickable card-style checkbox option for settings, filters, and compact binary choices. Composes: Checkbox.
 - Checkbox Group (/atoms/checkbox-group/) — Grouped multi-select options with contiguous product-style row highlighting.
 - Collapsible (/atoms/collapsible/) — Toggleable content region, often used for navigation groups.
 - Color Input (/atoms/color-input/) — Compact color input combining swatch, hex field, and optional opacity control.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hilum/ui",
-  "version": "3.6.9",
+  "version": "3.6.11",
   "private": false,
   "description": "Hilum UI — design system primitives (Button, Input, Dialog, Combobox, …) + tokens + fonts + icons",
   "license": "MIT",

package/src/components/checkbox-card.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { Checkbox } from "./checkbox";
+
+interface CheckboxCardProps extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "onChange"> {
+  checked?: boolean | "indeterminate";
+  disabled?: boolean;
+  label: React.ReactNode;
+  description?: React.ReactNode;
+  onCheckedChange?: (checked: boolean | "indeterminate") => void;
+}
+
+const CheckboxCard = React.forwardRef<HTMLLabelElement, CheckboxCardProps>(
+  ({ checked, disabled, label, description, onCheckedChange, className, children, ...props }, ref) => {
+    const checkboxProps = {
+      ...(checked !== undefined ? { checked } : {}),
+      ...(disabled !== undefined ? { disabled } : {}),
+      ...(onCheckedChange ? { onCheckedChange } : {}),
+    };
+
+    return (
+      <label
+        ref={ref}
+        aria-disabled={disabled || undefined}
+        className={cn(
+          "group flex min-w-0 items-start gap-3 rounded-lg border border-border bg-card p-3",
+          "text-sm text-foreground shadow-natural transition-[background-color,border-color,box-shadow,opacity,scale]",
+          "hover:bg-muted/40 active:scale-[0.98]",
+          "has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-[#6B97FF]",
+          "has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50",
+          className,
+        )}
+        {...props}
+      >
+        <Checkbox {...checkboxProps} className="mt-0.5" />
+        <span className="flex min-w-0 flex-1 flex-col gap-0.5">
+          <span className="font-medium leading-5 text-foreground">{label}</span>
+          {description ? (
+            <span className="text-[12px] leading-4 text-muted-foreground">{description}</span>
+          ) : null}
+          {children}
+        </span>
+      </label>
+    );
+  },
+);
+CheckboxCard.displayName = "CheckboxCard";
+
+export { CheckboxCard };
+export type { CheckboxCardProps };

package/src/components/dialog.tsx

@@ -159,7 +159,16 @@ function DialogHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
 }
 
 function DialogFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn("flex justify-end gap-2 mt-6", className)} {...props} />;
+  return (
+    <div
+      className={cn(
+        "mt-6 flex justify-end gap-2",
+        "max-sm:flex-col-reverse max-sm:[&>*]:w-full",
+        className,
+      )}
+      {...props}
+    />
+  );
 }
 
 const DialogTitle = forwardRef<

package/src/index.ts

@@ -34,6 +34,7 @@ export * from "./components/carousel";
 export * from "./components/chart";
 export * from "./components/chat-message";
 export * from "./components/checkbox";
+export * from "./components/checkbox-card";
 export * from "./components/checkbox-group";
 export * from "./components/collapsible";
 export * from "./components/color-input";

package/src/lib/mobile-popper-sheet.ts

@@ -1,8 +1,10 @@
 export const mobileDialogSheetContentClassName = [
   "fixed inset-x-0 bottom-0 z-50 max-h-[calc(100dvh-1rem)] w-full overflow-y-auto",
-  "max-lg:!w-full max-lg:!max-w-none max-lg:!rounded-b-none",
+  "max-lg:!fixed max-lg:!inset-x-0 max-lg:!bottom-0 max-lg:!top-auto",
+  "max-lg:!w-full max-lg:!max-w-none max-lg:!max-h-[calc(100dvh-1rem)]",
+  "max-lg:!rounded-b-none max-lg:overscroll-contain",
   "rounded-t-2xl border border-border bg-card p-6 shadow-elevated",
-  "max-lg:pb-[calc(1.5rem+env(safe-area-inset-bottom))] max-lg:pt-8",
+  "max-lg:!px-5 max-lg:!pb-[calc(1.25rem+env(safe-area-inset-bottom))] max-lg:!pt-8",
   "max-lg:before:absolute max-lg:before:left-1/2 max-lg:before:top-3 max-lg:before:h-1 max-lg:before:w-9",
   "max-lg:before:-translate-x-1/2 max-lg:before:rounded-full max-lg:before:bg-muted-foreground/35",
 ].join(" ");