@azmr/ui 0.4.0 → 0.5.0

package/README.md

@@ -1,6 +1,6 @@
 # @azmr/ui
 
-React components wired to reactive Signals. The `Grid` component re-renders automatically when its Signal changes — no state management needed.
+Accessible React design system built on Base UI and Tailwind v4 tokens: buttons, menus, modals, tables, toasts and more. Components that take a Signal, such as `Grid`, re-render when it changes, with no state management needed.
 
 ## Install
 
@@ -172,7 +172,8 @@ An unknown name renders nothing and logs one development warning; it never crash
 | `@azmr/ui/theme` | server-safe theme helpers: `createTheme`, cookies, `htmlAttributes`, `createLocale` | none, importable from Server Components and middleware |
 | `@azmr/ui/react` | `ThemeProvider`, `useTheme`, `LocaleProvider`, `useLocale` | `"use client"` |
 | `@azmr/ui/button` | `Button`, `buttonVariants` | `"use client"` |
-| `@azmr/ui/input` | `Input` | `"use client"` |
+| `@azmr/ui/input` | `Input`, `Textarea` | `"use client"` |
+| `@azmr/ui/field` | `Field`, `FieldRoot`, `FieldLabel`, `FieldDescription`, `FieldError` | `"use client"` |
 | `@azmr/ui/spinner` | `Spinner` | none, importable from Server Components |
 | `@azmr/ui/icons` | `Icon`, `createIconSet`, `registerIcons` | none, importable from Server Components |
 | `@azmr/ui/icons/lucide` | `Icon` bound to the curated Lucide set, `lucideIcons` | none, importable from Server Components |
@@ -237,7 +238,7 @@ All cell values are rendered through React's JSX escaping — `dangerouslySetInn
 
 ## Documentation
 
-Full docs at [docs.azmara.io](https://docs.azmara.io)
+Full docs at [platform.azmara.io](https://platform.azmara.io/docs/packages/ui)
 
 ## License
 

package/dist/{button-CYt2Zw3D.d.ts → button-D_1Tb_Km.d.ts}

@@ -61,4 +61,4 @@ declare const Button: react.ForwardRefExoticComponent<(Omit<BaseButtonProps & {
     size?: TextButtonSize;
 }, "ref">) & react.RefAttributes<HTMLButtonElement>>;
 
-export { type ButtonOwnProps as B, Button as a, type ButtonProps as b, buttonVariants as c };
+export { Button as B, type ButtonProps as a, buttonVariants as b, type ButtonOwnProps as c };

package/dist/button.d.ts

@@ -1,5 +1,5 @@
-import { B as ButtonOwnProps } from './button-CYt2Zw3D.js';
-export { a as Button, b as ButtonProps, c as buttonVariants } from './button-CYt2Zw3D.js';
+import { c as ButtonOwnProps } from './button-D_1Tb_Km.js';
+export { B as Button, a as ButtonProps, b as buttonVariants } from './button-D_1Tb_Km.js';
 import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 import { ButtonProps } from '@base-ui/react/button';

package/dist/chunk-V6RHWYYO.js

@@ -0,0 +1,65 @@
+"use client";
+import {
+  Field
+} from "./chunk-ZJV2SYVH.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/input/input.tsx
+import { forwardRef } from "react";
+
+// src/primitives/input.ts
+import { Input } from "@base-ui/react/input";
+
+// src/components/input/input.tsx
+import { jsx } from "react/jsx-runtime";
+var Input2 = forwardRef(function Input3({ className, type = "text", ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      ref,
+      type,
+      className: cn(
+        "flex h-(--density-control-height) w-full min-w-0 rounded-md border border-input bg-background px-(--density-control-padding-x) py-1 text-sm text-foreground",
+        "transition-colors duration-(--motion-duration-fast) ease-standard",
+        "outline-none placeholder:text-muted-foreground",
+        "focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring",
+        "aria-invalid:border-destructive data-[invalid]:border-destructive",
+        "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 read-only:bg-muted",
+        className
+      ),
+      ...props
+    }
+  );
+});
+
+// src/components/input/textarea.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Textarea = forwardRef2(function Textarea2({ className, autoResize, rows = 3, onValueChange, ...props }, ref) {
+  return /* @__PURE__ */ jsx2(
+    Field.Control,
+    {
+      ref,
+      render: /* @__PURE__ */ jsx2("textarea", { rows }),
+      onValueChange: onValueChange ? (value) => onValueChange(value) : void 0,
+      className: cn(
+        "flex min-h-16 w-full min-w-0 rounded-md border border-input bg-background px-(--density-control-padding-x) py-2 text-sm text-foreground",
+        "transition-colors duration-(--motion-duration-fast) ease-standard",
+        "outline-none placeholder:text-muted-foreground",
+        "focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring",
+        "aria-invalid:border-destructive data-[invalid]:border-destructive",
+        "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 read-only:bg-muted",
+        autoResize ? "resize-none field-sizing-content" : "resize-y",
+        className
+      ),
+      ...props
+    }
+  );
+});
+
+export {
+  Input2 as Input,
+  Textarea
+};

