@pglevy/sailwind 0.1.0

package/dist/components/TableOfContents.js

@@ -0,0 +1,142 @@
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { useLocation as c } from "wouter";
+import { CardLayout as d } from "./Card/CardLayout.js";
+import { HeadingField as s } from "./Heading/HeadingField.js";
+import { RichTextDisplayField as l } from "./RichText/RichTextDisplayField.js";
+import { TextItem as r } from "./RichText/TextItem.js";
+import "react";
+import "lucide-react";
+const n = [
+  {
+    title: "Component Library",
+    items: [
+      {
+        title: "Components",
+        path: "/components",
+        description: "Interactive component demos and documentation"
+      }
+    ]
+  },
+  {
+    title: "Interface Patterns",
+    items: [
+      {
+        title: "Task Dashboard",
+        path: "/patterns/taskdashboard",
+        description: "Task management interface with status tracking"
+      },
+      {
+        title: "Application Status",
+        path: "/patterns/applicationstatus",
+        description: "Application review and approval workflow"
+      },
+      {
+        title: "Document Review",
+        path: "/patterns/documentreview",
+        description: "Document approval and feedback interface"
+      },
+      {
+        title: "User Profile",
+        path: "/patterns/userprofile",
+        description: "User information and settings management"
+      },
+      {
+        title: "Form Entry",
+        path: "/patterns/formentry",
+        description: "Data entry form with validation"
+      },
+      {
+        title: "Publications",
+        path: "/patterns/publications",
+        description: "List of items in a card with tags and filtering"
+      }
+    ]
+  },
+  {
+    title: "Pages",
+    items: [
+      {
+        title: "ESG Conference Registration",
+        path: "/esgconferenceregistration",
+        description: "Event registration with multiple steps"
+      },
+      {
+        title: "Insurance Quote Wizard",
+        path: "/insurancequotewizard",
+        description: "Multi-step insurance quote process"
+      }
+    ]
+  }
+], m = ({ item: e }) => {
+  const [, a] = c();
+  return /* @__PURE__ */ t("div", { className: "mb-4", children: /* @__PURE__ */ t(
+    l,
+    {
+      value: [
+        /* @__PURE__ */ t(
+          r,
+          {
+            text: e.title,
+            color: "ACCENT",
+            size: "MEDIUM",
+            link: () => a(e.path),
+            linkStyle: "STANDALONE"
+          },
+          "title"
+        ),
+        /* @__PURE__ */ t("br", {}),
+        /* @__PURE__ */ t(
+          r,
+          {
+            text: e.description,
+            color: "SECONDARY",
+            size: "STANDARD"
+          },
+          "desc"
+        )
+      ],
+      marginBelow: "EVEN_LESS"
+    }
+  ) });
+}, o = ({ group: e }) => /* @__PURE__ */ i("div", { children: [
+  /* @__PURE__ */ t(
+    s,
+    {
+      text: e.title,
+      size: "MEDIUM",
+      fontWeight: "SEMI_BOLD",
+      headingTag: "H2",
+      marginBelow: "STANDARD"
+    }
+  ),
+  /* @__PURE__ */ t("div", { className: "space-y-2", children: e.items.map((a, p) => /* @__PURE__ */ t(m, { item: a }, p)) })
+] }), T = () => /* @__PURE__ */ i("div", { className: "max-w-4xl mx-auto", children: [
+  /* @__PURE__ */ t(
+    s,
+    {
+      text: "Table of Contents",
+      size: "LARGE",
+      headingTag: "H2",
+      align: "CENTER",
+      marginBelow: "EVEN_LESS"
+    }
+  ),
+  /* @__PURE__ */ t(
+    l,
+    {
+      value: ["Explore the available components and example interfaces"],
+      align: "CENTER",
+      marginBelow: "MORE"
+    }
+  ),
+  /* @__PURE__ */ t(d, { padding: "MORE", marginBelow: "NONE", showBorder: !1, showShadow: !0, children: /* @__PURE__ */ i("div", { className: "grid gap-8 md:grid-cols-2", children: [
+    /* @__PURE__ */ i("div", { className: "space-y-8", children: [
+      /* @__PURE__ */ t(o, { group: n[0] }),
+      /* @__PURE__ */ t(o, { group: n[1] })
+    ] }),
+    /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(o, { group: n[2] }) })
+  ] }) })
+] });
+export {
+  T as TableOfContents
+};

