@carbonbits/sixr 1.1.0 → 1.3.0

package/dist/text-input.js

@@ -0,0 +1,196 @@
+"use client";
+"use client";
+
+// src/components/text-input/index.tsx
+import {
+  useCallback,
+  useId,
+  useState
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FIELD_CLASSES = "h-10 w-full rounded-field border bg-surface px-3 font-[inherit] text-field text-fg outline-none placeholder:text-fg-subtle disabled:cursor-not-allowed disabled:opacity-45";
+var VALID_CLASSES = "border-line focus:border-accent focus:ring-3 focus:ring-accent-soft";
+var INVALID_CLASSES = "border-danger focus:border-danger focus:ring-3 focus:ring-danger-soft";
+var FALLBACK_MESSAGE = "Invalid value";
+function runSchema(schema, value) {
+  if (!schema) {
+    return { valid: true };
+  }
+  const result = schema.safeParse(value);
+  if (result.success) {
+    return { valid: true };
+  }
+  return {
+    valid: false,
+    error: result.error.issues[0]?.message ?? FALLBACK_MESSAGE
+  };
+}
+function fieldClassName(invalid, mono, hasTrailing, className) {
+  return [
+    FIELD_CLASSES,
+    invalid ? INVALID_CLASSES : VALID_CLASSES,
+    mono ? "font-code" : "",
+    hasTrailing ? "pr-16" : "",
+    className ?? ""
+  ].filter(Boolean).join(" ");
+}
+function FieldLabel({
+  htmlFor,
+  label,
+  optional,
+  action
+}) {
+  if (!label) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      htmlFor,
+      className: "mb-1.5 flex items-center text-label font-semibold text-fg-muted",
+      children: [
+        label,
+        optional ? /* @__PURE__ */ jsx("span", { className: "ml-auto text-hint font-semibold text-fg-subtle", children: "Optional" }) : null,
+        action ? /* @__PURE__ */ jsx("span", { className: "ml-auto", children: action }) : null
+      ]
+    }
+  );
+}
+function FieldMessage({
+  id,
+  error,
+  hint
+}) {
+  if (error) {
+    return /* @__PURE__ */ jsx("p", { id, role: "alert", className: "mt-1.5 text-hint text-danger", children: error });
+  }
+  if (hint) {
+    return /* @__PURE__ */ jsx("p", { id, className: "mt-1.5 text-hint text-fg-subtle", children: hint });
+  }
+  return null;
+}
+function useFieldBehaviour({
+  value,
+  defaultValue,
+  error,
+  onChange,
+  onBlur,
+  schema,
+  validateOn = "blur",
+  onValidationChange
+}) {
+  const [uncontrolledValue, setUncontrolledValue] = useState(
+    defaultValue ?? ""
+  );
+  const [schemaError, setSchemaError] = useState(void 0);
+  const isControlled = value !== void 0;
+  const validate = useCallback(
+    (next) => {
+      const state = runSchema(schema, next);
+      setSchemaError(state.error);
+      onValidationChange?.(state);
+    },
+    [schema, onValidationChange]
+  );
+  const handleChange = useCallback(
+    (event) => {
+      const next = event.target.value;
+      if (!isControlled) {
+        setUncontrolledValue(next);
+      }
+      onChange?.(next);
+      if (validateOn === "change" || validateOn === "blur" && schemaError) {
+        validate(next);
+      }
+    },
+    [isControlled, onChange, validateOn, schemaError, validate]
+  );
+  const handleBlur = useCallback(
+    (event) => {
+      if (validateOn === "blur") {
+        validate(event.target.value);
+      }
+      onBlur?.(event);
+    },
+    [validateOn, validate, onBlur]
+  );
+  return {
+    currentValue: isControlled ? value : uncontrolledValue,
+    // A caller-supplied error outranks the schema's verdict.
+    shownError: error ?? schemaError,
+    handleChange,
+    handleBlur
+  };
+}
+function TextInput({
+  label,
+  hint,
+  error,
+  optional = false,
+  action,
+  trailing,
+  mono = false,
+  type = "text",
+  value,
+  defaultValue,
+  onChange,
+  schema,
+  validateOn = "blur",
+  onValidationChange,
+  id,
+  className,
+  onBlur,
+  ...rest
+}) {
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
+  const describedById = `${inputId}-description`;
+  const { currentValue, shownError, handleChange, handleBlur } = useFieldBehaviour({
+    value,
+    defaultValue,
+    error,
+    onChange,
+    onBlur,
+    schema,
+    validateOn,
+    onValidationChange
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsx(
+      FieldLabel,
+      {
+        htmlFor: inputId,
+        label,
+        optional,
+        action
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: trailing ? "relative" : void 0, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ...rest,
+          id: inputId,
+          type,
+          value: currentValue,
+          "aria-invalid": shownError ? true : void 0,
+          "aria-describedby": shownError || hint ? describedById : void 0,
+          onChange: handleChange,
+          onBlur: handleBlur,
+          className: fieldClassName(
+            Boolean(shownError),
+            mono,
+            Boolean(trailing),
+            className
+          )
+        }
+      ),
+      trailing ? /* @__PURE__ */ jsx("span", { className: "absolute top-1/2 right-[9px] -translate-y-1/2 text-hint font-semibold text-fg-subtle", children: trailing }) : null
+    ] }),
+    /* @__PURE__ */ jsx(FieldMessage, { id: describedById, error: shownError, hint })
+  ] });
+}
+export {
+  TextInput
+};
+//# sourceMappingURL=text-input.js.map