package/dist/chunk-ZJV2SYVH.js

@@ -0,0 +1,8 @@
+"use client";
+
+// src/primitives/field.ts
+import { Field } from "@base-ui/react/field";
+
+export {
+  Field
+};

package/dist/field.d.ts

@@ -0,0 +1,57 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import * as _base_ui_react_field from '@base-ui/react/field';
+import { Field as Field$1 } from '@base-ui/react/field';
+
+type Classed<T> = Omit<T, "className"> & {
+    className?: string;
+};
+/** Groups a control with its label, description and error. Base UI wires the ids between them. */
+declare const FieldRoot: react.ForwardRefExoticComponent<Omit<Omit<Omit<_base_ui_react_field.FieldRootProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
+    className?: string;
+} & react.RefAttributes<HTMLDivElement>>;
+type FieldLabelProps = Classed<ComponentPropsWithoutRef<typeof Field$1.Label>> & {
+    /** Shows a required marker. It is hidden from screen readers, which hear `aria-required` on the control instead. */
+    required?: boolean;
+};
+/** The control's `<label>`, associated with it automatically. */
+declare const FieldLabel: react.ForwardRefExoticComponent<Omit<Omit<Omit<_base_ui_react_field.FieldLabelProps, "ref"> & react.RefAttributes<HTMLElement>, "ref">, "className"> & {
+    className?: string;
+} & {
+    /** Shows a required marker. It is hidden from screen readers, which hear `aria-required` on the control instead. */
+    required?: boolean;
+} & react.RefAttributes<HTMLElement>>;
+/** Help text for the control, read out after its label through `aria-describedby`. */
+declare const FieldDescription: react.ForwardRefExoticComponent<Omit<Omit<Omit<_base_ui_react_field.FieldDescriptionProps, "ref"> & react.RefAttributes<HTMLParagraphElement>, "ref">, "className"> & {
+    className?: string;
+} & react.RefAttributes<HTMLParagraphElement>>;
+/**
+ * The error message. With no `match` it shows the field's own validation messages (the `validate`
+ * prop or native constraints); pass `match` to show it whenever an outside library, such as
+ * React Hook Form, says the field is invalid.
+ */
+declare const FieldError: react.ForwardRefExoticComponent<Omit<Omit<Omit<_base_ui_react_field.FieldErrorProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
+    className?: string;
+} & react.RefAttributes<HTMLDivElement>>;
+interface FieldProps extends Classed<Omit<ComponentPropsWithoutRef<typeof Field$1.Root>, "children">> {
+    label?: ReactNode;
+    description?: ReactNode;
+    /**
+     * The error to show, for example `errors.email?.message` from React Hook Form. Any value
+     * other than `undefined`, `null`, `false` or `""` marks the field invalid.
+     */
+    error?: ReactNode;
+    /** Shows the required marker and sets `aria-required` on the control. */
+    required?: boolean;
+    /** One control: `Input`, `Textarea` or any Base UI control. */
+    children: ReactNode;
+}
+/**
+ * A labelled form control. Wraps one control and wires `id`, `aria-labelledby`,
+ * `aria-describedby`, `aria-invalid` and `aria-errormessage` for it. Errors appear in a polite
+ * live region, so screen readers announce them when they arrive. Use the parts (`FieldRoot`,
+ * `FieldLabel`, `FieldDescription`, `FieldError`) for layouts this one doesn't cover.
+ */
+declare const Field: react.ForwardRefExoticComponent<FieldProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Field, FieldDescription, FieldError, FieldLabel, type FieldLabelProps, type FieldProps, FieldRoot };

package/dist/field.js

