@boxcustodia/library 2.0.0-alpha.12 → 2.0.0-alpha.14

package/src/components/tag/tag.tsx

@@ -1,99 +1,51 @@
-import { X } from "lucide-react";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../lib";
-import { TagVariant, tagVariants } from "./tag.variants";
 
-type VariantProps = {
-  color?: never;
-  variant?: TagVariant["variant"];
-};
-type ColorProps = {
-  color: string;
-  variant?: "outline" | "borderless";
-};
-type StyleProps = ColorProps | VariantProps;
-
-type BaseProps = {
-  icon?: React.ReactNode;
-  rounded?: TagVariant["rounded"];
-} & StyleProps &
-  React.HTMLAttributes<HTMLDivElement>;
-
-type ClosableProps = BaseProps & {
-  closable: true;
-  onClose: () => void;
-};
-
-type NonClosableProps = BaseProps & {
-  closable?: false;
-  onClose?: never;
-};
-
-type Props = ClosableProps | NonClosableProps;
-
-export const Tag = ({
+const tagVariants = cva(
+  "group/tag inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-error aria-invalid:ring-error/20 dark:aria-invalid:ring-error/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        error:
+          "bg-error/10 text-error focus-visible:ring-error/20 dark:bg-error/20 dark:focus-visible:ring-error/40 [a]:hover:bg-error/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Tag({
   className,
-  color,
-  variant,
-  rounded,
-  icon,
-  closable,
-  onClose,
-  children,
+  variant = "default",
+  render,
   ...props
-}: Props) => {
-  const withTextColored =
-    !!color && (variant === "outline" || variant === "borderless");
-  const withBgColored = !!color && !variant;
-
-  return (
-    <div
-      data-slot="tag"
-      className={cn(
-        tagVariants({ variant, rounded }),
-        withTextColored && `bg-white`,
-        withBgColored && ` text-white`,
-        !!icon && "pl-1.5",
-        !!closable && "pr-1.5",
-        className,
-      )}
-      style={{
-        ...(withTextColored && {
-          color: color,
-          borderColor: color,
-        }),
-        ...(withBgColored && {
-          borderColor: color,
-          backgroundColor: color,
-        }),
-      }}
-      {...props}
-    >
-      {icon}
-      {children}
-      {closable && (
-        <button
-          type="button"
-          data-slot="tag-close"
-          className="z-10 h-4 w-4 cursor-pointer"
-          onClick={(e) => {
-            e.stopPropagation();
-            onClose();
-          }}
-        >
-          <X data-slot="tag-close-icon" />
-        </button>
-      )}
-
-      <span
-        data-slot="tag-overlay"
-        className="w-full h-full absolute top-0 left-0"
-        style={{
-          ...(withTextColored && {
-            opacity: 0.13,
-            backgroundColor: color,
-          }),
-        }}
-      />
-    </div>
-  );
-};
+}: useRender.ComponentProps<"span"> & VariantProps<typeof tagVariants>) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: cn(tagVariants({ variant }), className),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: "tag",
+      variant,
+    },
+  });
+}
+
+export { Tag, tagVariants };

package/src/components/textarea/textarea.stories.tsx