package/dist/text-input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/text-input/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ChangeEvent,\n  type FocusEvent,\n  type InputHTMLAttributes,\n  type ReactNode,\n  useCallback,\n  useId,\n  useState,\n} from \"react\";\n\n/**\n * Structural shape of a zod schema — every zod schema satisfies it, and any\n * version of zod does. Declaring it this way rather than importing `ZodType`\n * keeps zod out of this module's public types, so consumers who only want an\n * input do not have to install zod to typecheck it.\n */\nexport type TextInputSchema = {\n  safeParse: (\n    value: unknown,\n  ) =>\n    | { success: true }\n    | { success: false; error: { issues: readonly { message: string }[] } };\n};\n\n/** Outcome of a single validation pass, handed to `onValidationChange`. */\nexport type TextInputValidation = {\n  valid: boolean;\n  /** First issue reported by the schema, or `undefined` when valid. */\n  error?: string;\n};\n\nexport type TextInputProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"onChange\" | \"value\" | \"defaultValue\" | \"type\"\n> & {\n  label?: string;\n  /** Guidance under the field. Replaced by the error message while invalid. */\n  hint?: ReactNode;\n  /**\n   * Error supplied by the caller — a server-side or cross-field failure. Takes\n   * precedence over the schema, so a form can hold a field invalid regardless\n   * of what `schema` makes of the value on its own.\n   */\n  error?: string;\n  /** Renders the design's muted \"Optional\" marker at the end of the label. */\n  optional?: boolean;\n  /** Trailing label slot, for affordances like the design's \"Forgot?\" link. */\n  action?: ReactNode;\n  /** Trailing in-field slot, for affordances like the design's password peek. */\n  trailing?: ReactNode;\n  /** Renders the value in the design's monospace face. */\n  mono?: boolean;\n  type?: \"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\";\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  /**\n   * Any zod schema that accepts a string. Only `safeParse` is used, so a\n   * refined, transformed or preprocessed schema works as well as a plain one.\n   */\n  schema?: TextInputSchema;\n  /**\n   * When the schema runs. `blur` — the default — avoids scolding someone\n   * mid-keystroke; once a field has gone invalid it revalidates on every\n   * keystroke so the message clears as soon as it is fixed.\n   */\n  validateOn?: \"blur\" | \"change\" | \"never\";\n  onValidationChange?: (state: TextInputValidation) => void;\n};\n\nconst FIELD_CLASSES =\n  \"h-10 w-full rounded-field border bg-surface px-3 font-[inherit] text-field text-fg outline-none placeholder:text-fg-subtle disabled:cursor-not-allowed disabled:opacity-45\";\nconst VALID_CLASSES =\n  \"border-line focus:border-accent focus:ring-3 focus:ring-accent-soft\";\nconst INVALID_CLASSES =\n  \"border-danger focus:border-danger focus:ring-3 focus:ring-danger-soft\";\nconst FALLBACK_MESSAGE = \"Invalid value\";\n\nfunction runSchema(\n  schema: TextInputSchema | undefined,\n  value: string,\n): TextInputValidation {\n  if (!schema) {\n    return { valid: true };\n  }\n\n  const result = schema.safeParse(value);\n  if (result.success) {\n    return { valid: true };\n  }\n\n  return {\n    valid: false,\n    error: result.error.issues[0]?.message ?? FALLBACK_MESSAGE,\n  };\n}\n\nfunction fieldClassName(\n  invalid: boolean,\n  mono: boolean,\n  hasTrailing: boolean,\n  className: string | undefined,\n): string {\n  return [\n    FIELD_CLASSES,\n    invalid ? INVALID_CLASSES : VALID_CLASSES,\n    mono ? \"font-code\" : \"\",\n    hasTrailing ? \"pr-16\" : \"\",\n    className ?? \"\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n}\n\nfunction FieldLabel({\n  htmlFor,\n  label,\n  optional,\n  action,\n}: {\n  htmlFor: string;\n  label: string | undefined;\n  optional: boolean;\n  action: ReactNode;\n}) {\n  if (!label) {\n    return null;\n  }\n\n  return (\n    <label\n      htmlFor={htmlFor}\n      className=\"mb-1.5 flex items-center text-label font-semibold text-fg-muted\"\n    >\n      {label}\n      {optional ? (\n        <span className=\"ml-auto text-hint font-semibold text-fg-subtle\">\n          Optional\n        </span>\n      ) : null}\n      {action ? <span className=\"ml-auto\">{action}</span> : null}\n    </label>\n  );\n}\n\nfunction FieldMessage({\n  id,\n  error,\n  hint,\n}: {\n  id: string;\n  error: string | undefined;\n  hint: ReactNode;\n}) {\n  if (error) {\n    return (\n      <p id={id} role=\"alert\" className=\"mt-1.5 text-hint text-danger\">\n        {error}\n      </p>\n    );\n  }\n\n  if (hint) {\n    return (\n      <p id={id} className=\"mt-1.5 text-hint text-fg-subtle\">\n        {hint}\n      </p>\n    );\n  }\n\n  return null;\n}\n\ntype FieldBehaviour = Pick<\n  TextInputProps,\n  | \"value\"\n  | \"defaultValue\"\n  | \"error\"\n  | \"onChange\"\n  | \"onBlur\"\n  | \"schema\"\n  | \"validateOn\"\n  | \"onValidationChange\"\n>;\n\n/**\n * Owns the value (controlled or not), the schema verdict, and when to re-run\n * it. Split out so the component itself stays markup.\n */\nfunction useFieldBehaviour({\n  value,\n  defaultValue,\n  error,\n  onChange,\n  onBlur,\n  schema,\n  validateOn = \"blur\",\n  onValidationChange,\n}: FieldBehaviour) {\n  const [uncontrolledValue, setUncontrolledValue] = useState(\n    defaultValue ?? \"\",\n  );\n  const [schemaError, setSchemaError] = useState<string | undefined>(undefined);\n\n  const isControlled = value !== undefined;\n\n  const validate = useCallback(\n    (next: string) => {\n      const state = runSchema(schema, next);\n      setSchemaError(state.error);\n      onValidationChange?.(state);\n    },\n    [schema, onValidationChange],\n  );\n\n  const handleChange = useCallback(\n    (event: ChangeEvent<HTMLInputElement>) => {\n      const next = event.target.value;\n      if (!isControlled) {\n        setUncontrolledValue(next);\n      }\n      onChange?.(next);\n\n      // Revalidate on every keystroke once the field is already invalid, so a\n      // corrected value clears the message without waiting for another blur.\n      if (validateOn === \"change\" || (validateOn === \"blur\" && schemaError)) {\n        validate(next);\n      }\n    },\n    [isControlled, onChange, validateOn, schemaError, validate],\n  );\n\n  const handleBlur = useCallback(\n    (event: FocusEvent<HTMLInputElement>) => {\n      if (validateOn === \"blur\") {\n        validate(event.target.value);\n      }\n      onBlur?.(event);\n    },\n    [validateOn, validate, onBlur],\n  );\n\n  return {\n    currentValue: isControlled ? value : uncontrolledValue,\n    // A caller-supplied error outranks the schema's verdict.\n    shownError: error ?? schemaError,\n    handleChange,\n    handleBlur,\n  };\n}\n\nexport function TextInput({\n  label,\n  hint,\n  error,\n  optional = false,\n  action,\n  trailing,\n  mono = false,\n  type = \"text\",\n  value,\n  defaultValue,\n  onChange,\n  schema,\n  validateOn = \"blur\",\n  onValidationChange,\n  id,\n  className,\n  onBlur,\n  ...rest\n}: TextInputProps) {\n  const generatedId = useId();\n  const inputId = id ?? generatedId;\n  const describedById = `${inputId}-description`;\n\n  const { currentValue, shownError, handleChange, handleBlur } =\n    useFieldBehaviour({\n      value,\n      defaultValue,\n      error,\n      onChange,\n      onBlur,\n      schema,\n      validateOn,\n      onValidationChange,\n    });\n\n  return (\n    <div className=\"flex flex-col\">\n      <FieldLabel\n        htmlFor={inputId}\n        label={label}\n        optional={optional}\n        action={action}\n      />\n\n      <div className={trailing ? \"relative\" : undefined}>\n        <input\n          {...rest}\n          id={inputId}\n          type={type}\n          value={currentValue}\n          aria-invalid={shownError ? true : undefined}\n          aria-describedby={shownError || hint ? describedById : undefined}\n          onChange={handleChange}\n          onBlur={handleBlur}\n          className={fieldClassName(\n            Boolean(shownError),\n            mono,\n            Boolean(trailing),\n            className,\n          )}\n        />\n        {trailing ? (\n          <span className=\"absolute top-1/2 right-[9px] -translate-y-1/2 text-hint font-semibold text-fg-subtle\">\n            {trailing}\n          </span>\n        ) : null}\n      </div>\n\n      <FieldMessage id={describedById} error={shownError} hint={hint} />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/validation.cjs