@@ -0,0 +1,82 @@
+"use client";
+import {
+  Field
+} from "./chunk-ZJV2SYVH.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/field/field.tsx
+import {
+  Children,
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  useId
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FieldRoot = forwardRef(function FieldRoot2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(Field.Root, { ref, className: cn("flex flex-col gap-1.5", className), ...props });
+});
+var FieldLabel = forwardRef(function FieldLabel2({ className, required, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    Field.Label,
+    {
+      ref,
+      className: cn(
+        "text-sm font-medium leading-none text-foreground data-[disabled]:opacity-50",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        required ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ms-0.5 text-destructive", children: "*" }) : null
+      ]
+    }
+  );
+});
+var FieldDescription = forwardRef(function FieldDescription2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Field.Description,
+    {
+      ref,
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+});
+var FieldError = forwardRef(function FieldError2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Field.Error,
+    {
+      ref,
+      className: cn("text-sm font-medium text-destructive", className),
+      ...props
+    }
+  );
+});
+function hasError(error) {
+  return error !== void 0 && error !== null && error !== false && error !== "";
+}
+var Field2 = forwardRef(function Field3({ label, description, error, required, invalid, children, ...props }, ref) {
+  const errorId = useId();
+  const showError = hasError(error);
+  const only = Children.count(children) === 1 && isValidElement(children) ? children : null;
+  const control = only ? cloneElement(only, {
+    ...required ? { "aria-required": true } : {},
+    ...showError ? { "aria-errormessage": errorId } : {}
+  }) : children;
+  return /* @__PURE__ */ jsxs(FieldRoot, { ref, invalid: showError || invalid, ...props, children: [
+    label !== void 0 ? /* @__PURE__ */ jsx(FieldLabel, { required, children: label }) : null,
+    description !== void 0 ? /* @__PURE__ */ jsx(FieldDescription, { children: description }) : null,
+    control,
+    /* @__PURE__ */ jsx("div", { "aria-live": "polite", className: "empty:-mt-1.5", children: /* @__PURE__ */ jsx(FieldError, { id: errorId, ...showError ? { match: true, children: error } : {} }) })
+  ] });
+});
+export {
+  Field2 as Field,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+  FieldRoot
+};

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-export { a as Button, b as ButtonProps, c as buttonVariants } from './button-CYt2Zw3D.js';
-export { Input, InputProps } from './input.js';
+export { B as Button, a as ButtonProps, b as buttonVariants } from './button-D_1Tb_Km.js';
+export { I as Input, a as InputProps } from './input-BS0DXbuH.js';
 import * as react from 'react';
 import { SVGProps, HTMLAttributes, ReactNode, ElementType, ComponentPropsWithoutRef, Ref, ReactElement, ComponentType } from 'react';
 import { Signal } from '@azmr/core';

package/dist/index.js

@@ -18,7 +18,8 @@ import {
 import "./chunk-EE4V6XMB.js";
 import {
   Input
-} from "./chunk-GX2YEJ43.js";
+} from "./chunk-V6RHWYYO.js";
+import "./chunk-ZJV2SYVH.js";
 import {
   cn
 } from "./chunk-2TQSHVXA.js";

package/dist/input-BS0DXbuH.d.ts

@@ -0,0 +1,14 @@
+import * as react from 'react';
+import { InputProps as InputProps$1 } from '@base-ui/react/input';
+
+interface InputProps extends Omit<InputProps$1, "className"> {
+    className?: string;
+}
+/**
+ * A text input. `ref` is the real `<input>`, so `react-hook-form`'s `register()` works with
+ * no `Controller`. Height and horizontal padding follow the density tokens. Native `onChange`
+ * and the typed `onValueChange(value)` both fire.
+ */
+declare const Input: react.ForwardRefExoticComponent<Omit<InputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
+
+export { Input as I, type InputProps as a };

package/dist/input.d.ts

@@ -1,14 +1,20 @@
+export { I as Input, a as InputProps } from './input-BS0DXbuH.js';
 import * as react from 'react';
-import { InputProps as InputProps$1 } from '@base-ui/react/input';
+import { ComponentPropsWithoutRef } from 'react';
+import '@base-ui/react/input';
 
