@xingxingmofashu/ui 0.1.0-beta.1 → 0.1.0-beta.2

package/README.md

@@ -2,8 +2,8 @@
 
 Liquid Glass UI components for React 19 and Tailwind CSS 4.
 
-The package ships nine components: Accordion, Alert Dialog, Button, Card,
-Checkbox, Dialog, Slider, Switch, and Toggle Group. Glass surfaces, rim
+The package ships ten components: Accordion, Alert Dialog, Button, Card,
+Checkbox, Dialog, Input, Slider, Switch, and Toggle Group. Glass surfaces, rim
 highlights, and inner shadows are drawn entirely with CSS. The interactive
 components are built on Base UI and do not add a custom rendering engine; `Card`
 is a native layout primitive.
@@ -15,8 +15,8 @@ is a native layout primitive.
 - Tailwind CSS 4.
 - An ESM-capable bundler. The package publishes ES modules only.
 
-`Accordion`, `AlertDialog`, `Button`, `Checkbox`, `Dialog`, `Slider`, `Switch`,
-and `ToggleGroup` are client components. `Card` is server-safe and can be
+`Accordion`, `AlertDialog`, `Button`, `Checkbox`, `Dialog`, `Input`, `Slider`,
+`Switch`, and `ToggleGroup` are client components. `Card` is server-safe and can be
 rendered from a React Server Component.
 
 ## Install
@@ -86,9 +86,9 @@ package stylesheet; override them in your own theme layer. Tailwind aliases use
 the `ui-` prefix (`text-ui-ink`, `outline-ui-glass-focus`, and so on) to avoid
 colliding with host design tokens.
 
-`Button`, `Card`, `Checkbox`, `Dialog`, `Slider`, `Switch`, `ToggleGroup`,
-`Accordion`, and `AlertDialog` inherit the host font and do not force a font
-family.
+`Button`, `Card`, `Checkbox`, `Dialog`, `Input`, `Slider`, `Switch`,
+`ToggleGroup`, `Accordion`, and `AlertDialog` inherit the host font and do not
+force a font family.
 
 The visual material relies on modern CSS: `backdrop-filter`, `color-mix`,
 container units, individual `translate` / `scale` properties, and `:has`.
@@ -102,9 +102,10 @@ Use a current evergreen browser.
 - `Card`
 - `Checkbox`
 - `Dialog`
+- `Input`
 - `Slider`
 - `Switch`
-- `ToggleGroup` / `ToggleGroupItem`
+- `ToggleGroup`
 
 
 ## Development

package/dist/components/alert-dialog.js

@@ -36,14 +36,14 @@ function AlertDialog({
         className: ui.overlay()
       }
     )),