@@ -0,0 +1,43 @@
+'use strict';
+
+var zod = require('zod');
+
+// src/validation/index.ts
+var REQUIRED = 1;
+var MIN_PASSWORD_LENGTH = 8;
+var VERIFICATION_CODE_LENGTH = 8;
+var MIN_BACKUP_CODE_LENGTH = 6;
+var MIN_PHONE_LENGTH = 7;
+var EMAIL_PATTERN = /.+@.+\..+/;
+var UPPER_CASE = /[A-Z]/;
+var LOWER_CASE = /[a-z]/;
+var DIGIT = /[0-9]/;
+var SYMBOL = /[^A-Za-z0-9]/;
+var SEPARATORS = /-/g;
+var PHONE_PATTERN = new RegExp(`^[+]?[\\d\\s().-]{${MIN_PHONE_LENGTH},}$`);
+var emailSchema = zod.z.string().trim().min(REQUIRED, "Enter your work email").regex(EMAIL_PATTERN, "Enter a valid email address");
+var passwordSchema = zod.z.string().min(MIN_PASSWORD_LENGTH, "Use at least 8 characters").refine(
+  (value) => UPPER_CASE.test(value) && LOWER_CASE.test(value),
+  "Use both upper and lower case letters"
+).refine(
+  (value) => DIGIT.test(value) || SYMBOL.test(value),
+  "Add a number or symbol"
+);
+var verificationCodeSchema = zod.z.string().transform((value) => value.replace(SEPARATORS, "").toUpperCase()).refine(
+  (value) => value.length === VERIFICATION_CODE_LENGTH,
+  "Enter the 8-character code"
+);
+var backupCodeSchema = zod.z.string().trim().min(MIN_BACKUP_CODE_LENGTH, "Enter a backup code");
+var fullNameSchema = zod.z.string().trim().min(REQUIRED, "Enter your full name");
+var jobTitleSchema = zod.z.string().trim().min(REQUIRED, "Enter your job title");
+var phoneSchema = zod.z.string().trim().regex(PHONE_PATTERN, "Enter a valid mobile number");
+
+exports.backupCodeSchema = backupCodeSchema;
+exports.emailSchema = emailSchema;
+exports.fullNameSchema = fullNameSchema;
+exports.jobTitleSchema = jobTitleSchema;
+exports.passwordSchema = passwordSchema;
+exports.phoneSchema = phoneSchema;
+exports.verificationCodeSchema = verificationCodeSchema;
+//# sourceMappingURL=validation.cjs.map
+//# sourceMappingURL=validation.cjs.map