package/dist/components/Tabs/TabsField.d.ts

@@ -0,0 +1,50 @@
+import { SAILMarginSize, SAILSize } from '../../types/sail';
+import * as React from 'react';
+/**
+ * Individual tab configuration
+ */
+export interface TabItem {
+    /** Unique identifier for the tab */
+    value: string;
+    /** Text to display on the tab trigger */
+    label: string;
+    /** Content to display when tab is active */
+    content: React.ReactNode;
+    /** Whether this tab is disabled */
+    disabled?: boolean;
+}
+/**
+ * Displays a set of layered sections of content (tab panels) that are displayed one at a time
+ * Inspired by SAIL form field patterns (not an official SAIL component)
+ *
+ * This is a "new SAIL" component - not available in public SAIL but follows
+ * the same conventions and patterns for consistency with other Sailwind components.
+ */
+export interface TabsFieldProps {
+    /** Array of tab configurations */
+    tabs: TabItem[];
+    /** Currently active tab value (controlled) */
+    value?: string;
+    /** Default active tab value (uncontrolled) */
+    defaultValue?: string;
+    /** Callback when active tab changes */
+    onValueChange?: (value: string) => void;
+    /** Orientation of the tabs */
+    orientation?: "HORIZONTAL" | "VERTICAL";
+    /** Size of the tab triggers */
+    size?: SAILSize;
+    /** Whether tabs should loop when navigating with keyboard */
+    loop?: boolean;
+    /** Determines whether component is displayed */
+    showWhen?: boolean;
+    /** Space added above component */
+    marginAbove?: SAILMarginSize;
+    /** Space added below component */
+    marginBelow?: SAILMarginSize;
+    /** Color scheme for active tabs (hex or semantic) */
+    color?: "ACCENT" | "POSITIVE" | "NEGATIVE" | "SECONDARY" | string;
+    /** Activation mode - whether tabs activate on focus or click */
+    activationMode?: "AUTOMATIC" | "MANUAL";
+}
+export declare const TabsField: React.FC<TabsFieldProps>;
+//# sourceMappingURL=TabsField.d.ts.map

package/dist/components/Tabs/TabsField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsField.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabsField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEhE;;GAEG;AACH,MAAM,WAAW,OAAO;IACtB,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAA;IACb,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAA;IACb,4CAA4C;IAC5C,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;GAMG;AACH,MAAM,WAAW,cAAc;IAC7B,kCAAkC;IAClC,IAAI,EAAE,OAAO,EAAE,CAAA;IACf,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,8CAA8C;IAC9C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,uCAAuC;IACvC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,8BAA8B;IAC9B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,+BAA+B;IAC/B,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,6DAA6D;IAC7D,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kCAAkC;IAClC,WAAW,CAAC,EAAE,cAAc,CAAA;IAC5B,kCAAkC;IAClC,WAAW,CAAC,EAAE,cAAc,CAAA;IAC5B,qDAAqD;IACrD,KAAK,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,WAAW,GAAG,MAAM,CAAA;IACjE,gEAAgE;IAChE,cAAc,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAA;CACxC;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAyH9C,CAAA"}

package/dist/components/Tabs/TabsField.js

