@cloudflare/kumo 2.0.0 → 2.0.1

package/scripts/theme-generator/config.ts

@@ -43,8 +43,8 @@ export const THEME_CONFIG: ThemeConfig = {
       newName: "",
       theme: {
         kumo: {
-          light: "var(--color-neutral-600, oklch(43.9% 0 0))",
-          dark: "var(--color-neutral-400, oklch(70.8% 0 0))",
+          light: "var(--color-neutral-950, oklch(14.5% 0 0))", // darker than default
+          dark: "var(--color-neutral-50, oklch(98.5% 0 0))", // lighter than default
         },
       },
     },
@@ -52,8 +52,8 @@ export const THEME_CONFIG: ThemeConfig = {
       newName: "",
       theme: {
         kumo: {
-          light: "var(--color-neutral-500, oklch(55.6% 0 0))",
-          dark: "var(--color-neutral-400, oklch(70.8% 0 0))",
+          light: "var(--color-neutral-500, oklch(55.6% 0 0))", // lighter than default
+          dark: "var(--color-neutral-400, oklch(70.8% 0 0))", // darker than default
         },
       },
     },
@@ -61,17 +61,17 @@ export const THEME_CONFIG: ThemeConfig = {
       newName: "",
       theme: {
         kumo: {
-          light: "var(--color-neutral-400, oklch(70.8% 0 0))",
-          dark: "var(--color-neutral-600, oklch(70.8% 0 0))",
+          light: "var(--color-neutral-300, oklch(87% 0 0))", // lighter than subtle
+          dark: "var(--color-neutral-600, oklch(43.9% 0 0))", // darker than subtle
         },
       },
     },