package/dist/validation.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/validation/index.ts"],"names":["z"],"mappings":";;;;;AAYA,IAAM,QAAA,GAAW,CAAA;AACjB,IAAM,mBAAA,GAAsB,CAAA;AAC5B,IAAM,wBAAA,GAA2B,CAAA;AACjC,IAAM,sBAAA,GAAyB,CAAA;AAC/B,IAAM,gBAAA,GAAmB,CAAA;AAEzB,IAAM,aAAA,GAAgB,WAAA;AACtB,IAAM,UAAA,GAAa,OAAA;AACnB,IAAM,UAAA,GAAa,OAAA;AACnB,IAAM,KAAA,GAAQ,OAAA;AACd,IAAM,MAAA,GAAS,cAAA;AACf,IAAM,UAAA,GAAa,IAAA;AACnB,IAAM,aAAA,GAAgB,IAAI,MAAA,CAAO,CAAA,kBAAA,EAAqB,gBAAgB,CAAA,GAAA,CAAK,CAAA;AAOpE,IAAM,WAAA,GAAcA,KAAA,CACxB,MAAA,EAAO,CACP,IAAA,EAAK,CACL,GAAA,CAAI,QAAA,EAAU,uBAAuB,CAAA,CACrC,KAAA,CAAM,aAAA,EAAe,6BAA6B;AAG9C,IAAM,iBAAiBA,KAAA,CAC3B,MAAA,GACA,GAAA,CAAI,mBAAA,EAAqB,2BAA2B,CAAA,CACpD,MAAA;AAAA,EACC,CAAC,UAAU,UAAA,CAAW,IAAA,CAAK,KAAK,CAAA,IAAK,UAAA,CAAW,KAAK,KAAK,CAAA;AAAA,EAC1D;AACF,CAAA,CACC,MAAA;AAAA,EACC,CAAC,UAAU,KAAA,CAAM,IAAA,CAAK,KAAK,CAAA,IAAK,MAAA,CAAO,KAAK,KAAK,CAAA;AAAA,EACjD;AACF;AAOK,IAAM,sBAAA,GAAyBA,KAAA,CACnC,MAAA,EAAO,CACP,UAAU,CAAC,KAAA,KAAU,KAAA,CAAM,OAAA,CAAQ,UAAA,EAAY,EAAE,CAAA,CAAE,WAAA,EAAa,CAAA,CAChE,MAAA;AAAA,EACC,CAAC,KAAA,KAAU,KAAA,CAAM,MAAA,KAAW,wBAAA;AAAA,EAC5B;AACF;AAGK,IAAM,gBAAA,GAAmBA,MAC7B,MAAA,EAAO,CACP,MAAK,CACL,GAAA,CAAI,wBAAwB,qBAAqB;AAG7C,IAAM,cAAA,GAAiBA,MAC3B,MAAA,EAAO,CACP,MAAK,CACL,GAAA,CAAI,UAAU,sBAAsB;AAEhC,IAAM,cAAA,GAAiBA,MAC3B,MAAA,EAAO,CACP,MAAK,CACL,GAAA,CAAI,UAAU,sBAAsB;AAMhC,IAAM,WAAA,GAAcA,MACxB,MAAA,EAAO,CACP,MAAK,CACL,KAAA,CAAM,eAAe,6BAA6B","file":"validation.cjs","sourcesContent":["import { z } from \"zod\";\n\n/**\n * Field rules taken from the Carbonbits V1 auth design, which validates inline\n * as you type. The predicates here are the ones that screen actually applies —\n * kept in one place so a form built from `TextInput` agrees with the design\n * rather than re-deriving the rules per screen.\n *\n * These are ordinary zod schemas: extend them with `.refine`, swap a message\n * with `.min(8, \"…\")`, or ignore them and pass your own.\n */\n\nconst REQUIRED = 1;\nconst MIN_PASSWORD_LENGTH = 8;\nconst VERIFICATION_CODE_LENGTH = 8;\nconst MIN_BACKUP_CODE_LENGTH = 6;\nconst MIN_PHONE_LENGTH = 7;\n\nconst EMAIL_PATTERN = /.+@.+\\..+/;\nconst UPPER_CASE = /[A-Z]/;\nconst LOWER_CASE = /[a-z]/;\nconst DIGIT = /[0-9]/;\nconst SYMBOL = /[^A-Za-z0-9]/;\nconst SEPARATORS = /-/g;\nconst PHONE_PATTERN = new RegExp(`^[+]?[\\\\d\\\\s().-]{${MIN_PHONE_LENGTH},}$`);\n\n/**\n * The design checks `/.+@.+\\..+/` rather than anything stricter, which accepts\n * the addresses people actually type and leaves real verification to the\n * confirmation email. Kept deliberately, in place of `z.email()`.\n */\nexport const emailSchema = z\n  .string()\n  .trim()\n  .min(REQUIRED, \"Enter your work email\")\n  .regex(EMAIL_PATTERN, \"Enter a valid email address\");\n\n/** At least 8 characters, upper and lower case, and a number or symbol. */\nexport const passwordSchema = z\n  .string()\n  .min(MIN_PASSWORD_LENGTH, \"Use at least 8 characters\")\n  .refine(\n    (value) => UPPER_CASE.test(value) && LOWER_CASE.test(value),\n    \"Use both upper and lower case letters\",\n  )\n  .refine(\n    (value) => DIGIT.test(value) || SYMBOL.test(value),\n    \"Add a number or symbol\",\n  );\n\n/**\n * Eight characters, displayed as `XXXX-XXXX`. The separator is presentational,\n * so it is stripped before the length is counted and the parsed value comes\n * back normalised and upper-cased.\n */\nexport const verificationCodeSchema = z\n  .string()\n  .transform((value) => value.replace(SEPARATORS, \"\").toUpperCase())\n  .refine(\n    (value) => value.length === VERIFICATION_CODE_LENGTH,\n    \"Enter the 8-character code\",\n  );\n\n/** Recovery codes; the design enables the button at 6 characters. */\nexport const backupCodeSchema = z\n  .string()\n  .trim()\n  .min(MIN_BACKUP_CODE_LENGTH, \"Enter a backup code\");\n\n/** Free-text profile fields — the design only requires them to be non-empty. */\nexport const fullNameSchema = z\n  .string()\n  .trim()\n  .min(REQUIRED, \"Enter your full name\");\n\nexport const jobTitleSchema = z\n  .string()\n  .trim()\n  .min(REQUIRED, \"Enter your job title\");\n\n/**\n * Optional in the design, and used for recovery and alerts only, so this stays\n * permissive: digits, spaces and the usual punctuation, in any arrangement.\n */\nexport const phoneSchema = z\n  .string()\n  .trim()\n  .regex(PHONE_PATTERN, \"Enter a valid mobile number\");\n"]}