@@ -0,0 +1,96 @@
+import { jsx as s, jsxs as h } from "react/jsx-runtime";
+import "react";
+import * as a from "@radix-ui/react-tabs";
+const L = ({
+  tabs: l,
+  value: o,
+  defaultValue: r,
+  onValueChange: n,
+  orientation: t = "HORIZONTAL",
+  size: c = "STANDARD",
+  loop: d = !0,
+  showWhen: u = !0,
+  marginAbove: m = "NONE",
+  marginBelow: x = "STANDARD",
+  color: i = "ACCENT",
+  activationMode: p = "AUTOMATIC"
+}) => {
+  if (!u) return null;
+  const E = {
+    NONE: "",
+    EVEN_LESS: "mt-1",
+    LESS: "mt-2",
+    STANDARD: "mt-4",
+    MORE: "mt-6",
+    EVEN_MORE: "mt-8"
+  }, v = {
+    NONE: "",
+    EVEN_LESS: "mb-1",
+    LESS: "mb-2",
+    STANDARD: "mb-4",
+    MORE: "mb-6",
+    EVEN_MORE: "mb-8"
+  }, N = {
+    SMALL: "px-3 py-1.5 text-sm",
+    STANDARD: "px-4 py-2.5 text-base",
+    MEDIUM: "px-6 py-3 text-lg",
+    LARGE: "px-8 py-4 text-xl"
+  }, b = [
+    E[m],
+    v[x]
+  ].filter(Boolean).join(" "), f = t === "VERTICAL" ? "flex flex-col" : "flex border-b border-gray-200", A = t === "VERTICAL" ? "pl-4 flex-1 p-4" : "p-4", _ = t === "VERTICAL" ? "flex" : "block";
+  return /* @__PURE__ */ s("div", { className: b, children: /* @__PURE__ */ h(
+    a.Root,
+    {
+      value: o,
+      defaultValue: r || l[0]?.value,
+      onValueChange: n,
+      orientation: t.toLowerCase(),
+      activationMode: p.toLowerCase(),
+      className: _,
+      children: [
+        /* @__PURE__ */ s(
+          a.List,
+          {
+            className: f,
+            loop: d,
+            children: l.map((e) => /* @__PURE__ */ s(
+              a.Trigger,
+              {
+                value: e.value,
+                disabled: e.disabled,
+                className: [
+                  N[c],
+                  "flex-1 bg-white text-gray-700 border-0 cursor-default select-none",
+                  "items-center justify-center outline-none transition-colors hover:text-blue-500",
+                  // Active state with underline shadow for horizontal, left border for vertical
+                  t === "HORIZONTAL" ? "data-[state=active]:text-blue-500 data-[state=active]:shadow-[inset_0_-2px_0_0] data-[state=active]:shadow-current" : "data-[state=active]:text-blue-500 data-[state=active]:shadow-[inset_2px_0_0_0] data-[state=active]:shadow-current",
+                  "disabled:opacity-50 disabled:cursor-not-allowed",
+                  "focus-visible:relative focus-visible:shadow-[0_0_0_2px] focus-visible:shadow-blue-500"
+                ].filter(Boolean).join(" "),
+                style: i.startsWith("#") && o === e.value ? { color: i } : void 0,
+                children: e.label
+              },
+              e.value
+            ))
+          }
+        ),
+        l.map((e) => /* @__PURE__ */ s(
+          a.Content,
+          {
+            value: e.value,
+            className: [
+              A,
+              "outline-none focus-visible:shadow-[0_0_0_2px] focus-visible:shadow-blue-500"
+            ].filter(Boolean).join(" "),
+            children: e.content
+          },
+          e.value
+        ))
+      ]
+    }
+  ) });
+};
+export {
+  L as TabsField
+};

package/dist/components/Tabs/index.d.ts

@@ -0,0 +1,3 @@
+export { TabsField } from './TabsField';
+export type { TabsFieldProps, TabItem } from './TabsField';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,YAAY,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA"}

package/dist/components/Tag/TagField.d.ts

@@ -0,0 +1,52 @@
+import { TagItemProps } from './TagItem';
+import { SAILSize, SAILAlign, SAILLabelPosition, SAILMarginSize } from '../../types/sail';
+import * as React from 'react';
+/**
+ * Tag size - only SMALL and STANDARD are supported per SAIL docs
+ */
+type TagSize = Extract<SAILSize, "SMALL" | "STANDARD">;
+/**
+ * Props for the TagField component
+ * Maps to SAIL's a!tagField() function
+ */
+export interface TagFieldProps {
+    /** Array of tag items to display */
+    tags: TagItemProps[];
+    /** Text to display as the field label */
+    label?: string;
+    /** Position of the label relative to the tags */
+    labelPosition?: SAILLabelPosition;
+    /** Supplemental text about this field */
+    instructions?: string;
+    /** Help icon tooltip text */
+    helpTooltip?: string;
+    /** Determines alignment of tags */
+    align?: SAILAlign;
+    /** Additional text for screen readers */
+    accessibilityText?: string;
+    /** Size of the tags */
+    size?: TagSize;
+    /** Controls field visibility */
+    showWhen?: boolean;
+    /** Space added above the layout */
+    marginAbove?: SAILMarginSize;
+    /** Space added below the layout */
+    marginBelow?: SAILMarginSize;
+    /** Additional Tailwind classes for prototype-specific styling (not part of SAIL API) */
+    className?: string;
+}
+/**
+ * TagField Component
+ * Displays a list of short text labels with colored backgrounds
+ *
+ * @example
+ * <TagField
+ *   size="STANDARD"
+ *   tags={[
+ *     { text: "URGENT", backgroundColor: "#FED7DE", textColor: "#9F0019" }
+ *   ]}
+ * />
+ */
+export declare const TagField: React.FC<TagFieldProps>;
+export {};
+//# sourceMappingURL=TagField.d.ts.map

