@cloudraker/reki 2.6.1

package/dist/chunks/input-i5nefqk213n4z7pr.js

@@ -0,0 +1,130 @@
+"use client";
+import { jsx as d } from "react/jsx-runtime";
+import { c as m } from "./cn-ct4n7r74mh8y0f48.js";
+import { r as f } from "./resolve-variant-t8jcltsizeg29ege.js";
+import { forwardRef as E } from "react";
+import { F as w, n as N } from "./field-fe5m8z3vbpvtctbe.js";
+import { I as y } from "./vendor-base-ui-bgl9g5nkvqy3tn36.js";
+const g = {
+  size: {
+    xs: {
+      classes: "h-5 gap-1 rounded-sm px-1.5 text-xs",
+      description: "Extra small input for compact UIs"
+    },
+    sm: {
+      classes: "h-6.5 gap-1 rounded-md px-2 text-xs",
+      description: "Small input for secondary fields"
+    },
+    base: {
+      classes: "h-9 gap-1.5 rounded-lg px-3 text-base",
+      description: "Default input size"
+    },
+    lg: {
+      classes: "h-10 gap-2 rounded-lg px-4 text-base",
+      description: "Large input for prominent fields"
+    }
+  },
+  variant: {
+    default: {
+      classes: "focus:ring-reki-focus/50 focus:ring-[1.5px]",
+      description: "Default input appearance"
+    },
+    error: {
+      classes: "!ring-reki-danger focus:ring-reki-danger/50 focus:ring-[1.5px]",
+      description: "Error state for validation failures"
+    }
+  }
+}, a = {
+  size: "base",
+  variant: "default"
+};
+function z({
+  variant: r = a.variant,
+  size: i = a.size,
+  parentFocusIndicator: s = !1,
+  focusIndicator: n = !1
+} = {}) {
+  return m(
+    // Base styles
+    "border-0 bg-reki-control text-reki-default ring ring-reki-line outline-none focus:outline-none",
+    // Disabled state and placeholder styles (using vanilla CSS class for Chrome compatibility)
+    "reki-input-placeholder disabled:text-reki-disabled",
+    // Apply size styles from REKI_INPUT_VARIANTS
+    f(
+      g.size,
+      i,
+      a.size
+    ).classes,
+    // Apply variant styles from REKI_INPUT_VARIANTS
+    f(
+      g.variant,
+      r,
+      a.variant
+    ).classes,
+    // Focus state handling
+    s && (r === "error" ? "focus-within:ring-reki-danger/50 focus-within:ring-[1.5px]" : "focus-within:ring-reki-focus/50 focus-within:ring-[1.5px]"),
+    n && (r === "error" ? "focus:ring-reki-danger/50 focus:ring-[1.5px]" : "focus:ring-reki-focus/50 focus:ring-[1.5px]")
+  );
+}
+const R = E((r, i) => {
+  const {
+    className: s,
+    size: n = "base",
+    variant: l,
+    label: o,
+    labelTooltip: b,
+    description: p,
+    error: t,
+    passwordManagerIgnore: c = !1,
+    ...e
+  } = r;
+  process.env.NODE_ENV !== "production" && l === "error" && console.warn(
+    '[Reki Input]: variant="error" is deprecated. Error styling is now automatically applied when the `error` prop is truthy. Simply remove the variant prop and pass an error message instead.'
+  );
+  const x = l ?? (t ? "error" : "default"), { required: h } = e;
+  if (process.env.NODE_ENV !== "production") {
+    const I = !!o, k = !!e["aria-label"], v = !!e["aria-labelledby"];
+    !I && !k && !v && console.warn(
+      `[Reki Input]: Input must have an accessible name. Provide either:
+  - label prop: <Input label='Email' />
+  - aria-label: <Input aria-label='Email address' />
+  - aria-labelledby for custom label association`
+    );
+  }
+  const u = /* @__PURE__ */ d(
+    y,
+    {
+      ref: i,
+      className: m(
+        z({ size: n, variant: x, focusIndicator: !0 }),
+        c && "keeper-ignore",
+        s
+      ),
+      ...c ? {
+        "data-1p-ignore": "true",
+        "data-bwignore": "true",
+        "data-form-type": "other",
+        "data-lpignore": "true"
+      } : {},
+      ...e
+    }
+  );
+  return o || t || p ? /* @__PURE__ */ d(
+    w,
+    {
+      label: o,
+      required: h,
+      labelTooltip: b,
+      description: p,
+      error: N(t),
+      children: u
+    }
+  ) : u;
+});
+R.displayName = "Input";
+export {
+  R as I,
+  g as R,
+  z as i
+};
+//# sourceMappingURL=input-i5nefqk213n4z7pr.js.map