package/dist/validation.d.cts

@@ -0,0 +1,28 @@
+import { z } from 'zod';
+
+/**
+ * The design checks `/.+@.+\..+/` rather than anything stricter, which accepts
+ * the addresses people actually type and leaves real verification to the
+ * confirmation email. Kept deliberately, in place of `z.email()`.
+ */
+declare const emailSchema: z.ZodString;
+/** At least 8 characters, upper and lower case, and a number or symbol. */
+declare const passwordSchema: z.ZodString;
+/**
+ * Eight characters, displayed as `XXXX-XXXX`. The separator is presentational,
+ * so it is stripped before the length is counted and the parsed value comes
+ * back normalised and upper-cased.
+ */
+declare const verificationCodeSchema: z.ZodPipe<z.ZodString, z.ZodTransform<string, string>>;
+/** Recovery codes; the design enables the button at 6 characters. */
+declare const backupCodeSchema: z.ZodString;
+/** Free-text profile fields — the design only requires them to be non-empty. */
+declare const fullNameSchema: z.ZodString;
+declare const jobTitleSchema: z.ZodString;
+/**
+ * Optional in the design, and used for recovery and alerts only, so this stays
+ * permissive: digits, spaces and the usual punctuation, in any arrangement.
+ */
+declare const phoneSchema: z.ZodString;
+
+export { backupCodeSchema, emailSchema, fullNameSchema, jobTitleSchema, passwordSchema, phoneSchema, verificationCodeSchema };

