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

package/src/components/index.ts

@@ -1,7 +1,7 @@
+export * from "./accordion";
 export * from "./alert-dialog";
 export * from "./auto-complete";
 export * from "./avatar";
-export * from "./background-image";
 export * from "./button";
 export * from "./calendar";
 export * from "./card";
@@ -13,16 +13,14 @@ export * from "./date-picker";
 export * from "./dialog";
 export * from "./divider";
 export * from "./dropzone";
-export * from "./empty-state";
+export * from "./empty";
 export * from "./field";
 export * from "./form";
-export * from "./heading";
 export * from "./input";
 export * from "./kbd";
 export * from "./label";
 export * from "./loader";
 export * from "./menu";
-export * from "./multi-select";
 export * from "./number-input";
 export * from "./pagination";
 export * from "./password";
@@ -30,13 +28,11 @@ export * from "./popover";
 export * from "./progress";
 export * from "./scroll-area";
 export * from "./select";
-export * from "./show";
 export * from "./skeleton";
 export * from "./stack";
 export * from "./stepper";
 export * from "./switch";
 export * from "./table";
-export * from "./table-pagination";
 export * from "./tabs";
 export * from "./tag";
 export * from "./textarea";

package/src/components/input/input.stories.tsx

@@ -15,7 +15,7 @@ const meta: Meta<typeof Input> = {
     placeholder: "Placeholder...",
   },
   argTypes: {
-    onChange: { control: false },
+    onValueChange: { control: false },
   },
 };
 