-interface InputProps extends Omit<InputProps$1, "className"> {
+interface TextareaProps extends Omit<ComponentPropsWithoutRef<"textarea">, "className" | "defaultValue"> {
     className?: string;
+    defaultValue?: string;
+    /** Grows with its content (CSS `field-sizing: content`) instead of scrolling. */
+    autoResize?: boolean;
+    /** Typed alternative to `onChange`; both fire. */
+    onValueChange?: (value: string) => void;
 }
 /**
- * A text input. `ref` is the real `<input>`, so `react-hook-form`'s `register()` works with
- * no `Controller`. Height and horizontal padding follow the density tokens. Native `onChange`
- * and the typed `onValueChange(value)` both fire.
+ * A multi-line text input. `ref` is the real `<textarea>`, so `react-hook-form`'s `register()`
+ * works with no `Controller`. Inside a `Field` it is labelled and described automatically.
  */
-declare const Input: react.ForwardRefExoticComponent<Omit<InputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
+declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
 
-export { Input, type InputProps };
+export { Textarea, type TextareaProps };

package/dist/input.js

@@ -1,8 +1,11 @@
 "use client";
 import {
-  Input
-} from "./chunk-GX2YEJ43.js";
+  Input,
+  Textarea
+} from "./chunk-V6RHWYYO.js";
+import "./chunk-ZJV2SYVH.js";
 import "./chunk-2TQSHVXA.js";
 export {
-  Input
+  Input,
+  Textarea
 };

package/dist/split-button.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
 import { ButtonProps } from '@base-ui/react/button';
-import { B as ButtonOwnProps } from './button-CYt2Zw3D.js';
+import { c as ButtonOwnProps } from './button-D_1Tb_Km.js';
 import 'class-variance-authority';
 import 'class-variance-authority/types';
 

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@azmr/ui",
-  "version": "0.4.0",
-  "description": "React UI components wired to reactive Signals — Grid, useSignal",
+  "version": "0.5.0",
+  "description": "Accessible React design system on Base UI and Tailwind v4 tokens — buttons, menus, modals, tables, toasts and more, with Signal-aware hooks",
   "type": "module",
   "license": "MIT",
   "author": "Alshafaraz Gazi <alshafaraz.gazi@gmail.com>",
-  "homepage": "https://docs.azmara.io",
+  "homepage": "https://platform.azmara.io/docs/packages/ui",
+  "bugs": {
+    "url": "https://github.com/azmara-labs/platform/issues"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/azmara-labs/platform.git",
@@ -18,7 +21,10 @@
     "reactive",
     "signals",
     "data-table",
-    "azmara"
+    "azmara",
+    "design-system",
+    "base-ui",
+    "tailwindcss"
   ],
   "engines": {
     "node": ">=18.0.0"
@@ -57,6 +63,10 @@
       "types": "./dist/input.d.ts",
       "import": "./dist/input.js"
     },
+    "./field": {
+      "types": "./dist/field.d.ts",
+      "import": "./dist/field.js"
+    },
     "./spinner": {
       "types": "./dist/spinner.d.ts",
       "import": "./dist/spinner.js"
@@ -202,13 +212,13 @@
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "react-hook-form": "^7.90.0",
-    "shadcn": "4.21.4",
+    "shadcn": "4.22.1",
     "size-limit": "^14.2.0",
     "tailwindcss": "^4.3.3",
     "tsup": "^8.5.1",
     "typescript": "^5.7.3",
     "vitest": "^4.1.11",
-    "@azmr/core": "0.1.0"
+    "@azmr/core": "0.1.1"
   },
   "publishConfig": {
     "access": "public"

package/dist/chunk-GX2YEJ43.js

@@ -1,36 +0,0 @@
-"use client";
-import {
-  cn
-} from "./chunk-2TQSHVXA.js";
-
-// src/components/input/input.tsx
-import { forwardRef } from "react";
-
-// src/primitives/input.ts
-import { Input } from "@base-ui/react/input";
-
-// src/components/input/input.tsx
-import { jsx } from "react/jsx-runtime";
-var Input2 = forwardRef(function Input3({ className, type = "text", ...props }, ref) {
-  return /* @__PURE__ */ jsx(
-    Input,
-    {
-      ref,
-      type,
-      className: cn(
-        "flex h-(--density-control-height) w-full min-w-0 rounded-md border border-input bg-background px-(--density-control-padding-x) py-1 text-sm text-foreground",
-        "transition-colors duration-(--motion-duration-fast) ease-standard",
-        "outline-none placeholder:text-muted-foreground",
-        "focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring",
-        "aria-invalid:border-destructive data-[invalid]:border-destructive",
-        "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 read-only:bg-muted",
-        className
-      ),
-      ...props
-    }
-  );
-});
-
-export {
-  Input2 as Input
-};