-    /* @__PURE__ */ React.createElement("div", { "data-slot": "content", className: ui.content() }, /* @__PURE__ */ React.createElement(UIAlertDialog.Title, { "data-slot": "title", className: ui.title() }, title), description != null ? /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement("div", { "data-slot": "content", className: ui.content() }, /* @__PURE__ */ React.createElement(UIAlertDialog.Title, { "data-slot": "title", className: ui.title() }, title), description ? /* @__PURE__ */ React.createElement(
       UIAlertDialog.Description,
       {
         "data-slot": "description",
         className: ui.description()
       },
       description
-    ) : null, children != null ? /* @__PURE__ */ React.createElement("div", { "data-slot": "body", className: ui.body() }, children) : null, /* @__PURE__ */ React.createElement("div", { "data-slot": "footer", className: ui.footer() }, /* @__PURE__ */ React.createElement(
+    ) : null, children ? /* @__PURE__ */ React.createElement("div", { "data-slot": "body", className: ui.body() }, children) : null, /* @__PURE__ */ React.createElement("div", { "data-slot": "footer", className: ui.footer() }, /* @__PURE__ */ React.createElement(
       UIAlertDialog.Close,
       {
         onClick: onCancel,

package/dist/components/button.js

@@ -29,7 +29,7 @@ function Button({
         className: ui.overlay(),
         "aria-hidden": "true"
       }
-    )), leadingIcon != null ? /* @__PURE__ */ React.createElement(
+    )), leadingIcon ? /* @__PURE__ */ React.createElement(
       "span",
       {
         "data-slot": "leading-icon",
@@ -37,7 +37,7 @@ function Button({
         "aria-hidden": "true"
       },
       leadingIcon
-    ) : null, /* @__PURE__ */ React.createElement("span", { "data-slot": "label", className: ui.label() }, label || children), trailingIcon != null ? /* @__PURE__ */ React.createElement(
+    ) : null, /* @__PURE__ */ React.createElement("span", { "data-slot": "label", className: ui.label() }, label || children), trailingIcon ? /* @__PURE__ */ React.createElement(
       "span",
       {
         "data-slot": "trailing-icon",

package/dist/components/checkbox.d.ts

@@ -10,6 +10,6 @@ interface CheckboxProps extends Omit<React.ComponentProps<typeof UICheckbox.Root
     /** Optional supporting text. */
     description?: React.ReactNode;
 }
-declare function Checkbox({ className, label, description, size, indeterminate, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }: CheckboxProps): React.JSX.Element;
+declare function Checkbox({ className, label, description, size, indeterminate, ...props }: CheckboxProps): React.JSX.Element;
 export { Checkbox };
 export type { CheckboxProps };

package/dist/components/checkbox.js

@@ -26,23 +26,14 @@ function Checkbox({
   description,
   size,
   indeterminate = false,
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledBy,
-  "aria-describedby": ariaDescribedBy,
   ...props
 }) {
   const ui = theme({ size });
-  const id = React.useId();
-  const labelId = `${id}-label`;
-  const descriptionId = `${id}-description`;
   return /* @__PURE__ */ React.createElement(
     UICheckbox.Root,
     {
       ...props,
       indeterminate,
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledBy ?? (label != null && ariaLabel == null ? labelId : void 0),
-      "aria-describedby": ariaDescribedBy ?? (description != null ? descriptionId : void 0),
       "data-slot": "root",
       className: cn(ui.root(), className)
     },
@@ -63,15 +54,7 @@ function Checkbox({
       },
       /* @__PURE__ */ React.createElement("span", { "data-slot": "indicator-icon", className: ui.indicatorIcon() }, /* @__PURE__ */ React.createElement(CheckIcon, { indeterminate }))
     )),
-    label != null || description != null ? /* @__PURE__ */ React.createElement("span", { "data-slot": "wrapper", className: ui.wrapper() }, label != null ? /* @__PURE__ */ React.createElement("span", { id: labelId, "data-slot": "label", className: ui.label() }, label) : null, description != null ? /* @__PURE__ */ React.createElement(
-      "span",
-      {
-        id: descriptionId,
-        "data-slot": "description",
-        className: ui.description()
-      },
-      description
-    ) : null) : null
+    label || description ? /* @__PURE__ */ React.createElement("span", { "data-slot": "wrapper", className: ui.wrapper() }, label ? /* @__PURE__ */ React.createElement("span", { "data-slot": "label", className: ui.label() }, label) : null, description ? /* @__PURE__ */ React.createElement("span", { "data-slot": "description", className: ui.description() }, description) : null) : null
   );
 }
 export { Checkbox };

package/dist/components/dialog.js

@@ -26,14 +26,14 @@ function Dialog({
         className: ui.overlay()
       }
     )),
-    /* @__PURE__ */ React.createElement("div", { "data-slot": "content", className: ui.content() }, /* @__PURE__ */ React.createElement(UIDialog.Title, { "data-slot": "title", className: ui.title() }, title), description != null ? /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement("div", { "data-slot": "content", className: ui.content() }, /* @__PURE__ */ React.createElement(UIDialog.Title, { "data-slot": "title", className: ui.title() }, title), description ? /* @__PURE__ */ React.createElement(
       UIDialog.Description,
       {
         "data-slot": "description",
         className: ui.description()
       },
       description
-    ) : null, children != null ? /* @__PURE__ */ React.createElement("div", { "data-slot": "body", className: ui.body() }, children) : null, footer != null ? /* @__PURE__ */ React.createElement("div", { "data-slot": "footer", className: ui.footer() }, footer) : null)
+    ) : null, children ? /* @__PURE__ */ React.createElement("div", { "data-slot": "body", className: ui.body() }, children) : null, footer ? /* @__PURE__ */ React.createElement("div", { "data-slot": "footer", className: ui.footer() }, footer) : null)
   ))));
 }
 export { Dialog };