@@ -1,15 +1,13 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useState } from "react";
-import { Textarea, TextareaControl, TextareaField } from "../../components";
+import { Textarea } from "../../components";
 
 /**
- * Multi-line text input built on Base UI's Field.Control.
- * Shares the same border, focus, error, and disabled states as `Input`.
+ * Multi-line text input. Shares border, focus, error, and disabled states with `Input`.
  * Error state is driven by `aria-invalid` — pass it directly or wire via a `Field` context.
- * Use `controlProps` to pass extra props to the outer wrapper `span`.
  *
- * `onChange` receives `(value: string, event: ChangeEvent<HTMLTextAreaElement>)` — not the
- * native event directly. This matches the `Input` component API.
+ * `onValueChange` receives `(value: string, event: ChangeEvent<HTMLTextAreaElement>)` — not
+ * the native event directly. This matches the `Input` component API.
  */
 const meta: Meta<typeof Textarea> = {
   title: "Components/Textarea",
@@ -49,25 +47,13 @@ export const Error: Story = {
 };
 
 /**
- * `onChange` fires with `(value: string, event)` — the extracted string value comes first,
- * matching the `Input` component signature. Use `value` + `onChange` for controlled usage;
- * `defaultValue` for uncontrolled.
+ * `onValueChange` fires with `(value: string, event)` — the extracted string value comes
+ * first, matching the `Input` component signature. Use `value` + `onValueChange` for
+ * controlled usage; `defaultValue` for uncontrolled.
  */
 export const Controlled: Story = {
   render: () => {
     const [value, setValue] = useState<string>("");
-    return <Textarea value={value} onChange={setValue} />;
+    return <Textarea value={value} onValueChange={setValue} />;
   },
 };
-
-/**
- * Use `TextareaControl` and `TextareaField` directly when you need to inject
- * elements inside the wrapper (e.g., a character counter overlay).
- */
-export const Primitive: Story = {
-  render: (args) => (
-    <TextareaControl>
-      <TextareaField {...args} />
-    </TextareaControl>
-  ),
-};

package/src/components/textarea/textarea.tsx

@@ -1,7 +1,6 @@
 "use client";
 
-import { Field as FieldPrimitive } from "@base-ui/react/field";
-import { mergeProps } from "@base-ui/react/merge-props";
+import { Field } from "@base-ui/react/field";
 import {
   type ChangeEvent,
   type ComponentProps,
@@ -9,97 +8,36 @@ import {
 } from "react";
 import { cn } from "../../lib";
 
-// ─── Primitives ───────────────────────────────────────────────────────────────
-
-export function TextareaControl({
-  className,
-  unstyled = false,
-  children,
-  ...props
-}: ComponentProps<"span"> & { unstyled?: boolean }): ReactElement {
-  return (
-    <span
-      className={
-        cn(
-          !unstyled &&
-            "relative inline-flex w-full rounded-md border border-input bg-background text-sm transition-shadow has-focus-visible:border-ring has-aria-invalid:border-error has-focus-visible:has-aria-invalid:ring-error/20 has-disabled:cursor-not-allowed has-disabled:opacity-50",
-          className,
-        ) || undefined
-      }
-      data-slot="textarea-control"
-      {...props}
-    >
-      {children}
-    </span>
-  );
-}
-
-export type TextareaFieldProps = Omit<
-  ComponentProps<"textarea">,
-  "onChange"
-> & {
-  onChange?: (value: string, event: ChangeEvent<HTMLTextAreaElement>) => void;
+export type TextareaProps = Omit<ComponentProps<"textarea">, "onChange"> & {
+  onValueChange?: (
+    value: string,
+    event: ChangeEvent<HTMLTextAreaElement>,
+  ) => void;
 };
 
-export function TextareaField({
+export function Textarea({
   className,
-  ref,
-  onChange,
+  onValueChange,
   ...props
-}: TextareaFieldProps): ReactElement {
-  const handleChange = onChange
+}: TextareaProps): ReactElement {
+  const handleChange = onValueChange
     ? (event: ChangeEvent<HTMLTextAreaElement>) =>
-        onChange(event.target.value, event)
+        onValueChange(event.target.value, event)
     : undefined;
 
   return (
-    <FieldPrimitive.Control
-      ref={ref}
-      value={props.value}
-      defaultValue={props.defaultValue}
-      disabled={props.disabled}
-      id={props.id}
-      name={props.name}
-      render={(defaultProps: ComponentProps<"textarea">) => (
+    <Field.Control
+      render={
         <textarea
+          data-slot="textarea"
           className={cn(
-            "field-sizing-content min-h-17.5 w-full rounded-[inherit] px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] outline-none placeholder:text-muted-foreground max-sm:min-h-20.5",
+            "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none transition-shadow placeholder:text-muted-foreground focus-visible:border-ring aria-invalid:border-error focus-visible:aria-invalid:ring-error/20 disabled:cursor-not-allowed disabled:opacity-50",
             className,
           )}
-          data-slot="textarea"
-          {...mergeProps(defaultProps, props)}
           onChange={handleChange}
+          {...props}
         />
-      )}
+      }
     />
   );
 }
-
-// ─── Composite ────────────────────────────────────────────────────────────────
-
-export type TextareaProps = TextareaFieldProps & {
-  unstyled?: boolean;
-  controlProps?: ComponentProps<typeof TextareaControl>;
-};
-
-export function Textarea({
-  className,
-  unstyled = false,
-  ref,
-  controlProps,
-  ...props
-}: TextareaProps): ReactElement {
-  return (
-    <TextareaControl
-      unstyled={unstyled}
-      className={className}
-      {...controlProps}
-    >
-      <TextareaField ref={ref} {...props} />
-    </TextareaControl>
-  );
-}
-
-// ─── Exports ──────────────────────────────────────────────────────────────────
-
-export { FieldPrimitive };