package/dist/validation.d.ts

@@ -0,0 +1,28 @@
+import { z } from 'zod';
+
+/**
+ * The design checks `/.+@.+\..+/` rather than anything stricter, which accepts
+ * the addresses people actually type and leaves real verification to the
+ * confirmation email. Kept deliberately, in place of `z.email()`.
+ */
+declare const emailSchema: z.ZodString;
+/** At least 8 characters, upper and lower case, and a number or symbol. */
+declare const passwordSchema: z.ZodString;
+/**
+ * Eight characters, displayed as `XXXX-XXXX`. The separator is presentational,
+ * so it is stripped before the length is counted and the parsed value comes
+ * back normalised and upper-cased.
+ */
+declare const verificationCodeSchema: z.ZodPipe<z.ZodString, z.ZodTransform<string, string>>;
+/** Recovery codes; the design enables the button at 6 characters. */
+declare const backupCodeSchema: z.ZodString;
+/** Free-text profile fields — the design only requires them to be non-empty. */
+declare const fullNameSchema: z.ZodString;
+declare const jobTitleSchema: z.ZodString;
+/**
+ * Optional in the design, and used for recovery and alerts only, so this stays
+ * permissive: digits, spaces and the usual punctuation, in any arrangement.
+ */
+declare const phoneSchema: z.ZodString;
+
+export { backupCodeSchema, emailSchema, fullNameSchema, jobTitleSchema, passwordSchema, phoneSchema, verificationCodeSchema };

package/dist/validation.js

@@ -0,0 +1,35 @@
+import { z } from 'zod';
+
+// src/validation/index.ts
+var REQUIRED = 1;
+var MIN_PASSWORD_LENGTH = 8;
+var VERIFICATION_CODE_LENGTH = 8;
+var MIN_BACKUP_CODE_LENGTH = 6;
+var MIN_PHONE_LENGTH = 7;
+var EMAIL_PATTERN = /.+@.+\..+/;
+var UPPER_CASE = /[A-Z]/;
+var LOWER_CASE = /[a-z]/;
+var DIGIT = /[0-9]/;
+var SYMBOL = /[^A-Za-z0-9]/;
+var SEPARATORS = /-/g;
+var PHONE_PATTERN = new RegExp(`^[+]?[\\d\\s().-]{${MIN_PHONE_LENGTH},}$`);
+var emailSchema = z.string().trim().min(REQUIRED, "Enter your work email").regex(EMAIL_PATTERN, "Enter a valid email address");
+var passwordSchema = z.string().min(MIN_PASSWORD_LENGTH, "Use at least 8 characters").refine(
+  (value) => UPPER_CASE.test(value) && LOWER_CASE.test(value),
+  "Use both upper and lower case letters"
+).refine(
+  (value) => DIGIT.test(value) || SYMBOL.test(value),
+  "Add a number or symbol"
+);
+var verificationCodeSchema = z.string().transform((value) => value.replace(SEPARATORS, "").toUpperCase()).refine(
+  (value) => value.length === VERIFICATION_CODE_LENGTH,
+  "Enter the 8-character code"
+);
+var backupCodeSchema = z.string().trim().min(MIN_BACKUP_CODE_LENGTH, "Enter a backup code");
+var fullNameSchema = z.string().trim().min(REQUIRED, "Enter your full name");
+var jobTitleSchema = z.string().trim().min(REQUIRED, "Enter your job title");
+var phoneSchema = z.string().trim().regex(PHONE_PATTERN, "Enter a valid mobile number");
+
+export { backupCodeSchema, emailSchema, fullNameSchema, jobTitleSchema, passwordSchema, phoneSchema, verificationCodeSchema };
+//# sourceMappingURL=validation.js.map
+//# sourceMappingURL=validation.js.map