package/dist/chunks/input-i5nefqk213n4z7pr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-i5nefqk213n4z7pr.js","sources":["../../src/components/input/input.tsx"],"sourcesContent":["import { cn } from \"../../utils/cn\";\nimport { resolveVariant } from \"../../utils/resolve-variant\";\nimport {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from \"react\";\nimport { Input as BaseInput } from \"@base-ui/react/input\";\nimport { Field, normalizeFieldError, type FieldErrorMatch } from \"../field/field\";\n\n/** Input size and variant definitions mapping names to their Tailwind classes. */\nexport const REKI_INPUT_VARIANTS = {\n  size: {\n    xs: {\n      classes: \"h-5 gap-1 rounded-sm px-1.5 text-xs\",\n      description: \"Extra small input for compact UIs\",\n    },\n    sm: {\n      classes: \"h-6.5 gap-1 rounded-md px-2 text-xs\",\n      description: \"Small input for secondary fields\",\n    },\n    base: {\n      classes: \"h-9 gap-1.5 rounded-lg px-3 text-base\",\n      description: \"Default input size\",\n    },\n    lg: {\n      classes: \"h-10 gap-2 rounded-lg px-4 text-base\",\n      description: \"Large input for prominent fields\",\n    },\n  },\n  variant: {\n    default: {\n      classes: \"focus:ring-reki-focus/50 focus:ring-[1.5px]\",\n      description: \"Default input appearance\",\n    },\n    error: {\n      classes: \"!ring-reki-danger focus:ring-reki-danger/50 focus:ring-[1.5px]\",\n      description: \"Error state for validation failures\",\n    },\n  },\n} as const;\n\nexport const REKI_INPUT_DEFAULT_VARIANTS = {\n  size: \"base\",\n  variant: \"default\",\n} as const;\n\nexport const REKI_INPUT_STYLING = {\n  dimensions: {\n    xs: { height: 20, paddingX: 6, fontSize: 12, borderRadius: 2, width: 160 },\n    sm: { height: 26, paddingX: 8, fontSize: 12, borderRadius: 6, width: 200 },\n    base: {\n      height: 36,\n      paddingX: 12,\n      fontSize: 16,\n      borderRadius: 8,\n      width: 280,\n    },\n    lg: { height: 40, paddingX: 16, fontSize: 16, borderRadius: 8, width: 320 },\n  },\n  baseTokens: {\n    background: \"color-secondary\",\n    text: \"text-color-surface\",\n    placeholder: \"text-color-muted\",\n    ring: \"color-border\",\n  },\n  stateTokens: {\n    focus: { ring: \"color-active\" },\n    error: { ring: \"color-error\" },\n    disabled: { opacity: 0.5, text: \"text-color-muted\" },\n  },\n} as const;\n\n// Derived types from REKI_INPUT_VARIANTS\nexport type RekiInputSize = keyof typeof REKI_INPUT_VARIANTS.size;\nexport type RekiInputVariant = keyof typeof REKI_INPUT_VARIANTS.variant;\n\nexport interface RekiInputVariantsProps {\n  /**\n   * Input size.\n   * - `\"xs\"` — Extra small for compact UIs\n   * - `\"sm\"` — Small for secondary fields\n   * - `\"base\"` — Default size\n   * - `\"lg\"` — Large for prominent fields\n   * @default \"base\"\n   */\n  size?: RekiInputSize;\n  /**\n   * Visual variant.\n   * - `\"default\"` — Standard input\n   * - `\"error\"` — Error state for validation failures\n   * @default \"default\"\n   */\n  variant?: RekiInputVariant;\n  parentFocusIndicator?: boolean;\n  focusIndicator?: boolean;\n}\n\n// Omit native `size` attribute (number) to avoid conflict with our custom `size` variant\ntype BaseInputProps = Omit<ComponentPropsWithoutRef<typeof BaseInput>, \"size\">;\n\nexport function inputVariants({\n  variant = REKI_INPUT_DEFAULT_VARIANTS.variant,\n  size = REKI_INPUT_DEFAULT_VARIANTS.size,\n  parentFocusIndicator = false,\n  focusIndicator = false,\n}: RekiInputVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"border-0 bg-reki-control text-reki-default ring ring-reki-line outline-none focus:outline-none\",\n    // Disabled state and placeholder styles (using vanilla CSS class for Chrome compatibility)\n    \"reki-input-placeholder disabled:text-reki-disabled\",\n    // Apply size styles from REKI_INPUT_VARIANTS\n    resolveVariant(\n      REKI_INPUT_VARIANTS.size,\n      size,\n      REKI_INPUT_DEFAULT_VARIANTS.size,\n    ).classes,\n    // Apply variant styles from REKI_INPUT_VARIANTS\n    resolveVariant(\n      REKI_INPUT_VARIANTS.variant,\n      variant,\n      REKI_INPUT_DEFAULT_VARIANTS.variant,\n    ).classes,\n    // Focus state handling\n    parentFocusIndicator &&\n      (variant === \"error\"\n        ? \"focus-within:ring-reki-danger/50 focus-within:ring-[1.5px]\"\n        : \"focus-within:ring-reki-focus/50 focus-within:ring-[1.5px]\"),\n    focusIndicator &&\n      (variant === \"error\"\n        ? \"focus:ring-reki-danger/50 focus:ring-[1.5px]\"\n        : \"focus:ring-reki-focus/50 focus:ring-[1.5px]\"),\n  );\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {\n  const {\n    className,\n    size = \"base\",\n    variant: variantProp,\n    label,\n    labelTooltip,\n    description,\n    error,\n    passwordManagerIgnore = false,\n    ...inputProps\n  } = props;\n\n  // Deprecation warning for variant=\"error\"\n  if (process.env.NODE_ENV !== \"production\" && variantProp === \"error\") {\n    console.warn(\n      '[Reki Input]: variant=\"error\" is deprecated. ' +\n        \"Error styling is now automatically applied when the `error` prop is truthy. \" +\n        \"Simply remove the variant prop and pass an error message instead.\",\n    );\n  }\n\n  // Auto-apply error styling when error prop is truthy\n  // Explicit variant prop takes precedence for backwards compatibility\n  const variant = variantProp ?? (error ? \"error\" : \"default\");\n\n  // Extract required from inputProps to pass to Field for label decoration\n  const { required } = inputProps;\n\n  // A11y enforcement: warn in dev if no accessible name provided\n  if (process.env.NODE_ENV !== \"production\") {\n    const hasLabel = Boolean(label);\n    const hasAriaLabel = Boolean(inputProps[\"aria-label\"]);\n    const hasAriaLabelledBy = Boolean(inputProps[\"aria-labelledby\"]);\n\n    if (!hasLabel && !hasAriaLabel && !hasAriaLabelledBy) {\n      console.warn(\n        \"[Reki Input]: Input must have an accessible name. Provide either:\\n\" +\n          \"  - label prop: <Input label='Email' />\\n\" +\n          \"  - aria-label: <Input aria-label='Email address' />\\n\" +\n          \"  - aria-labelledby for custom label association\",\n      );\n    }\n  }\n\n  const input = (\n    <BaseInput\n      ref={ref}\n      className={cn(\n        inputVariants({ size, variant, focusIndicator: true }),\n        passwordManagerIgnore && \"keeper-ignore\",\n        className,\n      )}\n      {...(passwordManagerIgnore\n        ? {\n            \"data-1p-ignore\": \"true\",\n            \"data-bwignore\": \"true\",\n            \"data-form-type\": \"other\",\n            \"data-lpignore\": \"true\",\n          }\n        : {})}\n      {...inputProps}\n    />\n  );\n\n  // Render with Field wrapper if label, error, or description is provided\n  if (label || error || description) {\n    return (\n      <Field\n        label={label}\n        required={required}\n        labelTooltip={labelTooltip}\n        description={description}\n        error={normalizeFieldError(error)}\n      >\n        {input}\n      </Field>\n    );\n  }\n\n  // Render bare input without Field wrapper\n  return input;\n});\n\nInput.displayName = \"Input\";\n\n/**\n * Input component props with accessibility guidance.\n *\n * **Accessible Name Required:** Input should have one of:\n * 1. `label` prop (recommended) - enables Field wrapper with label/description/error\n * 2. `placeholder` + `aria-label` - for bare inputs with visual placeholder\n * 3. `aria-labelledby` - for custom label association\n *\n * Missing accessible names will trigger console warnings in development.\n *\n * @example\n * // Recommended: Built-in Field wrapper\n * <Input label=\"Email\" placeholder=\"you@example.com\" />\n *\n * @example\n * // Bare input with placeholder and aria-label\n * <Input placeholder=\"Search...\" aria-label=\"Search products\" />\n *\n * @example\n * // Custom label association\n * <label id=\"email-label\">Email</label>\n * <Input aria-labelledby=\"email-label\" />\n *\n * @example\n * // With description and error\n * <Input\n *   label=\"Password\"\n *   description=\"Must be at least 8 characters\"\n *   error=\"Password is too short\"\n * />\n */\nexport type InputProps = Pick<RekiInputVariantsProps, \"size\" | \"variant\"> &\n  BaseInputProps & {\n    /** Label content for the input (enables Field wrapper) - can be a string or any React node */\n    label?: ReactNode;\n    /** Tooltip content to display next to the label via an info icon */\n    labelTooltip?: ReactNode;\n    /** Helper text displayed below the input */\n    description?: ReactNode;\n    /** Error message or validation error object */\n    error?: string | { message: ReactNode; match: FieldErrorMatch };\n    /** Suppress browser extension password manager overlays on non-credential inputs. */\n    passwordManagerIgnore?: boolean;\n  };\n"],"names":["REKI_INPUT_VARIANTS","REKI_INPUT_DEFAULT_VARIANTS","inputVariants","variant","size","parentFocusIndicator","focusIndicator","cn","resolveVariant","Input","forwardRef","props","ref","className","variantProp","label","labelTooltip","description","error","passwordManagerIgnore","inputProps","required","hasLabel","hasAriaLabel","hasAriaLabelledBy","input","jsx","BaseInput","Field","normalizeFieldError"],"mappings":";;;;;;;AAWO,MAAMA,IAAsB;AAAA,EACjC,MAAM;AAAA,IACJ,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAAA,EAEF,SAAS;AAAA,IACP,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA8B;AAAA,EACzC,MAAM;AAAA,EACN,SAAS;AACX;AAwDO,SAASC,EAAc;AAAA,EAC5B,SAAAC,IAAUF,EAA4B;AAAA,EACtC,MAAAG,IAAOH,EAA4B;AAAA,EACnC,sBAAAI,IAAuB;AAAA,EACvB,gBAAAC,IAAiB;AACnB,IAA4B,IAAI;AAC9B,SAAOC;AAAA;AAAA,IAEL;AAAA;AAAA,IAEA;AAAA;AAAA,IAEAC;AAAA,MACER,EAAoB;AAAA,MACpBI;AAAA,MACAH,EAA4B;AAAA,IAAA,EAC5B;AAAA;AAAA,IAEFO;AAAA,MACER,EAAoB;AAAA,MACpBG;AAAA,MACAF,EAA4B;AAAA,IAAA,EAC5B;AAAA;AAAA,IAEFI,MACGF,MAAY,UACT,+DACA;AAAA,IACNG,MACGH,MAAY,UACT,iDACA;AAAA,EAAA;AAEV;AAEO,MAAMM,IAAQC,EAAyC,CAACC,GAAOC,MAAQ;AAC5E,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,MAAAT,IAAO;AAAA,IACP,SAASU;AAAA,IACT,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,uBAAAC,IAAwB;AAAA,IACxB,GAAGC;AAAA,EAAA,IACDT;AAGJ,EAAI,QAAQ,IAAI,aAAa,gBAAgBG,MAAgB,WAC3D,QAAQ;AAAA,IACN;AAAA,EAAA;AAQJ,QAAMX,IAAUW,MAAgBI,IAAQ,UAAU,YAG5C,EAAE,UAAAG,MAAaD;AAGrB,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,UAAME,IAAW,EAAQP,GACnBQ,IAAe,EAAQH,EAAW,YAAY,GAC9CI,IAAoB,EAAQJ,EAAW,iBAAiB;AAE9D,IAAI,CAACE,KAAY,CAACC,KAAgB,CAACC,KACjC,QAAQ;AAAA,MACN;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EAMN;AAEA,QAAMC,IACJ,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAf;AAAA,MACA,WAAWL;AAAA,QACTL,EAAc,EAAE,MAAAE,GAAM,SAAAD,GAAS,gBAAgB,IAAM;AAAA,QACrDgB,KAAyB;AAAA,QACzBN;AAAA,MAAA;AAAA,MAED,GAAIM,IACD;AAAA,QACE,kBAAkB;AAAA,QAClB,iBAAiB;AAAA,QACjB,kBAAkB;AAAA,QAClB,iBAAiB;AAAA,MAAA,IAEnB,CAAA;AAAA,MACH,GAAGC;AAAA,IAAA;AAAA,EAAA;AAKR,SAAIL,KAASG,KAASD,IAElB,gBAAAS;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,OAAAb;AAAA,MACA,UAAAM;AAAA,MACA,cAAAL;AAAA,MACA,aAAAC;AAAA,MACA,OAAOY,EAAoBX,CAAK;AAAA,MAE/B,UAAAO;AAAA,IAAA;AAAA,EAAA,IAMAA;AACT,CAAC;AAEDhB,EAAM,cAAc;"}