-    "kumo-placeholder": {
+    "kumo-placeholder": { // in between subtle and inactive
       newName: "",
       theme: {
         kumo: {
           light: "var(--color-neutral-400, oklch(70.8% 0 0))",
-          dark: "var(--color-neutral-500, oklch(55.6% 0 0))",
+          dark: "var(--color-neutral-500, oklch(55.6% 0 0))", 
         },
       },
     },
@@ -323,7 +323,7 @@ export const THEME_CONFIG: ThemeConfig = {
         kumo: {
           light: "var(--color-kumo-neutral-150, oklch(93.5% 0 0))",
           dark: "var(--color-neutral-800, oklch(26.9% 0 0))",
-        },
+      },
         fedramp: {
           light: "#c8d4e5",
           dark: "#c8d4e5",

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

@@ -1 +0,0 @@
-{"version":3,"file":"input-lpa5fc75tgrraafv.js","sources":["../../src/components/input/input.tsx"],"sourcesContent":["import { cn } from \"../../utils/cn\";\nimport {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from \"react\";\nimport { Input as BaseInput } from \"@base-ui/react/input\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\n\n/** Input size and variant definitions mapping names to their Tailwind classes. */\nexport const KUMO_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-kumo-focus/50 focus:ring-[1.5px]\",\n      description: \"Default input appearance\",\n    },\n    error: {\n      classes: \"!ring-kumo-danger focus:ring-kumo-danger/50 focus:ring-[1.5px]\",\n      description: \"Error state for validation failures\",\n    },\n  },\n} as const;\n\nexport const KUMO_INPUT_DEFAULT_VARIANTS = {\n  size: \"base\",\n  variant: \"default\",\n} as const;\n\nexport const KUMO_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 KUMO_INPUT_VARIANTS\nexport type KumoInputSize = keyof typeof KUMO_INPUT_VARIANTS.size;\nexport type KumoInputVariant = keyof typeof KUMO_INPUT_VARIANTS.variant;\n\nexport interface KumoInputVariantsProps {\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?: KumoInputSize;\n  /**\n   * Visual variant.\n   * - `\"default\"` — Standard input\n   * - `\"error\"` — Error state for validation failures\n   * @default \"default\"\n   */\n  variant?: KumoInputVariant;\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 = KUMO_INPUT_DEFAULT_VARIANTS.variant,\n  size = KUMO_INPUT_DEFAULT_VARIANTS.size,\n  parentFocusIndicator = false,\n  focusIndicator = false,\n}: KumoInputVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"border-0 bg-kumo-control text-kumo-default ring ring-kumo-line outline-none focus:outline-none\",\n    // Disabled state and placeholder styles (using vanilla CSS class for Chrome compatibility)\n    \"kumo-input-placeholder disabled:text-kumo-subtle\",\n    // Apply size styles from KUMO_INPUT_VARIANTS\n    KUMO_INPUT_VARIANTS.size[size].classes,\n    // Apply variant styles from KUMO_INPUT_VARIANTS\n    KUMO_INPUT_VARIANTS.variant[variant].classes,\n    // Focus state handling\n    parentFocusIndicator &&\n      (variant === \"error\"\n        ? \"focus-within:ring-kumo-danger/50 focus-within:ring-[1.5px]\"\n        : \"focus-within:ring-kumo-focus/50 focus-within:ring-[1.5px]\"),\n    focusIndicator &&\n      (variant === \"error\"\n        ? \"focus:ring-kumo-danger/50 focus:ring-[1.5px]\"\n        : \"focus:ring-kumo-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    ...inputProps\n  } = props;\n\n  // Deprecation warning for variant=\"error\"\n  if (process.env.NODE_ENV !== \"production\" && variantProp === \"error\") {\n    console.warn(\n      '[Kumo 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        \"[Kumo 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        className,\n      )}\n      {...inputProps}\n    />\n  );\n\n  // Render with Field wrapper if label is provided\n  if (label) {\n    return (\n      <Field\n        label={label}\n        required={required}\n        labelTooltip={labelTooltip}\n        description={description}\n        error={\n          error\n            ? typeof error === \"string\"\n              ? { message: error, match: true }\n              : error\n            : undefined\n        }\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<KumoInputVariantsProps, \"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  };\n"],"names":["KUMO_INPUT_VARIANTS","KUMO_INPUT_DEFAULT_VARIANTS","inputVariants","variant","size","parentFocusIndicator","focusIndicator","cn","Input","forwardRef","props","ref","className","variantProp","label","labelTooltip","description","error","inputProps","required","hasLabel","hasAriaLabel","hasAriaLabelledBy","input","jsx","BaseInput","Field"],"mappings":";;;;;;AAUO,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,IAEAP,EAAoB,KAAKI,CAAI,EAAE;AAAA;AAAA,IAE/BJ,EAAoB,QAAQG,CAAO,EAAE;AAAA;AAAA,IAErCE,MACGF,MAAY,UACT,+DACA;AAAA,IACNG,MACGH,MAAY,UACT,iDACA;AAAA,EAAA;AAEV;AAEO,MAAMK,IAAQC,EAAyC,CAACC,GAAOC,MAAQ;AAC5E,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,MAAAR,IAAO;AAAA,IACP,SAASS;AAAA,IACT,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDR;AAGJ,EAAI,QAAQ,IAAI,aAAa,gBAAgBG,MAAgB,WAC3D,QAAQ;AAAA,IACN;AAAA,EAAA;AAQJ,QAAMV,IAAUU,MAAgBI,IAAQ,UAAU,YAG5C,EAAE,UAAAE,MAAaD;AAGrB,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,UAAME,IAAW,EAAQN,GACnBO,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,KAAAd;AAAA,MACA,WAAWJ;AAAA,QACTL,EAAc,EAAE,MAAAE,GAAM,SAAAD,GAAS,gBAAgB,IAAM;AAAA,QACrDS;AAAA,MAAA;AAAA,MAED,GAAGM;AAAA,IAAA;AAAA,EAAA;AAKR,SAAIJ,IAEA,gBAAAU;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,OAAAZ;AAAA,MACA,UAAAK;AAAA,MACA,cAAAJ;AAAA,MACA,aAAAC;AAAA,MACA,OACEC,IACI,OAAOA,KAAU,WACf,EAAE,SAASA,GAAO,OAAO,GAAA,IACzBA,IACF;AAAA,MAGL,UAAAM;AAAA,IAAA;AAAA,EAAA,IAMAA;AACT,CAAC;AAEDf,EAAM,cAAc;"}