@rojaostudio/ds 1.0.1 → 2.0.0-next.0

package/dist/components/textarea.js

@@ -1,95 +1,75 @@
 "use client";
 import {
   __objRest,
+  __spreadProps,
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
-import { forwardRef, useId, useEffect, useRef } from "react";
-const Textarea = forwardRef(function Textarea2(_a, ref) {
+import { jsx, jsxs } from "react/jsx-runtime";
+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__ */ React.createElement("div", { className: "flex flex-col gap-1.5 w-full" }, label && /* @__PURE__ */ React.createElement("label", { htmlFor: textareaId, className: "inline-flex items-center gap-1 text-label font-medium text-fg-primary" }, /* @__PURE__ */ React.createElement("span", null, label), required && /* @__PURE__ */ React.createElement("span", { className: "text-danger", "aria-label": "obrigat\xF3rio" }, "*"), optional && !required && /* @__PURE__ */ React.createElement("span", { className: "text-fg-muted font-normal" }, "(opcional)")), /* @__PURE__ */ React.createElement(
-    "textarea",
-    __spreadValues({
-      ref: setRef,
-      id: textareaId,
-      rows: rows != null ? rows : minRows,
-      value,
-      defaultValue,
-      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,
-      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__ */ React.createElement("div", { className: "flex items-start justify-between gap-3" }, error ? /* @__PURE__ */ React.createElement("p", { id: `${textareaId}-error`, className: "text-caption text-danger-text flex-1" }, error) : helper ? /* @__PURE__ */ React.createElement("p", { id: `${textareaId}-helper`, className: "text-caption text-fg-muted flex-1" }, helper) : /* @__PURE__ */ React.createElement("span", { className: "flex-1" }), showCount && maxLength && /* @__PURE__ */ React.createElement("span", { className: "text-caption text-fg-muted tabular-nums shrink-0" }, currentLength, "/", maxLength)));
-});
+      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 };