package/dist/components/input.d.ts

@@ -0,0 +1,19 @@
+import { Input as UIInput } from "@base-ui/react/input";
+import * as React from "react";
+import { type VariantProps } from "tailwind-variants";
+import theme from "../theme/input.js";
+interface InputProps extends Omit<React.ComponentProps<typeof UIInput>, "className" | "children" | "size" | "style">, VariantProps<typeof theme> {
+    /** Tailwind classes merged into the root element. */
+    className?: string;
+    /** Visible label associated with the input. */
+    label?: React.ReactNode;
+    /** Optional supporting text under the field. */
+    description?: React.ReactNode;
+    /** Icon rendered before the input. */
+    leadingIcon?: React.ReactNode;
+    /** Icon rendered after the input. */
+    trailingIcon?: React.ReactNode;
+}
+declare function Input({ className, label, description, leadingIcon, trailingIcon, size, id, disabled, ...props }: InputProps): React.JSX.Element;
+export { Input };
+export type { InputProps };

package/dist/components/input.js

@@ -0,0 +1,64 @@
+"use client";
+import { Input as UIInput } from "@base-ui/react/input";
+import { cn } from "cn";
+import * as React from "react";
+import theme from "../theme/input.js";
+function Input({
+  className,
+  label,
+  description,
+  leadingIcon,
+  trailingIcon,
+  size,
+  id,
+  disabled,
+  ...props
+}) {
+  const ui = theme({ size });
+  const generatedId = React.useId();
+  const inputId = id ?? generatedId;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "data-slot": "root",
+      "data-disabled": disabled || void 0,
+      className: cn(ui.root(), className)
+    },
+    label ? /* @__PURE__ */ React.createElement("label", { htmlFor: inputId, "data-slot": "label", className: ui.label() }, label) : null,
+    /* @__PURE__ */ React.createElement("span", { "data-slot": "control", className: ui.control() }, /* @__PURE__ */ React.createElement("span", { "aria-hidden": "true", "data-slot": "glass", className: ui.glass() }, /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        "aria-hidden": "true",
+        "data-slot": "overlay",
+        className: ui.overlay()
+      }
+    )), leadingIcon ? /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        "data-slot": "leading-icon",
+        className: ui.leadingIcon(),
+        "aria-hidden": "true"
+      },
+      leadingIcon
+    ) : null, /* @__PURE__ */ React.createElement(
+      UIInput,
+      {
+        ...props,
+        id: inputId,
+        disabled,
+        "data-slot": "input",
+        className: ui.input()
+      }
+    ), trailingIcon ? /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        "data-slot": "trailing-icon",
+        className: ui.trailingIcon(),
+        "aria-hidden": "true"
+      },
+      trailingIcon
+    ) : null),
+    description ? /* @__PURE__ */ React.createElement("span", { "data-slot": "description", className: ui.description() }, description) : null
+  );
+}
+export { Input };

package/dist/components/toggle-group.d.ts

@@ -3,20 +3,23 @@ import { ToggleGroup as UIToggleGroup } from "@base-ui/react/toggle-group";
 import * as React from "react";
 import { type VariantProps } from "tailwind-variants";
 import theme from "../theme/toggle-group.js";
