@rojaostudio/ds 1.0.2 → 2.0.0-next.0

package/dist/components/textarea.d.ts

@@ -1,21 +1,16 @@
 import * as react from 'react';
-import { TextareaHTMLAttributes } from 'react';
+import { ComponentPropsWithRef } from 'react';
+import { FieldTextProps } from './internal/field.js';
 
-interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
-    label?: string;
-    helper?: string;
-    error?: string;
-    required?: boolean;
-    optional?: boolean;
-    /** Auto-cresce conforme conteúdo (sem scroll bar interna). default = false. */
-    autoResize?: boolean;
-    /** Conta caracteres (mostra "X/Y" se maxLength definido). */
-    showCount?: boolean;
-    /** Min rows quando autoResize. default = 3. */
-    minRows?: number;
-    /** Max rows quando autoResize (cap pra evitar crescer infinito). default = 10. */
-    maxRows?: number;
+interface TextareaProps extends FieldTextProps, Omit<ComponentPropsWithRef<'textarea'>, 'children'> {
+    /** Visible lines at first (3 to 5 fits most). Never under 2. The person can make it taller. */
+    rows?: number;
 }
-declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
+/**
+ * Textarea — Figma [RDS] Forms/Textarea. A multi-line text field with its own label, hint and error; same
+ * model and spacing as the Input. The text is the native value (Figma: `content`). Styles: textarea.css
+ * and internal/field.css.
+ */
+declare function Textarea({ label, labelPosition, hint, error, errorMessage, required, id, disabled, rows, className, style, ...textarea }: TextareaProps): react.JSX.Element;
 
 export { Textarea, type TextareaProps };

package/dist/components/textarea.js