@@ -58,8 +58,8 @@ export const FileType: Story = {
 };
 
 /**
- * `onChange` fires with `(value: string, event)` — the string value is the first argument,
- * so no `event.target.value` needed.
+ * `onValueChange` fires with `(value: string, event)` — the string value is the
+ * first argument, so no `event.target.value` needed.
  */
 export const Controlled: Story = {
   render: () => {
@@ -68,7 +68,7 @@ export const Controlled: Story = {
       <div className="flex flex-col gap-2">
         <Input
           value={value}
-          onChange={setValue}
+          onValueChange={setValue}
           placeholder="Type something..."
           aria-label="Controlled input"
         />
@@ -98,7 +98,7 @@ export const Primitive: Story = {
   render: () => (
     <InputPrimitive
       className="w-full rounded-md border border-input px-3 py-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
-      placeholder="Raw Base UI Input"
+      placeholder="Raw Input"
     />
   ),
 };

package/src/components/input/input.tsx

@@ -8,14 +8,14 @@ export const inputBaseClasses =
 // ── Composite ─────────────────────────────────────────────────────────────────
 
 export type InputProps = Omit<BaseInput.Props, "size" | "onChange"> & {
-  onChange?: (value: string, event: ChangeEvent<HTMLInputElement>) => void;
+  onValueChange?: (value: string, event: ChangeEvent<HTMLInputElement>) => void;
   nativeInput?: boolean;
 };
 
 export function Input({
   className,
   nativeInput = false,
-  onChange,
+  onValueChange,
   ...props
 }: InputProps) {
   const classes = cn(
@@ -42,9 +42,9 @@ export function Input({
     className,
   );
 
-  const handleChange = onChange
+  const handleChange = onValueChange
     ? (event: ChangeEvent<HTMLInputElement>) =>
-        onChange(event.target.value, event)
+        onValueChange(event.target.value, event)
     : undefined;
 
   if (nativeInput) {

package/src/components/kbd/kbd.stories.tsx

@@ -11,6 +11,7 @@ const meta: Meta<typeof Kbd> = {
   args: {
     children: "K",
   },
+  parameters: { layout: "centered" },
 };
 
 export default meta;

package/src/components/label/label.stories.tsx

@@ -48,6 +48,22 @@ export const WithTooltip: Story = {
   },
 };
 
+/**
+ * `className` estila el root `<label>`. `classNames` expone los slots
+ * `asterisk` (el `*` que aparece con `required`) y `tooltip` (el botón con
+ * el ícono de info que aparece con `tooltip`).
+ */
+export const WithClassNames: Story = {
+  args: {
+    required: true,
+    tooltip: "Used for billing.",
+    classNames: {
+      asterisk: "text-primary font-bold",
+      tooltip: "text-primary hover:text-primary/80",
+    },
+  },
+};
+
 /**
  * The `render` prop replaces the root element while preserving all
  * merged props and children. Useful for custom wrappers or non-label contexts.

package/src/components/label/label.tsx

@@ -9,6 +9,13 @@ import { Tooltip } from "../tooltip";
 interface LabelProps extends useRender.ComponentProps<"label"> {
   required?: boolean;
   tooltip?: ReactNode;
+  /** Styles applied to each internal slot. */
+  classNames?: {
+    /** Red asterisk rendered when `required` is true. */
+    asterisk?: string;
+    /** Info-icon button rendered when `tooltip` is set. */
+    tooltip?: string;
+  };
 }
 
 export function Label({
@@ -16,6 +23,7 @@ export function Label({
   render,
   required,
   tooltip,
+  classNames,
   children,
   ...props
 }: LabelProps): React.ReactElement {
@@ -24,7 +32,7 @@ export function Label({
       <>
         {children}
         {required && (
-          <span aria-hidden className="text-error">
+          <span aria-hidden className={cn("text-error", classNames?.asterisk)}>
             *
           </span>
         )}
@@ -33,7 +41,10 @@ export function Label({
             <button
               type="button"
               aria-label="More information"
-              className="inline-flex cursor-default items-center text-muted-foreground hover:text-foreground transition-all ml-1"
+              className={cn(
+                "inline-flex cursor-default items-center text-muted-foreground hover:text-foreground transition-all ml-1",
+                classNames?.tooltip,
+              )}
             >
               <Info className="size-3.5" />
             </button>

package/src/components/loader/loader.stories.tsx

@@ -3,12 +3,14 @@ import { Loader, Stack } from "../../components";
 
 /**
  * Spinner that signals an in-progress operation. Accepts all native SVG props
- * via `LucideProps` — use `color`, `strokeWidth`, or `className` for one-off overrides.
- * `center` positions the loader fixed at the viewport center.
+ * via `LucideProps` — use `color`, `strokeWidth`, or `className` for one-off
+ * overrides on the icon. `center` positions the loader fixed at the viewport
+ * center. Style the wrapper with `classNames.container`.
  */
 const meta: Meta<typeof Loader> = {
   title: "Components/Loader",
   component: Loader,
+  parameters: { layout: "centered" },
 };
 
 export default meta;
@@ -30,7 +32,7 @@ export const Variants: Story = {
 
 export const Sizes: Story = {
   render: () => (
-    <Stack>
+    <Stack align="end">
       <Loader size="xs" />
       <Loader size="sm" />
       <Loader size="default" />
@@ -41,8 +43,8 @@ export const Sizes: Story = {
 };
 
 /**
- * `center` uses `fixed inset-0` — it covers the full viewport.
- * Pair it with a backdrop when used inside a modal or overlay.
+ * `center` uses `fixed inset-0 grid place-items-center` — it covers the full
+ * viewport. Pair it with a backdrop when used inside a modal or overlay.
  */
 export const Centered: Story = { args: { center: true } };
 

package/src/components/loader/loader.tsx

@@ -31,13 +31,18 @@ type LoaderVariants = VariantProps<typeof loaderVariants>;
 
 type Props = LucideProps &
   LoaderVariants & {
+    /** Renders the loader fixed at the viewport center via `fixed inset-0`. */
     center?: boolean;
-    containerClassName?: string;
+    /** Styles applied to each internal slot. */
+    classNames?: {
+      /** Wrapper around the spinner (used for `center` overlay). */
+      container?: string;
+    };
   };
 
 export const Loader = ({
   center,
-  containerClassName,
+  classNames,
   variant,
   size,
   ...props
@@ -45,7 +50,7 @@ export const Loader = ({
   return (
     <div
       className={cn(
-        containerClassName,
+        classNames?.container,
         center && "fixed inset-0 grid place-items-center",
       )}
       data-slot="loader"