@dust-tt/sparkle 0.2.266 → 0.2.267

package/src/components/Checkbox.tsx

@@ -1,122 +1,106 @@
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { cva, VariantProps } from "class-variance-authority";
 import React from "react";
 
 import { CheckIcon, DashIcon } from "@sparkle/icons/solid";
-import { classNames } from "@sparkle/lib/utils";
+import { cn } from "@sparkle/lib/utils";
 
 import { Icon } from "./Icon";
+import { Label } from "./Label";
 
-export type CheckBoxCheckedStatus = "checked" | "unchecked" | "partial";
-
-export interface CheckboxProps {
-  variant?: "selectable" | "checkable";
-  size?: "xs" | "sm";
-  checked?: CheckBoxCheckedStatus;
-  disabled?: boolean;
-  onChange: (checked: boolean) => void;
-  className?: string;
-}
-
-export function Checkbox({
-  variant = "selectable",
-  checked = "unchecked",
-  size = "sm",
-  onChange,
-  className = "",
-  disabled,
-}: CheckboxProps) {
-  let isChecked: boolean;
-  let isPartialChecked: boolean;
-  switch (checked) {
-    case "checked":
-      isChecked = true;
-      isPartialChecked = false;
-      break;
-    case "unchecked":
-      isChecked = false;
-      isPartialChecked = false;
-      break;
-    case "partial":
-      isChecked = true;
-      isPartialChecked = true;
-      break;
-    default:
-      throw new Error("Invalid checked prop");
+const checkboxStyles = cva(
+  cn(
+    "s-shrink-0 s-peer s-border s-border-primary-500 s-text-foreground",
+    "data-[state=checked]:s-text-white data-[state=checked]:s-text-foreground",
+    "focus-visible:s-ring-ring s-ring-offset-background focus-visible:s-outline-none focus-visible:s-ring-2 focus-visible:s-ring-offset-2",
+    "disabled:s-cursor-not-allowed disabled:s-opacity-50"
+  ),
+  {
+    variants: {
+      checked: {
+        true: "data-[state=checked]:s-bg-action-500",
+        partial: "data-[state=checked]:s-bg-muted-foreground",
+        false: "",
+      },
+      size: {
+        xs: "s-h-4 s-w-4 s-rounded",
+        sm: "s-h-5 s-w-5 s-rounded-md",
+      },
+    },
+    defaultVariants: {
+      size: "sm",
+      checked: false,
+    },
   }
+);
 
-  const baseStyleClasses = {
-    base: "s-border s-justify-center s-flex s-items-center s-transition-colors s-duration-300 s-ease-out",
-    idle: "s-bg-structure-50 s-border-element-600 s-cursor-pointer",
-    hover:
-      "hover:s-border-action-500 hover:s-bg-action-200 hover:s-text-white/100",
-    disabled: "s-bg-structure-0 s-border-structure-300 s-cursor-default",
-    dark: {
-      base: "dark:s-bg-structure-50-dark dark:s-border-element-500-dark",
-      hover:
-        "dark:hover:s-border-action-500-dark dark:hover:s-bg-action-200-dark",
-      disabled:
-        "dark:s-bg-structure-0-dark dark:s-border-structure-300-dark s-cursor-default",
-    },
-  };
+type CheckBoxStateType = boolean | "partial";
+
+interface CheckboxProps
+  extends Omit<
+      React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
+      "checked" | "defaultChecked"
+    >,
+    VariantProps<typeof checkboxStyles> {
+  checked?: CheckBoxStateType;
+}
 
-  const baseSizeClasses = {
-    xs: "s-w-4 s-h-4 s-rounded",
-    sm: "s-w-5 s-h-5 s-rounded-md",
-  };
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  CheckboxProps
+>(({ className, size, checked, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(checkboxStyles({ checked, size }), className)}
+    checked={checked === "partial" ? "indeterminate" : checked}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className="s-flex s-items-center s-justify-center s-text-current">
+      <span className={cn(size === "xs" ? "-s-mt-px" : "")}>
+        <Icon size="xs" visual={checked === "partial" ? DashIcon : CheckIcon} />
+      </span>
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
 
-  const checkedIndicatorClasses = {
-    base: "s-transition s-duration-300 s-ease-in-out",
-    selected: "s-opacity-100 s-bg-action-500 dark:s-bg-action-500-dark",
-    unselected: "s-opacity-0",
-    partialChecked: "s-opacity-100 s-bg-element-700 dark:s-bg-element-700-dark",
-    disabled: "s-opacity-100 s-bg-element-500 dark:s-bg-element-500-dark",
-  };
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
-  const sizeStyles = {
-    xs: { width: "12px", height: "12px", borderRadius: "2px" },
-    sm: { width: "14px", height: "14px", borderRadius: "3px" },
-  };
+interface CheckboxWithTextProps extends CheckboxProps {
+  text: string;
+}
 
-  const combinedBaseClasses = classNames(
-    baseStyleClasses.base,
-    baseSizeClasses[size],
-    isChecked || isPartialChecked ? "s-text-white" : "s-text-white/0",
-    disabled ? baseStyleClasses.disabled : baseStyleClasses.idle,
-    !disabled ? baseStyleClasses.hover : "",
-    disabled ? baseStyleClasses.dark.disabled : baseStyleClasses.dark.base,
-    !disabled ? baseStyleClasses.dark.hover : "",
-    className
+function CheckboxWithText({ text, ...props }: CheckboxWithTextProps) {
+  return (
+    <div className="s-items-top s-flex s-items-center s-space-x-2">
+      <Checkbox {...props} />
+      <Label className="s-text-sm s-leading-none peer-disabled:s-cursor-not-allowed peer-disabled:s-opacity-70">
+        {text}
+      </Label>
+    </div>
   );
+}
 
-  const combinedCheckedIndicatorClasses = classNames(
-    checkedIndicatorClasses.base,
-    disabled ? checkedIndicatorClasses.disabled : "",
-    isChecked && !isPartialChecked && !disabled
-      ? checkedIndicatorClasses.selected
-      : "",
-    isPartialChecked && !disabled ? checkedIndicatorClasses.partialChecked : "",
-    !isChecked && !disabled ? checkedIndicatorClasses.unselected : ""
-  );
+interface CheckboxWithTextAndDescriptionProps extends CheckboxWithTextProps {
+  description: string;
+}
 
+function CheckBoxWithTextAndDescription({
+  text,
+  description,
+  ...props
+}: CheckboxWithTextAndDescriptionProps) {
   return (
-    <label>
-      <input
-        type="checkbox"
-        checked={isChecked}
-        onChange={(e) => onChange && onChange(e.target.checked)}
-        className="s-hidden"
-        disabled={disabled}
-      />
-      <div className={classNames(combinedBaseClasses, "s-relative")}>
-        <div
-          className={combinedCheckedIndicatorClasses}
-          style={sizeStyles[size]}
-        />
-        {variant === "checkable" && (
-          <div className="s-absolute">
-            <Icon visual={isPartialChecked ? DashIcon : CheckIcon} size="xs" />
-          </div>
-        )}
+    <div className="s-items-top s-flex s-space-x-2">
+      <Checkbox {...props} />
+      <div className="s-grid s-gap-1.5 s-leading-none">
+        <Label className="s-text-sm s-leading-none peer-disabled:s-cursor-not-allowed peer-disabled:s-opacity-70">
+          {text}
+        </Label>
+        <p className="s-text-xs s-text-muted-foreground">{description}</p>
       </div>
-    </label>
+    </div>
   );
 }
+
+export { Checkbox, CheckboxWithText, CheckBoxWithTextAndDescription };
+export type { CheckboxProps };

package/src/components/index.ts

@@ -5,7 +5,12 @@ export { BarHeader } from "./BarHeader";
 export { Breadcrumbs } from "./Breadcrumbs";
 export { Button } from "./Button";
 export { CardButton } from "./CardButton";
-export { Checkbox } from "./Checkbox";
+export type { CheckboxProps } from "./Checkbox";
+export {
+  Checkbox,
+  CheckboxWithText,
+  CheckBoxWithTextAndDescription,
+} from "./Checkbox";
 export { Chip } from "./Chip";
 export { Citation } from "./Citation";
 export { default as CollapseButton } from "./CollapseButton";

package/src/stories/Checkbox.stories.tsx

@@ -1,7 +1,11 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta } from "@storybook/react";
 import React from "react";
 
-import { Checkbox } from "../index_with_tw_base";
+import {
+  Checkbox,
+  CheckboxWithText,
+  CheckBoxWithTextAndDescription,
+} from "../index_with_tw_base";
 
 const meta = {
   title: "Primitives/Checkbox",
@@ -9,70 +13,34 @@ const meta = {
 } satisfies Meta<typeof Checkbox>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
-export const CheckBoxExample = () => {
-  // No-op function for onChange
-  const handleChange = () => {
-    // This function intentionally left blank
-  };
 
+const handleChange = () => {
+  // This function intentionally left blank
+};
+
+export const CheckBoxSizesExample = () => {
   return (
     <div className="s-flex s-flex-col s-gap-10">
-      SM
       <div className="s-flex s-gap-10">
-        Selectable
-        <Checkbox variant="selectable" onChange={handleChange} />
-        <Checkbox
-          checked="checked"
-          variant="selectable"
-          onChange={handleChange}
-        />
-        <Checkbox
-          checked="partial"
-          variant="selectable"
-          onChange={handleChange}
-        />
-        Checkable
-        <Checkbox variant="checkable" onChange={handleChange} />
-        <Checkbox
-          checked="checked"
-          variant="checkable"
-          onChange={handleChange}
-        />
-        <Checkbox
-          checked="partial"
-          variant="checkable"
-          onChange={handleChange}
-        />
+        SM
+        <Checkbox onChange={handleChange} />
+        <Checkbox disabled onChange={handleChange} />
+        <Checkbox checked onChange={handleChange} />
+        <Checkbox checked disabled onChange={handleChange} />
+        <Checkbox checked="partial" onChange={handleChange} />
+        <Checkbox checked="partial" disabled onChange={handleChange} />
       </div>
-      XS
       <div className="s-flex s-gap-10">
-        Selectable
-        <Checkbox size="xs" variant="selectable" onChange={handleChange} />
-        <Checkbox
-          size="xs"
-          checked="checked"
-          variant="selectable"
-          onChange={handleChange}
-        />
+        XS
+        <Checkbox size="xs" onChange={handleChange} />
+        <Checkbox size="xs" disabled onChange={handleChange} />
+        <Checkbox size="xs" checked onChange={handleChange} />
+        <Checkbox size="xs" checked disabled onChange={handleChange} />
+        <Checkbox size="xs" checked="partial" onChange={handleChange} />
         <Checkbox
           size="xs"
           checked="partial"
-          variant="selectable"
-          onChange={handleChange}
-        />
-        Checkable
-        <Checkbox size="xs" variant="checkable" onChange={handleChange} />
-        <Checkbox
-          size="xs"
-          checked="checked"
-          variant="checkable"
-          onChange={handleChange}
-        />
-        <Checkbox
-          size="xs"
-          checked="partial"
-          variant="checkable"
+          disabled
           onChange={handleChange}
         />
       </div>
@@ -80,36 +48,25 @@ export const CheckBoxExample = () => {
   );
 };
 
-export const Selectable: Story = {
-  args: {
-    checked: "checked",
-    variant: "selectable",
-  },
-};
-
-export const Checked: Story = {
-  args: {
-    checked: "checked",
-    variant: "checkable",
-  },
-};
-
-export const Unchecked: Story = {
-  args: {
-    checked: "unchecked",
-  },
-};
-
-export const PartialChecked: Story = {
-  args: {
-    checked: "partial",
-    variant: "checkable",
-  },
+export const CheckBoxWithTextExample = () => {
+  return (
+    <div className="s-flex s-gap-10">
+      <CheckboxWithText text="Google Drive" />
+    </div>
+  );
 };
 
-export const Disabled: Story = {
-  args: {
-    checked: "checked",
-    disabled: true,
-  },
+export const CheckBoxWithTextAndDescriptionExample = () => {
+  return (
+    <div className="s-flex s-flex-col s-gap-3">
+      <CheckBoxWithTextAndDescription
+        text="Google Drive"
+        description="This is a nice Google Drive description."
+      />
+      <CheckBoxWithTextAndDescription
+        text="Microsoft"
+        description="This is a nice Microsoft description."
+      />
+    </div>
+  );
 };