@hilum/ui 3.6.10 → 3.6.12

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.12
+- 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.10",
+  "version": "3.6.12",
   "private": false,
   "description": "Hilum UI — design system primitives (Button, Input, Dialog, Combobox, …) + tokens + fonts + icons",
   "license": "MIT",

package/src/components/card.tsx

@@ -11,6 +11,8 @@ const cardVariants = cva(["rounded-xl", motionClasses], {
   variants: {
     variant: {
       default: "bg-card shadow-natural",
+      outlined: "border border-border bg-card shadow-natural",
+      elevated: "border border-border bg-card shadow-elevated",
       muted: "bg-muted shadow-natural",
       ghost: "bg-transparent",
       responsive:

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/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";