package/dist/validation.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/validation/index.ts"],"names":[],"mappings":";;;AAYA,IAAM,QAAA,GAAW,CAAA;AACjB,IAAM,mBAAA,GAAsB,CAAA;AAC5B,IAAM,wBAAA,GAA2B,CAAA;AACjC,IAAM,sBAAA,GAAyB,CAAA;AAC/B,IAAM,gBAAA,GAAmB,CAAA;AAEzB,IAAM,aAAA,GAAgB,WAAA;AACtB,IAAM,UAAA,GAAa,OAAA;AACnB,IAAM,UAAA,GAAa,OAAA;AACnB,IAAM,KAAA,GAAQ,OAAA;AACd,IAAM,MAAA,GAAS,cAAA;AACf,IAAM,UAAA,GAAa,IAAA;AACnB,IAAM,aAAA,GAAgB,IAAI,MAAA,CAAO,CAAA,kBAAA,EAAqB,gBAAgB,CAAA,GAAA,CAAK,CAAA;AAOpE,IAAM,WAAA,GAAc,CAAA,CACxB,MAAA,EAAO,CACP,IAAA,EAAK,CACL,GAAA,CAAI,QAAA,EAAU,uBAAuB,CAAA,CACrC,KAAA,CAAM,aAAA,EAAe,6BAA6B;AAG9C,IAAM,iBAAiB,CAAA,CAC3B,MAAA,GACA,GAAA,CAAI,mBAAA,EAAqB,2BAA2B,CAAA,CACpD,MAAA;AAAA,EACC,CAAC,UAAU,UAAA,CAAW,IAAA,CAAK,KAAK,CAAA,IAAK,UAAA,CAAW,KAAK,KAAK,CAAA;AAAA,EAC1D;AACF,CAAA,CACC,MAAA;AAAA,EACC,CAAC,UAAU,KAAA,CAAM,IAAA,CAAK,KAAK,CAAA,IAAK,MAAA,CAAO,KAAK,KAAK,CAAA;AAAA,EACjD;AACF;AAOK,IAAM,sBAAA,GAAyB,CAAA,CACnC,MAAA,EAAO,CACP,UAAU,CAAC,KAAA,KAAU,KAAA,CAAM,OAAA,CAAQ,UAAA,EAAY,EAAE,CAAA,CAAE,WAAA,EAAa,CAAA,CAChE,MAAA;AAAA,EACC,CAAC,KAAA,KAAU,KAAA,CAAM,MAAA,KAAW,wBAAA;AAAA,EAC5B;AACF;AAGK,IAAM,gBAAA,GAAmB,EAC7B,MAAA,EAAO,CACP,MAAK,CACL,GAAA,CAAI,wBAAwB,qBAAqB;AAG7C,IAAM,cAAA,GAAiB,EAC3B,MAAA,EAAO,CACP,MAAK,CACL,GAAA,CAAI,UAAU,sBAAsB;AAEhC,IAAM,cAAA,GAAiB,EAC3B,MAAA,EAAO,CACP,MAAK,CACL,GAAA,CAAI,UAAU,sBAAsB;AAMhC,IAAM,WAAA,GAAc,EACxB,MAAA,EAAO,CACP,MAAK,CACL,KAAA,CAAM,eAAe,6BAA6B","file":"validation.js","sourcesContent":["import { z } from \"zod\";\n\n/**\n * Field rules taken from the Carbonbits V1 auth design, which validates inline\n * as you type. The predicates here are the ones that screen actually applies —\n * kept in one place so a form built from `TextInput` agrees with the design\n * rather than re-deriving the rules per screen.\n *\n * These are ordinary zod schemas: extend them with `.refine`, swap a message\n * with `.min(8, \"…\")`, or ignore them and pass your own.\n */\n\nconst REQUIRED = 1;\nconst MIN_PASSWORD_LENGTH = 8;\nconst VERIFICATION_CODE_LENGTH = 8;\nconst MIN_BACKUP_CODE_LENGTH = 6;\nconst MIN_PHONE_LENGTH = 7;\n\nconst EMAIL_PATTERN = /.+@.+\\..+/;\nconst UPPER_CASE = /[A-Z]/;\nconst LOWER_CASE = /[a-z]/;\nconst DIGIT = /[0-9]/;\nconst SYMBOL = /[^A-Za-z0-9]/;\nconst SEPARATORS = /-/g;\nconst PHONE_PATTERN = new RegExp(`^[+]?[\\\\d\\\\s().-]{${MIN_PHONE_LENGTH},}$`);\n\n/**\n * The design checks `/.+@.+\\..+/` rather than anything stricter, which accepts\n * the addresses people actually type and leaves real verification to the\n * confirmation email. Kept deliberately, in place of `z.email()`.\n */\nexport const emailSchema = z\n  .string()\n  .trim()\n  .min(REQUIRED, \"Enter your work email\")\n  .regex(EMAIL_PATTERN, \"Enter a valid email address\");\n\n/** At least 8 characters, upper and lower case, and a number or symbol. */\nexport const passwordSchema = z\n  .string()\n  .min(MIN_PASSWORD_LENGTH, \"Use at least 8 characters\")\n  .refine(\n    (value) => UPPER_CASE.test(value) && LOWER_CASE.test(value),\n    \"Use both upper and lower case letters\",\n  )\n  .refine(\n    (value) => DIGIT.test(value) || SYMBOL.test(value),\n    \"Add a number or symbol\",\n  );\n\n/**\n * Eight characters, displayed as `XXXX-XXXX`. The separator is presentational,\n * so it is stripped before the length is counted and the parsed value comes\n * back normalised and upper-cased.\n */\nexport const verificationCodeSchema = z\n  .string()\n  .transform((value) => value.replace(SEPARATORS, \"\").toUpperCase())\n  .refine(\n    (value) => value.length === VERIFICATION_CODE_LENGTH,\n    \"Enter the 8-character code\",\n  );\n\n/** Recovery codes; the design enables the button at 6 characters. */\nexport const backupCodeSchema = z\n  .string()\n  .trim()\n  .min(MIN_BACKUP_CODE_LENGTH, \"Enter a backup code\");\n\n/** Free-text profile fields — the design only requires them to be non-empty. */\nexport const fullNameSchema = z\n  .string()\n  .trim()\n  .min(REQUIRED, \"Enter your full name\");\n\nexport const jobTitleSchema = z\n  .string()\n  .trim()\n  .min(REQUIRED, \"Enter your job title\");\n\n/**\n * Optional in the design, and used for recovery and alerts only, so this stays\n * permissive: digits, spaces and the usual punctuation, in any arrangement.\n */\nexport const phoneSchema = z\n  .string()\n  .trim()\n  .regex(PHONE_PATTERN, \"Enter a valid mobile number\");\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbonbits/sixr",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "e-commerce geared component library",
   "homepage": "https://carbonbits.co.ke/sixr",
   "repository": {
@@ -42,6 +42,36 @@
         "default": "./dist/cart.cjs"
       }
     },