+/** One option managed by the toggle group. */
+type ToggleGroupItemProps = Omit<UIToggle.Props, "className" | "children" | "style" | "value" | "pressed" | "defaultPressed"> & {
+    /** Value that identifies the option in the group value. */
+    value: string;
+    /** Visible content inside the item. */
+    label?: React.ReactNode;
+    /** Icon rendered before the label. */
+    icon?: React.ReactNode;
+    /** Tailwind classes merged into the item root. */
+    className?: string;
+};
 type ToggleGroupProps<Value extends string = string> = Omit<UIToggleGroup.Props<Value>, "className" | "style" | "children"> & VariantProps<typeof theme> & {
+    /** Options rendered by the toggle group. */
+    items: readonly ToggleGroupItemProps[];
     /** Tailwind classes merged into the group root. */
     className?: any;
-    children?: React.ReactNode;
-};
-type ToggleGroupItemProps<Value extends string = string> = Omit<UIToggle.Props<Value>, "className" | "children" | "style"> & {
-    /** Tailwind classes merged into the item root. */
-    className?: any;
-    /** Icon rendered inside the item. */
-    icon?: React.ReactNode;
-    /** Text or custom content rendered inside the item. */
-    children?: React.ReactNode;
 };
-declare function ToggleGroup<Value extends string = string>({ className, size, children, ...props }: ToggleGroupProps<Value>): React.JSX.Element;
-declare function ToggleGroupItem<Value extends string = string>({ className, icon, children, ...props }: ToggleGroupItemProps<Value>): React.JSX.Element;
-export { ToggleGroup, ToggleGroupItem };
+declare function ToggleGroup<Value extends string = string>({ className, size, items, ...props }: ToggleGroupProps<Value>): React.JSX.Element;
+export { ToggleGroup };
 export type { ToggleGroupItemProps, ToggleGroupProps };

package/dist/components/toggle-group.js

@@ -7,7 +7,7 @@ import theme from "../theme/toggle-group.js";
 function ToggleGroup({
   className,
   size,
-  children,
+  items,
   ...props
 }) {
   const ui = theme({ size });
@@ -19,24 +19,16 @@ function ToggleGroup({
       className: cn(ui.root(), className)
     },
     /* @__PURE__ */ React.createElement("span", { "aria-hidden": "true", "data-slot": "glass", className: ui.glass() }, /* @__PURE__ */ React.createElement("span", { "aria-hidden": "true", "data-layer": "rim", className: ui.rim() })),
-    children
+    items.map((item) => /* @__PURE__ */ React.createElement(ToggleGroupItem, { key: item.value, ...item }))
   );
 }
 function ToggleGroupItem({
   className,
   icon,
-  children,
+  label,
   ...props
 }) {
   const ui = theme();
-  return /* @__PURE__ */ React.createElement(
-    UIToggle,
-    {
-      ...props,
-      "data-slot": "item",
-      className: cn(ui.item(), className)
-    },
-    /* @__PURE__ */ React.createElement("span", { "data-slot": "content", className: ui.content() }, icon != null ? /* @__PURE__ */ React.createElement("span", { "data-slot": "icon", "aria-hidden": "true", className: ui.icon() }, icon) : null, /* @__PURE__ */ React.createElement("span", { "data-slot": "label", className: ui.label() }, children))
-  );
+  return /* @__PURE__ */ React.createElement(UIToggle, { ...props, "data-slot": "item", className: cn(ui.item(), className) }, /* @__PURE__ */ React.createElement("span", { "data-slot": "content", className: ui.content() }, icon ? /* @__PURE__ */ React.createElement("span", { "data-slot": "icon", "aria-hidden": "true", className: ui.icon() }, icon) : null, label ? /* @__PURE__ */ React.createElement("span", { "data-slot": "label", className: ui.label() }, label) : null));
 }
-export { ToggleGroup, ToggleGroupItem };
+export { ToggleGroup };

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export { Button, type ButtonProps } from "./components/button.js";
 export { Card, type CardProps } from "./components/card.js";
 export { Checkbox, type CheckboxProps } from "./components/checkbox.js";
 export { Dialog, type DialogProps } from "./components/dialog.js";
+export { Input, type InputProps } from "./components/input.js";
 export { Slider, type SliderProps } from "./components/slider.js";
 export { Switch, type SwitchProps } from "./components/switch.js";
-export { ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, } from "./components/toggle-group.js";
+export { ToggleGroup, type ToggleGroupItemProps, type ToggleGroupProps, } from "./components/toggle-group.js";

package/dist/index.js