package/dist/components/Tag/TagField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagField.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/TagField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAC7C,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAqB,MAAM,kBAAkB,CAAA;AAIjH;;GAEG;AACH,KAAK,OAAO,GAAG,OAAO,CAAC,QAAQ,EAAE,OAAO,GAAG,UAAU,CAAC,CAAA;AAEtD;;;GAGG;AACH,MAAM,WAAW,aAAa;IAC5B,oCAAoC;IACpC,IAAI,EAAE,YAAY,EAAE,CAAA;IACpB,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iDAAiD;IACjD,aAAa,CAAC,EAAE,iBAAiB,CAAA;IACjC,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,mCAAmC;IACnC,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,uBAAuB;IACvB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mCAAmC;IACnC,WAAW,CAAC,EAAE,cAAc,CAAA;IAC5B,mCAAmC;IACnC,WAAW,CAAC,EAAE,cAAc,CAAA;IAC5B,wFAAwF;IACxF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA8I5C,CAAA"}

package/dist/components/Tag/TagField.js

@@ -0,0 +1,125 @@
+import { jsxs as V, jsx as t } from "react/jsx-runtime";
+import * as I from "react";
+import { FieldLabel as w } from "../shared/FieldLabel.js";
+import { mergeClasses as L } from "../../utils/classNames.js";
+const W = ({
+  tags: l,
+  label: n,
+  labelPosition: i = "ABOVE",
+  instructions: a,
+  helpTooltip: c,
+  align: m = "START",
+  accessibilityText: o,
+  size: E = "STANDARD",
+  showWhen: N = !0,
+  marginAbove: p = "NONE",
+  marginBelow: A = "STANDARD",
+  className: b
+}) => {
+  if (!N) return null;
+  const r = l.filter((e) => e.showWhen !== !1 && e.text), d = {
+    SMALL: "text-xs px-2 py-1",
+    // SAIL SMALL: 12px text, 8px horizontal padding, 4px vertical
+    STANDARD: "text-base px-4 py-1"
+    // SAIL STANDARD: 16px text, 16px horizontal padding, 4px vertical
+  }, C = {
+    START: "justify-start",
+    CENTER: "justify-center",
+    END: "justify-end"
+  }, x = {
+    NONE: "mt-0",
+    // SAIL NONE: 0
+    EVEN_LESS: "mt-1",
+    // SAIL EVEN_LESS: 4px
+    LESS: "mt-2",
+    // SAIL LESS: 8px
+    STANDARD: "mt-4",
+    // SAIL STANDARD: 16px
+    MORE: "mt-6",
+    // SAIL MORE: 24px
+    EVEN_MORE: "mt-8"
+    // SAIL EVEN_MORE: 32px
+  }, S = {
+    NONE: "mb-0",
+    // SAIL NONE: 0
+    EVEN_LESS: "mb-1",
+    // SAIL EVEN_LESS: 4px
+    LESS: "mb-2",
+    // SAIL LESS: 8px
+    STANDARD: "mb-4",
+    // SAIL STANDARD: 16px
+    MORE: "mb-6",
+    // SAIL MORE: 24px
+    EVEN_MORE: "mb-8"
+    // SAIL EVEN_MORE: 32px
+  }, u = {
+    ACCENT: "bg-blue-100",
+    POSITIVE: "bg-green-100",
+    NEGATIVE: "bg-red-100",
+    SECONDARY: "bg-gray-200",
+    STANDARD: "bg-gray-100"
+  }, T = {
+    ACCENT: "text-blue-700",
+    POSITIVE: "text-green-700",
+    NEGATIVE: "text-red-700",
+    SECONDARY: "text-gray-700",
+    STANDARD: "text-gray-900"
+  }, f = (e, h) => {
+    const g = e.backgroundColor?.startsWith("#") ? "" : u[e.backgroundColor || "ACCENT"], O = e.textColor?.startsWith("#") ? "" : T[e.textColor || "STANDARD"], M = {
+      ...e.backgroundColor?.startsWith("#") && { backgroundColor: e.backgroundColor },
+      ...e.textColor?.startsWith("#") && { color: e.textColor }
+    }, k = e.link ? "a" : "span", y = e.link ? { href: e.link } : {};
+    return /* @__PURE__ */ t(
+      k,
+      {
+        ...y,
+        className: `
+          inline-block font-semibold max-w-full
+          whitespace-nowrap overflow-hidden text-ellipsis
+          rounded-sm
+          ${d[E]}
+          ${g}
+          ${O}
+          ${e.link ? "hover:underline cursor-pointer" : "cursor-default"}
+        `.replace(/\s+/g, " ").trim(),
+        style: M,
+        title: e.tooltip,
+        "aria-label": e.tooltip,
+        children: e.text
+      },
+      h
+    );
+  }, s = I.useId(), D = `${x[p]} ${S[A]}`, R = L(D, b);
+  return /* @__PURE__ */ V(
+    "div",
+    {
+      className: R,
+      "aria-label": o,
+      children: [
+        /* @__PURE__ */ t(
+          w,
+          {
+            label: n,
+            labelPosition: i,
+            instructions: a,
+            helpTooltip: c,
+            htmlFor: s,
+            accessibilityText: o
+          }
+        ),
+        r.length > 0 && /* @__PURE__ */ t(
+          "div",
+          {
+            id: s,
+            className: `flex flex-wrap gap-2 ${C[m]}`,
+            role: "list",
+            children: r.map(f)
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  W as TagField
+};

package/dist/components/Tag/TagItem.d.ts

@@ -0,0 +1,26 @@
+import { SAILSemanticColor } from '../../types/sail';
+/**
+ * Props for individual tag items
+ * Maps to SAIL's a!tagItem() function
+ */
+export interface TagItemProps {
+    /** Text to display within the tag (max 40 characters in SAIL) */
+    text: string;
+    /** Background color - hex value or semantic color name */
+    backgroundColor?: string | SAILSemanticColor;
+    /** Text color - hex value or "STANDARD" */
+    textColor?: string | "STANDARD";
+    /** Tooltip text to display on hover */
+    tooltip?: string;
+    /** Controls tag visibility */
+    showWhen?: boolean;
+    /** Link to apply to the tag (href string for React implementation) */
+    link?: string;
+}
+/**
+ * TagItem component
+ * This is a data structure component - it doesn't render independently.
+ * TagItems must be used within a TagField component.
+ */
+export declare const TagItem: (_props: TagItemProps) => null;
+//# sourceMappingURL=TagItem.d.ts.map

package/dist/components/Tag/TagItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagItem.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/TagItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEzD;;;GAGG;AACH,MAAM,WAAW,YAAY;IAC3B,iEAAiE;IACjE,IAAI,EAAE,MAAM,CAAA;IACZ,0DAA0D;IAC1D,eAAe,CAAC,EAAE,MAAM,GAAG,iBAAiB,CAAA;IAC5C,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,GAAG,UAAU,CAAA;IAC/B,uCAAuC;IACvC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sEAAsE;IACtE,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED;;;;GAIG;AACH,eAAO,MAAM,OAAO,GAAI,QAAQ,YAAY,KAAG,IAI9C,CAAA"}

package/dist/components/Tag/TagItem.js

@@ -0,0 +1,4 @@
+const t = (r) => null;
+export {
+  t as TagItem
+};

package/dist/components/Tag/index.d.ts

@@ -0,0 +1,5 @@
+export { TagField } from './TagField';
+export { TagItem } from './TagItem';
+export type { TagFieldProps } from './TagField';
+export type { TagItemProps } from './TagItem';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Tag/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAC/C,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA"}

package/dist/components/TextField/TextField.d.ts

@@ -0,0 +1,88 @@
+import { SAILLabelPosition, SAILMarginSize } from '../../types/sail';
+import * as React from 'react';
+/**
+ * Text alignment options for the input field
+ */
+type TextAlign = "LEFT" | "CENTER" | "RIGHT";
+/**
+ * Input purpose for autocomplete hints (accessibility)
+ */
+type InputPurpose = "NAME" | "EMAIL" | "PHONE_NUMBER" | "STREET_ADDRESS" | "POSTAL_CODE" | "COUNTRY" | "CREDIT_CARD_NUMBER" | "FIRST_NAME" | "LAST_NAME" | "DOB" | "OFF";
+/**
+ * Refresh timing for when the interface updates with saved value
+ */
+type RefreshAfter = "KEYPRESS" | "UNFOCUS";
+/**
+ * Props for the TextField component
+ * Based on SAIL a!textField() parameters
+ */
+export interface TextFieldProps {
+    /** Text to display as the field label */
+    label?: string;
+    /** Supplemental text about this field */
+    instructions?: string;
+    /** Determines if a value is required to submit the form */
+    required?: boolean;
+    /** Determines if the field should display as not editable */
+    readOnly?: boolean;
+    /** Determines if the field should display as potentially editable but grayed out */
+    disabled?: boolean;
+    /** Text to display in the text field */
+    value?: string;
+    /** Validation errors to display below the field when the value is not null */
+    validations?: string[];
+    /** Callback when the user changes the text */
+    saveInto?: (value: string) => void;
+    /** Callback when the user changes the text (React-style alias for saveInto) */
+    onChange?: (value: string) => void;
+    /** Determines when the interface is refreshed with the saved value */
+    refreshAfter?: RefreshAfter;
+    /** When present, the requiredness of the field is only evaluated when a button in the same validation group is pressed */
+    validationGroup?: string;
+    /** Custom message to display when the field's value is required and not provided */
+    requiredMessage?: string;
+    /** Determines alignment of the text value */
+    align?: TextAlign;
+    /** Determines where the label appears */
+    labelPosition?: SAILLabelPosition;
+    /** Text to display in the field when it is empty */
+    placeholder?: string;
+    /** Displays a help icon with the specified text as a tooltip */
+    helpTooltip?: string;
+    /** Determines if the value is obscured from view (password field) */
+    masked?: boolean;
+    /** Additional text to be announced by screen readers */
+    accessibilityText?: string;
+    /** Determines whether the component is displayed on the interface */
+    showWhen?: boolean;
+    /** Indicates the intent of input for accessibility improvements */
+    inputPurpose?: InputPurpose;
+    /** Determines the maximum number of characters */
+    characterLimit?: number;
+    /** Determines if the character count displays on the text field */
+    showCharacterCount?: boolean;
+    /** Determines how much space is added above the component */
+    marginAbove?: SAILMarginSize;
+    /** Determines how much space is added below the component */
+    marginBelow?: SAILMarginSize;
+}
+/**
+ * TextField - Single line text input component
+ *
+ * Displays and allows entry of a single line of text.
+ * Maps to SAIL a!textField() function.
+ *
+ * @example
+ * ```tsx
+ * <TextField
+ *   label="Email Address"
+ *   placeholder="user@example.com"
+ *   value={email}
+ *   saveInto={(value) => setEmail(value)}
+ *   required
+ * />
+ * ```
+ */
+export declare const TextField: React.FC<TextFieldProps>;
+export {};
+//# sourceMappingURL=TextField.d.ts.map

package/dist/components/TextField/TextField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEzE;;GAEG;AACH,KAAK,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;AAE5C;;GAEG;AACH,KAAK,YAAY,GACb,MAAM,GACN,OAAO,GACP,cAAc,GACd,gBAAgB,GAChB,aAAa,GACb,SAAS,GACT,oBAAoB,GACpB,YAAY,GACZ,WAAW,GACX,KAAK,GACL,KAAK,CAAA;AAET;;GAEG;AACH,KAAK,YAAY,GAAG,UAAU,GAAG,SAAS,CAAA;AAE1C;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC7B,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,8EAA8E;IAC9E,WAAW,CAAC,EAAE,MAAM,EAAE,CAAA;IACtB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,sEAAsE;IACtE,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,0HAA0H;IAC1H,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,oFAAoF;IACpF,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,yCAAyC;IACzC,aAAa,CAAC,EAAE,iBAAiB,CAAA;IACjC,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qEAAqE;IACrE,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,wDAAwD;IACxD,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mEAAmE;IACnE,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,kDAAkD;IAClD,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,mEAAmE;IACnE,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,6DAA6D;IAC7D,WAAW,CAAC,EAAE,cAAc,CAAA;IAC5B,6DAA6D;IAC7D,WAAW,CAAC,EAAE,cAAc,CAAA;CAC7B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAiK9C,CAAA"}