@@ -1,111 +1,75 @@
 "use client";
 import {
   __objRest,
+  __spreadProps,
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useId, useEffect, useRef } from "react";
-const Textarea = forwardRef(function Textarea2(_a, ref) {
+import { FieldShell, hasContent, useFieldIds, warnIfUnlabelled } from "./internal/field.js";
+function Textarea(_a) {
   var _b = _a, {
     label,
-    helper,
+    labelPosition,
+    hint,
     error,
+    errorMessage,
     required,
-    optional,
-    autoResize = false,
-    showCount,
-    minRows = 3,
-    maxRows = 10,
-    className = "",
     id,
-    rows,
-    value,
-    defaultValue,
-    maxLength,
-    onChange
-  } = _b, props = __objRest(_b, [
+    disabled,
+    rows = 3,
+    className,
+    style
+  } = _b, textarea = __objRest(_b, [
     "label",
-    "helper",
+    "labelPosition",
+    "hint",
     "error",
+    "errorMessage",
     "required",
-    "optional",
-    "autoResize",
-    "showCount",
-    "minRows",
-    "maxRows",
-    "className",
     "id",
+    "disabled",
     "rows",
-    "value",
-    "defaultValue",
-    "maxLength",
-    "onChange"
+    "className",
+    "style"
   ]);
-  const generatedId = useId();
-  const textareaId = id != null ? id : generatedId;
-  const internalRef = useRef(null);
-  function setRef(el) {
-    internalRef.current = el;
-    if (typeof ref === "function") ref(el);
-    else if (ref) ref.current = el;
-  }
-  function adjust() {
-    const el = internalRef.current;
-    if (!el || !autoResize) return;
-    el.style.height = "auto";
-    const lineHeight = parseFloat(getComputedStyle(el).lineHeight || "20");
-    const maxH = lineHeight * maxRows + 24;
-    el.style.height = `${Math.min(el.scrollHeight, maxH)}px`;
-    el.style.overflowY = el.scrollHeight > maxH ? "auto" : "hidden";
-  }
-  useEffect(() => {
-    adjust();
-  }, [value, autoResize]);
-  function handleChange(e) {
-    onChange == null ? void 0 : onChange(e);
-    if (autoResize) adjust();
-  }
-  const currentLength = typeof value === "string" ? value.length : typeof defaultValue === "string" ? defaultValue.length : 0;
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 w-full", children: [
-    label && /* @__PURE__ */ jsxs("label", { htmlFor: textareaId, className: "inline-flex items-center gap-1 text-label font-medium text-fg-primary", children: [
-      /* @__PURE__ */ jsx("span", { children: label }),
-      required && /* @__PURE__ */ jsx("span", { className: "text-danger", "aria-label": "obrigat\xF3rio", children: "*" }),
-      optional && !required && /* @__PURE__ */ jsx("span", { className: "text-fg-muted font-normal", children: "(opcional)" })
-    ] }),
-    /* @__PURE__ */ jsx(
-      "textarea",
-      __spreadValues({
-        ref: setRef,
-        id: textareaId,
-        rows: rows != null ? rows : minRows,
-        value,
-        defaultValue,
-        maxLength,
-        required,
-        onChange: handleChange,
-        className: [
-          "w-full px-3 py-2 rounded-(--radius-control) text-label",
-          "bg-surface-default text-fg-primary placeholder:text-fg-placeholder",
-          "border transition-colors outline-none",
-          autoResize ? "resize-none overflow-hidden" : "resize-y",
-          error ? "border-danger focus:border-danger focus:ring-2 focus:ring-danger/20" : "border-stroke-control focus:border-stroke-focus focus:ring-2 focus:ring-stroke-focus/20",
-          "disabled:opacity-50 disabled:cursor-not-allowed disabled:resize-none",
-          className
-        ].filter(Boolean).join(" "),
-        "aria-invalid": error ? true : void 0,
-        "aria-describedby": error ? `${textareaId}-error` : helper ? `${textareaId}-helper` : void 0
-      }, props)
-    ),
-    (error || helper || showCount && maxLength) && /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
-      error ? /* @__PURE__ */ jsx("p", { id: `${textareaId}-error`, className: "text-caption text-danger-text flex-1", children: error }) : helper ? /* @__PURE__ */ jsx("p", { id: `${textareaId}-helper`, className: "text-caption text-fg-muted flex-1", children: helper }) : /* @__PURE__ */ jsx("span", { className: "flex-1" }),
-      showCount && maxLength && /* @__PURE__ */ jsxs("span", { className: "text-caption text-fg-muted tabular-nums shrink-0", children: [
-        currentLength,
-        "/",
-        maxLength
-      ] })
-    ] })
-  ] });
-});
+  warnIfUnlabelled("Textarea", label, textarea["aria-label"], textarea["aria-labelledby"]);
+  const { controlId, hintId, errorId, invalid, describedBy } = useFieldIds(id, hint, error, errorMessage);
+  const floating = labelPosition === "floating" && hasContent(label);
+  return /* @__PURE__ */ jsxs(
+    FieldShell,
+    {
+      kind: "rds-textarea",
+      controlId,
+      hintId,
+      errorId,
+      label,
+      labelPosition,
+      hint,
+      errorMessage,
+      invalid,
+      required,
+      disabled,
+      className,
+      style,
+      children: [
+        /* @__PURE__ */ jsx(
+          "textarea",
+          __spreadProps(__spreadValues({}, textarea), {
+            id: controlId,
+            className: "rds-field__control rds-textarea__control",
+            rows: Math.max(2, rows),
+            required,
+            disabled,
+            "aria-invalid": invalid || void 0,
+            "aria-describedby": [describedBy, textarea["aria-describedby"]].filter(Boolean).join(" ") || void 0,
+            placeholder: floating ? " " : textarea.placeholder
+          })
+        ),
+        /* @__PURE__ */ jsx("svg", { className: "rds-textarea__grip", viewBox: "0 0 16 16", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("path", { d: "M13 6 6 13M13 10l-3 3" }) })
+      ]
+    }
+  );
+}
 export {
   Textarea
 };

package/dist/components/tile.d.ts

@@ -0,0 +1,24 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+type TileTone = 'action' | 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+/** Figma calls this property `style`; here it is `variant` because `style` belongs to React. */
+type TileVariant = 'fill' | 'soft';
+type TileSize = 'sm' | 'default' | 'lg';
+interface TileProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** The icon (Figma: `icon`), an inline SVG. The Tile sizes it: 16, 24 or 32. */
+    icon: ReactNode;
+    /** action is the brand; the others follow feedback: success only for what went right, danger for what went wrong. */
+    tone?: TileTone;
+    /** fill is strong; soft is light, with the icon in the tone's colour (Figma: `style`). Same variant across a list. */
+    variant?: TileVariant;
+    /** sm 32, default 48, lg 64. */
+    size?: TileSize;
+}
+/**
+ * Tile — Figma [RDS] Content/Tile. An icon with weight, in a circle: a benefit in a list, a card's header, the top
+ * of an empty state. Decorative (aria-hidden): the text beside it says what it is. Not clickable. Styles: tile.css.
+ */
+declare function Tile({ icon, tone, variant, size, className, ...rest }: TileProps): react.JSX.Element;
+
+export { Tile, type TileProps, type TileSize, type TileTone, type TileVariant };

package/dist/components/tile.js

