@pibit.ai/cure-design-system 0.6.7 → 0.6.9

package/dist/primitives/textarea/textarea.d.ts

@@ -0,0 +1,56 @@
+import { ReactNode, Ref } from 'react';
+import { TextAreaProps as AriaTextAreaProps, TextFieldProps as AriaTextFieldProps } from 'react-aria-components';
+export interface TextAreaBaseProps extends AriaTextAreaProps {
+    ref?: Ref<HTMLTextAreaElement>;
+    /**
+     * TextArea size.
+     * @default "sm"
+     */
+    size?: "sm" | "md" | "lg";
+}
+/** The bare `<textarea>`, for use inside your own React Aria `TextField`. */
+export declare const TextAreaBase: {
+    ({ className, style, size, ...props }: TextAreaBaseProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export interface TextAreaProps extends AriaTextFieldProps {
+    /** Label text for the textarea. */
+    label?: string;
+    /** Helper text below the textarea. Shown as the error message when `isInvalid`. */
+    hint?: ReactNode;
+    /** Tooltip shown after the label. */
+    tooltip?: string;
+    /** Class name for the `<textarea>` itself (`className` styles the field wrapper). */
+    textAreaClassName?: TextAreaBaseProps["className"];
+    /** Ref for the field wrapper. */
+    ref?: Ref<HTMLDivElement>;
+    /** Ref for the `<textarea>`, e.g. to measure it for auto-grow. */
+    textAreaRef?: TextAreaBaseProps["ref"];
+    /** Hide the required asterisk on the label. */
+    hideRequiredIndicator?: boolean;
+    /** Placeholder text. */
+    placeholder?: string;
+    /** Visible height in rows. */
+    rows?: number;
+    /** Visible width in columns. */
+    cols?: number;
+    /**
+     * TextArea size.
+     * @default "sm"
+     */
+    size?: TextAreaBaseProps["size"];
+}
+/**
+ * A multi-line text field built on React Aria `TextField` + `TextArea`, with the
+ * same label and hint as `Input`. Validation goes through `isInvalid` + `hint`;
+ * a character count is the caller's to render.
+ *
+ * @example
+ * <TextArea label="Description" rows={4} value={value} onChange={setValue} />
+ * <TextArea label="Reason" isRequired isInvalid hint="Required" />
+ */
+export declare const TextArea: {
+    ({ label, hint, tooltip, textAreaRef, hideRequiredIndicator, textAreaClassName, placeholder, className, rows, cols, size, ...props }: TextAreaProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=textarea.d.ts.map

package/dist/primitives/textarea/textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/primitives/textarea/textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,KAAK,EACV,aAAa,IAAI,iBAAiB,EAClC,cAAc,IAAI,kBAAkB,EACrC,MAAM,uBAAuB,CAAC;AA+C/B,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB;IAC1D,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;IAC/B;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAED,6EAA6E;AAC7E,eAAO,MAAM,YAAY;2CAKtB,iBAAiB;;CAkCnB,CAAC;AAIF,MAAM,WAAW,aAAc,SAAQ,kBAAkB;IACvD,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mFAAmF;IACnF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qFAAqF;IACrF,iBAAiB,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;IACnD,iCAAiC;IACjC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,kEAAkE;IAClE,WAAW,CAAC,EAAE,iBAAiB,CAAC,KAAK,CAAC,CAAC;IACvC,+CAA+C;IAC/C,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC;CAClC;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ;0IAalB,aAAa;;CAsCf,CAAC"}

package/dist/primitives/textarea/textarea.js

@@ -0,0 +1,107 @@
+import { jsx as i, jsxs as h, Fragment as y } from "react/jsx-runtime";
+import { TextField as w, TextArea as k } from "react-aria-components";
+import { cx as x } from "../../utils/cn.js";
+import { HintText as z } from "../input/hint-text.js";
+import { Label as T } from "../input/label.js";
+const n = (r) => `url(data:image/svg+xml;base64,${btoa(
+  `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 2L2 10" stroke="${r}" stroke-linecap="round"/><path d="M11 7L7 11" stroke="${r}" stroke-linecap="round"/></svg>`
+)})`, A = {
+  "--resize-handle-bg": n("#D5D7DA"),
+  "--resize-handle-bg-dark": n("#373A41")
+}, v = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-md"
+}, D = {
+  sm: "text-xs",
+  md: "text-xs",
+  lg: "text-sm"
+}, B = {
+  sm: "p-[7px]",
+  md: "py-2 px-3",
+  lg: "py-3 px-3.5"
+}, m = ({
+  className: r,
+  style: t,
+  size: s = "sm",
+  ...o
+}) => /* @__PURE__ */ i(
+  k,
+  {
+    ...o,
+    style: (e) => ({
+      ...A,
+      ...typeof t == "function" ? t(e) : t
+    }),
+    className: (e) => x(
+      "w-full scroll-py-3 rounded-lg bg-primary border border-secondary transition duration-100 ease-linear placeholder:text-placeholder_subtle autofill:rounded-lg autofill:text-primary focus:outline-hidden text-primary",
+      v[s],
+      B[s],
+      // Resize handle
+      "[&::-webkit-resizer]:bg-(image:--resize-handle-bg) [&::-webkit-resizer]:bg-contain dark:[&::-webkit-resizer]:bg-(image:--resize-handle-bg-dark)",
+      e.isFocused && !e.isDisabled && "border-brand",
+      e.isDisabled && "cursor-not-allowed bg-disabled_subtle text-disabled border-disabled",
+      // Frozen to platform-ui on purpose: an unfocused invalid textarea keeps its
+      // normal border, and the error shows in the hint text. The red ring only
+      // appears on focus. Unlike `Input`, there is no `border-error`. platform-ui
+      // callers that want a red border at rest (the inline-edit cells) pass
+      // `ring-2 ring-error` through `textAreaClassName`. Bringing this in line
+      // with `Input` is a visible change, so it is left for a design decision.
+      e.isInvalid && "ring-error_subtle",
+      e.isInvalid && e.isFocused && "ring-2 ring-error",
+      typeof r == "function" ? r(e) : r
+    )
+  }
+);
+m.displayName = "TextAreaBase";
+const F = ({
+  label: r,
+  hint: t,
+  tooltip: s,
+  textAreaRef: o,
+  hideRequiredIndicator: e,
+  textAreaClassName: g,
+  placeholder: p,
+  className: l,
+  rows: b,
+  cols: c,
+  size: d = "sm",
+  ...u
+}) => /* @__PURE__ */ i(
+  w,
+  {
+    ...u,
+    className: (a) => x(
+      "group flex h-max w-full flex-col items-start justify-start gap-1.5",
+      typeof l == "function" ? l(a) : l
+    ),
+    children: ({ isInvalid: a, isRequired: f }) => /* @__PURE__ */ h(y, { children: [
+      r && /* @__PURE__ */ i(
+        T,
+        {
+          className: D[d],
+          isRequired: f && !e,
+          tooltip: s,
+          children: r
+        }
+      ),
+      /* @__PURE__ */ i(
+        m,
+        {
+          placeholder: p,
+          className: g,
+          ref: o,
+          rows: b,
+          cols: c,
+          size: d
+        }
+      ),
+      t && /* @__PURE__ */ i(z, { isInvalid: a, children: t })
+    ] })
+  }
+);
+F.displayName = "TextArea";
+export {
+  F as TextArea,
+  m as TextAreaBase
+};