+    "./text-input": {
+      "import": {
+        "types": "./dist/text-input.d.ts",
+        "default": "./dist/text-input.js"
+      },
+      "require": {
+        "types": "./dist/text-input.d.cts",
+        "default": "./dist/text-input.cjs"
+      }
+    },
+    "./form": {
+      "import": {
+        "types": "./dist/form.d.ts",
+        "default": "./dist/form.js"
+      },
+      "require": {
+        "types": "./dist/form.d.cts",
+        "default": "./dist/form.cjs"
+      }
+    },
+    "./validation": {
+      "import": {
+        "types": "./dist/validation.d.ts",
+        "default": "./dist/validation.js"
+      },
+      "require": {
+        "types": "./dist/validation.d.cts",
+        "default": "./dist/validation.cjs"
+      }
+    },
     "./styles.css": "./dist/styles.css",
     "./package.json": "./package.json"
   },
@@ -51,10 +81,10 @@
   "engines": {
     "node": ">=20.19.0"
   },
-  "packageManager": "pnpm@12.4.2",
+  "packageManager": "pnpm@12.4.2+sha512.08adc6613180275c7c9edada39dcf08c9c61ad4e7eaf330a4f3461f102b0f907423454d117f98e72d47fef0616070644d7bffc973a6a57f5090a6d7c368b07c9",
   "scripts": {
     "build": "pnpm run build:js && pnpm run build:css",
-    "build:js": "tsup",
+    "build:js": "rm -rf dist && tsup",
     "build:css": "tailwindcss -i ./src/styles/index.css -o ./dist/styles.css --minify",
     "typecheck": "tsc --noEmit",
     "lint": "biome check --error-on-warnings",
@@ -68,7 +98,13 @@
   },
   "peerDependencies": {
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "zod": "^4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "zod": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@biomejs/biome": "^2.5.14",
@@ -101,6 +137,7 @@
     "tsup": "^8.5.1",
     "typescript": "^6.0.3",
     "vite": "^8.3.0",
-    "vitest": "^5.0.1"
+    "vitest": "^5.0.1",
+    "zod": "^4.0.0"
   }
 }