@@ -0,0 +1,21 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx } from "react/jsx-runtime";
+function Tile(_a) {
+  var _b = _a, { icon, tone = "action", variant = "fill", size = "default", className } = _b, rest = __objRest(_b, ["icon", "tone", "variant", "size", "className"]);
+  return /* @__PURE__ */ jsx(
+    "span",
+    __spreadProps(__spreadValues({
+      "aria-hidden": "true"
+    }, rest), {
+      className: ["rds-tile", `rds-tile--${tone}-${variant}`, `rds-tile--${size}`, className].filter(Boolean).join(" "),
+      children: icon
+    })
+  );
+}
+export {
+  Tile
+};

package/dist/components/time-picker.d.ts

@@ -1,34 +1,49 @@
 import * as react from 'react';
+import { CSSProperties } from 'react';
+import { FieldTextProps } from './internal/field.js';
 
-/**
- * TimePicker — input de hora (HH:mm) com popover de seletor.
- *
- * Uso:
- *   <TimePicker value="09:30" onChange={setTime} />
- *   <TimePicker value={null} onChange={setTime} step={15} />     // múltiplos de 15min
- *   <TimePicker value="14:00" onChange={setTime} format="12h" />
- *
- * Valor é string "HH:mm" (24h) ou null. Lib calling code converte se precisar Date.
- * Confirma via botão "OK". ESC e clique fora descartam o rascunho.
- */
-interface TimePickerProps {
-    value: string | null;
-    onChange: (time: string | null) => void;
-    /** Step de minutos. default = 1. Use 5/15/30 pra agendamentos. */
+type TimeFormat = '24h' | '12h';
+interface TimePickerProps extends FieldTextProps {
+    /** Controlled: the time, "HH:mm" in 24 h, or null for none (Figma: the Input's `text`). */
+    value?: string | null;
+    /** Uncontrolled: the time at first. */
+    defaultValue?: string | null;
+    /** Called with "HH:mm" (24 h) when a valid time is typed or chosen, and with null when the field is emptied. */
+    onChange?: (time: string | null) => void;
+    /** The list's step, in minutes: 5, 15 or 30 as the schedule asks. Typing takes any minute. */
     step?: number;
-    /** Formato exibido. default = '24h'. */
-    format?: '24h' | '12h';
-    placeholder?: string;
-    size?: 'sm' | 'md';
-    width?: 'full' | 'hug';
-    disabled?: boolean;
-    /** Hora mínima permitida ("HH:mm"). */
+    /** "HH:mm" (24 h): the earliest time, in the list and when typing. */
     min?: string;
-    /** Hora máxima permitida ("HH:mm"). */
+    /** "HH:mm" (24 h): the latest time, in the list and when typing. */
     max?: string;
+    /** How the time shows: 24h (default) or 12h ("02:30 PM"). The value is always 24 h. */
+    format?: TimeFormat;
+    /** What shows in the empty field. */
+    placeholder?: string;
+    /** The message when the typed time does not exist or is out of min and max. */
+    invalidMessage?: string;
+    /** The form field name: a hidden input carries "HH:mm". */
+    name?: string;
+    disabled?: boolean;
+    id?: string;
     className?: string;
+    style?: CSSProperties;
+    /** The name when there is no visible label. */
     'aria-label'?: string;
+    'aria-labelledby'?: string;
 }
-declare const TimePicker: react.ForwardRefExoticComponent<TimePickerProps & react.RefAttributes<HTMLButtonElement>>;
+/** "9:30", "09:30", "0930", "2:30 pm" → "HH:mm" (24 h), or null. */
+declare function parseTime(text: string): string | null;
+/** "HH:mm" as it shows: the same in 24 h, "02:30 PM" in 12 h. */
+declare function formatTime(time: string, format?: TimeFormat): string;
+/**
+ * TimePicker — Figma [RDS] Forms/TimePicker. A time field that takes typing (HH:mm, the colon comes by itself) and
+ * opens the list of times in the chosen step (Figma: menu=open). It is the Input with the clock at the end and the
+ * Listbox under it (ARIA combobox), as the DatePicker is the Input with the Calendar: the focus stays in the field,
+ * the arrows walk the list, Enter chooses and Escape closes without changing. No tokens of its own (--input-*,
+ * --listbox-*). A date is the DatePicker; a duration, the NumberInput. Styles: time-picker.css,
+ * internal/field.css and internal/listbox.css.
+ */
+declare function TimePicker({ label, labelPosition, hint, error, errorMessage, required, value, defaultValue, onChange, step, min, max, format, placeholder, invalidMessage, name, disabled, id, className, style, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, }: TimePickerProps): react.JSX.Element;
 
-export { TimePicker, type TimePickerProps };
+export { type TimeFormat, TimePicker, type TimePickerProps, formatTime, parseTime };