@@ -6,9 +6,9 @@ export { Button } from "./components/button.js";
 export { Card } from "./components/card.js";
 export { Checkbox } from "./components/checkbox.js";
 export { Dialog } from "./components/dialog.js";
+export { Input } from "./components/input.js";
 export { Slider } from "./components/slider.js";
 export { Switch } from "./components/switch.js";
 export {
-  ToggleGroup,
-  ToggleGroupItem
+  ToggleGroup
 } from "./components/toggle-group.js";

package/dist/theme/checkbox.js

@@ -43,7 +43,7 @@ export default tv({
     ],
     indicatorIcon: "block size-[var(--ui-checkbox-icon-size)]",
     wrapper: "ms-[var(--ui-checkbox-gap)] min-w-0",
-    label: "block font-medium text-ui-ink",
+    label: "block font-medium text-ui-ink leading-[var(--ui-checkbox-size)]",
     description: "block text-ui-ink opacity-60"
   },
   variants: {

package/dist/theme/input.d.ts

@@ -0,0 +1,131 @@
+declare const _default: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            root: string;
+            control: string;
+            leadingIcon: string;
+            trailingIcon: string;
+        };
+        sm: {
+            root: string;
+            control: string;
+            leadingIcon: string;
+            trailingIcon: string;
+        };
+        md: {
+            root: string;
+            control: string;
+            leadingIcon: string;
+            trailingIcon: string;
+        };
+        lg: {
+            root: string;
+            control: string;
+            leadingIcon: string;
+            trailingIcon: string;
+        };
+        xl: {
+            root: string;
+            control: string;
+            leadingIcon: string;
+            trailingIcon: string;
+        };
+    };
+}, {
+    root: string[];
+    label: string;
+    control: string[];
+    glass: string[];
+    overlay: string;
+    leadingIcon: string[];
+    input: string[];
+    trailingIcon: string[];
+    description: string;
+}, undefined, {
+    size: {
+        xs: {
+            root: string;
+            control: string;
+            leadingIcon: string;
+            trailingIcon: string;
+        };
+        sm: {
+            root: string;
+            control: string;
+            leadingIcon: string;
+            trailingIcon: string;
+        };
+        md: {
+            root: string;
+            control: string;
+            leadingIcon: string;
+            trailingIcon: string;
+        };
+        lg: {
+            root: string;
+            control: string;
+            leadingIcon: string;
+            trailingIcon: string;
+        };
+        xl: {
+            root: string;
+            control: string;
+            leadingIcon: string;
+            trailingIcon: string;
+        };
+    };
+}, {
+    root: string[];
+    label: string;
+    control: string[];
+    glass: string[];
+    overlay: string;
+    leadingIcon: string[];
+    input: string[];
+    trailingIcon: string[];
+    description: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        xs: {
+            root: string;
+            control: string;
+            leadingIcon: string;
+            trailingIcon: string;
+        };
+        sm: {
+            root: string;
+            control: string;
+            leadingIcon: string;
+            trailingIcon: string;
+        };
+        md: {
+            root: string;
+            control: string;
+            leadingIcon: string;
+            trailingIcon: string;
+        };
+        lg: {
+            root: string;
+            control: string;
+            leadingIcon: string;
+            trailingIcon: string;
+        };
+        xl: {
+            root: string;
+            control: string;
+            leadingIcon: string;
+            trailingIcon: string;
+        };
+    };
+}, {
+    root: string[];
+    label: string;
+    control: string[];
+    glass: string[];
+    overlay: string;
+    leadingIcon: string[];
+    input: string[];
+    trailingIcon: string[];
+    description: string;
+}>>;
+export default _default;

package/dist/theme/input.js

@@ -0,0 +1,82 @@
+import { tv } from "tailwind-variants";
+export default tv({
+  slots: {
+    root: [
+      "group flex w-full min-w-0 flex-col gap-1.5 text-ui-ink",
+      "data-[disabled]:cursor-not-allowed"
+    ],
+    label: "w-fit font-medium text-ui-ink group-data-[disabled]:opacity-60",
+    control: [
+      "relative isolate flex w-full min-w-0 items-center overflow-hidden",
+      "h-[var(--ui-input-height)] rounded-[var(--ui-input-radius)]",
+      "gap-[var(--ui-input-gap)] px-[var(--ui-input-padding)]",
+      "bg-transparent text-inherit",
+      "group-data-[disabled]:opacity-60",
+      "group-focus-within:outline-2 group-focus-within:outline-offset-2 group-focus-within:outline-ui-glass-focus"
+    ],
+    glass: [
+      "ui-glass ui-glass-highlight",
+      "pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-[inherit]",
+      "[--ui-glass-tone:brightness(1)] [--ui-glass-contrast:1.1]",
+      "[--ui-glass-border:color-mix(in_srgb,var(--ui-ink)_18%,transparent)]",
+      "[--ui-glass-surface:color-mix(in_srgb,var(--ui-ink)_3%,transparent)]",
+      "[--ui-glass-rim:color-mix(in_srgb,var(--ui-ink)_10%,transparent)]",
+      "[--ui-shadow-glass:inset_0_1px_0_rgb(255_255_255/0.45),inset_0_0_0_1px_rgb(255_255_255/0.18),0_1px_2px_rgb(0_0_0/0.08)]",
+      "[--ui-glass-rim-inset:4px] [--ui-glass-rim-blur:2px]"
+    ],
+    overlay: "ui-glass-rim",
+    leadingIcon: [
+      "relative z-[1] inline-flex shrink-0 items-center justify-center text-ui-ink opacity-55",
+      "[&_svg]:block [&_svg]:shrink-0"
+    ],
+    input: [
+      "relative z-[1] h-full min-w-0 flex-1 appearance-none border-0 bg-transparent p-0 text-ui-ink",
+      "placeholder:text-ui-ink/40",
+      "outline-none focus:outline-none",
+      "disabled:cursor-not-allowed",
+      "[&::-webkit-search-cancel-button]:appearance-none"
+    ],
+    trailingIcon: [
+      "relative z-[1] inline-flex shrink-0 items-center justify-center text-ui-ink opacity-55",
+      "[&_svg]:block [&_svg]:shrink-0"
+    ],
+    description: "text-ui-ink opacity-60 group-data-[disabled]:opacity-50"
+  },
+  variants: {
+    size: {
+      xs: {
+        root: "gap-1 text-xs",
+        control: "[--ui-input-height:28px] [--ui-input-radius:8px] [--ui-input-padding:10px] [--ui-input-gap:6px]",
+        leadingIcon: "[&_svg]:size-4",
+        trailingIcon: "[&_svg]:size-4"
+      },
+      sm: {
+        root: "gap-1 text-xs",
+        control: "[--ui-input-height:32px] [--ui-input-radius:9px] [--ui-input-padding:12px] [--ui-input-gap:7px]",
+        leadingIcon: "[&_svg]:size-4",
+        trailingIcon: "[&_svg]:size-4"
+      },
+      md: {
+        root: "gap-1.5 text-sm",
+        control: "[--ui-input-height:36px] [--ui-input-radius:10px] [--ui-input-padding:12px] [--ui-input-gap:8px]",
+        leadingIcon: "[&_svg]:size-5",
+        trailingIcon: "[&_svg]:size-5"
+      },
+      lg: {
+        root: "gap-1.5 text-sm",
+        control: "[--ui-input-height:40px] [--ui-input-radius:11px] [--ui-input-padding:14px] [--ui-input-gap:8px]",
+        leadingIcon: "[&_svg]:size-5",
+        trailingIcon: "[&_svg]:size-5"
+      },
+      xl: {
+        root: "gap-2 text-base",
+        control: "[--ui-input-height:44px] [--ui-input-radius:12px] [--ui-input-padding:14px] [--ui-input-gap:10px]",
+        leadingIcon: "[&_svg]:size-6",
+        trailingIcon: "[&_svg]:size-6"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xingxingmofashu/ui",
-  "version": "0.1.0-beta.1",
+  "version": "0.1.0-beta.2",
   "description": "Liquid Glass UI components for React 19 and Tailwind CSS 4.",
   "license": "MIT",
   "author": "xingxingmofashu",