@treeal/ds 0.1.3 → 0.1.4

package/dist/index.esm9.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm9.js","sources":["../components/Input/Input.tsx"],"sourcesContent":["import React, { useId, useState } from 'react';\nimport styles from './Input.module.css';\n\nexport type InputState    = 'Default' | 'Hover' | 'Active' | 'Disabled' | 'Error';\nexport type InputType     = 'text' | 'email' | 'password' | 'search' | 'date';\n\n// ─── Built-in SVG icons ───────────────────────────────────────────────────────\n\nfunction IconEmail() {\n  return (\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n      <polyline points=\"22,6 12,13 2,6\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n    </svg>\n  );\n}\n\nfunction IconSearch() {\n  return (\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\"/>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\"/>\n    </svg>\n  );\n}\n\nfunction IconCalendar() {\n  return (\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n      <path d=\"M16 2v4M8 2v4M3 10h18\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n    </svg>\n  );\n}\n\nfunction IconLock() {\n  return (\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <rect x=\"5\" y=\"11\" width=\"14\" height=\"11\" rx=\"2\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n      <path d=\"M8 11V7a4 4 0 0 1 8 0v4\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n    </svg>\n  );\n}\n\nfunction IconEye() {\n  return (\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n      <circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"currentColor\" strokeWidth=\"1.75\"/>\n    </svg>\n  );\n}\n\nfunction IconEyeOff() {\n  return (\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n      <path d=\"M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n      <path d=\"M1 1l22 22\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\"/>\n    </svg>\n  );\n}\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport interface InputProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'type'> {\n  /** Visual/interaction state. Defaults to 'Default'. */\n  state?: InputState;\n  /**\n   * Semantic input type. Sets the correct HTML type and auto-adds icons.\n   * - email    → envelope icon left\n   * - password → lock icon left + show/hide toggle right\n   * - search   → search icon left + green search button right\n   * - date     → calendar icon right\n   */\n  inputType?: InputType;\n  /** Label text rendered above the field. */\n  label?: string;\n  placeholder?: string;\n  /** Helper or error message rendered below the field. */\n  message?: string;\n  /** Info icon rendered beside the label. */\n  iconLabel?: React.ReactNode;\n  /** Icon rendered inside the field, left side (24×24 slot). */\n  iconLeft?: React.ReactNode;\n  /** Icon rendered inside the field, right side (24×24 slot). */\n  iconRight?: React.ReactNode;\n  value?: string;\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  /** Called when search button is clicked (only for inputType=\"search\") */\n  onSearch?: () => void;\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport function Input({\n  state = 'Default',\n  inputType = 'text',\n  label,\n  placeholder,\n  message,\n  iconLabel,\n  iconLeft,\n  iconRight,\n  value,\n  onChange,\n  onSearch,\n  id: idProp,\n  className,\n  ...props\n}: InputProps) {\n  const generatedId = useId();\n  const id = idProp ?? generatedId;\n  const [showPassword, setShowPassword] = useState(false);\n\n  const isDisabled = state === 'Disabled';\n  const isError    = state === 'Error';\n\n  // ── Resolve HTML type ──────────────────────────────────────────────────────\n  const htmlType = inputType === 'password'\n    ? (showPassword ? 'text' : 'password')\n    : inputType === 'search'\n    ? 'text'\n    : inputType;\n\n  // ── Resolve built-in icons ─────────────────────────────────────────────────\n  const resolvedIconLeft: React.ReactNode =\n    iconLeft ??\n    (inputType === 'email'    ? <IconEmail />    :\n     inputType === 'password' ? <IconLock />     :\n     inputType === 'search'   ? <IconSearch />   :\n     undefined);\n\n  const resolvedIconRight: React.ReactNode =\n    iconRight ??\n    (inputType === 'password'\n      ? (\n        <button\n          type=\"button\"\n          className={styles.toggleBtn}\n          onClick={() => setShowPassword((v) => !v)}\n          aria-label={showPassword ? 'Ocultar senha' : 'Mostrar senha'}\n          tabIndex={-1}\n        >\n          {showPassword ? <IconEye /> : <IconEyeOff />}\n        </button>\n      )\n      : inputType === 'date'\n      ? <IconCalendar />\n      : inputType === 'search'\n      ? (\n        <button\n          type=\"button\"\n          className={styles.searchBtn}\n          onClick={onSearch}\n          aria-label=\"Buscar\"\n          tabIndex={-1}\n        >\n          <IconSearch />\n        </button>\n      )\n      : undefined);\n\n  const fieldClass = [\n    styles.field,\n    state === 'Hover'  ? styles.hover   : '',\n    state === 'Active' ? styles.active  : '',\n    isDisabled         ? styles.disabled : '',\n    isError            ? styles.error   : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={styles.wrapper}>\n      {label && (\n        <div className={styles.labelRow}>\n          <label\n            htmlFor={id}\n            className={[styles.label, isDisabled ? styles.labelDisabled : '']\n              .filter(Boolean)\n              .join(' ')}\n          >\n            {label}\n          </label>\n          {iconLabel && (\n            <span className={styles.labelIcon} aria-hidden=\"true\">\n              {iconLabel}\n            </span>\n          )}\n        </div>\n      )}\n\n      <div className={fieldClass}>\n        {resolvedIconLeft && (\n          <span className={styles.icon} aria-hidden=\"true\">\n            {resolvedIconLeft}\n          </span>\n        )}\n        <input\n          id={id}\n          type={htmlType}\n          className={styles.input}\n          placeholder={placeholder}\n          disabled={isDisabled}\n          value={value}\n          onChange={onChange}\n          aria-invalid={isError}\n          aria-describedby={message ? `${id}-message` : undefined}\n          {...props}\n        />\n        {resolvedIconRight && (\n          <span className={[styles.icon, inputType === 'search' || inputType === 'password' ? styles.iconAction : ''].filter(Boolean).join(' ')}>\n            {resolvedIconRight}\n          </span>\n        )}\n      </div>\n\n      {message && (\n        <p\n          id={`${id}-message`}\n          className={[styles.message, isError ? styles.messageError : '']\n            .filter(Boolean)\n            .join(' ')}\n        >\n          {message}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"names":["IconEmail","jsxs","jsx","IconSearch","IconCalendar","IconLock","IconEye","IconEyeOff","Input","state","inputType","label","placeholder","message","iconLabel","iconLeft","iconRight","value","onChange","onSearch","idProp","className","props","generatedId","useId","id","showPassword","setShowPassword","useState","isDisabled","isError","htmlType","resolvedIconLeft","resolvedIconRight","styles","v","fieldClass"],"mappings":"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"}
+{"version":3,"file":"index.esm9.js","sources":["../components/Input/Input.tsx"],"sourcesContent":["import React, { useId, useState } from 'react';\nimport styles from './Input.module.css';\n\nexport type InputState    = 'Default' | 'Hover' | 'Active' | 'Disabled' | 'Error';\nexport type InputType     = 'text' | 'email' | 'password' | 'search' | 'date';\n\n// ─── Built-in SVG icons ───────────────────────────────────────────────────────\n\nfunction IconEmail() {\n  return (\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n      <polyline points=\"22,6 12,13 2,6\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n    </svg>\n  );\n}\n\nfunction IconSearch() {\n  return (\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\"/>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\"/>\n    </svg>\n  );\n}\n\nfunction IconCalendar() {\n  return (\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n      <path d=\"M16 2v4M8 2v4M3 10h18\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n    </svg>\n  );\n}\n\nfunction IconLock() {\n  return (\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <rect x=\"5\" y=\"11\" width=\"14\" height=\"11\" rx=\"2\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n      <path d=\"M8 11V7a4 4 0 0 1 8 0v4\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n    </svg>\n  );\n}\n\nfunction IconEye() {\n  return (\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n      <circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"currentColor\" strokeWidth=\"1.75\"/>\n    </svg>\n  );\n}\n\nfunction IconEyeOff() {\n  return (\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n      <path d=\"M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n      <path d=\"M1 1l22 22\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\"/>\n    </svg>\n  );\n}\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport interface InputProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'type'> {\n  /** Visual/interaction state. Defaults to 'Default'. */\n  state?: InputState;\n  /**\n   * Semantic input type. Sets the correct HTML type and auto-adds icons.\n   * - email    → envelope icon left\n   * - password → lock icon left + show/hide toggle right\n   * - search   → search icon left + green search button right\n   * - date     → calendar icon right\n   */\n  inputType?: InputType;\n  /** Label text rendered above the field. */\n  label?: string;\n  placeholder?: string;\n  /** Helper or error message rendered below the field. */\n  message?: string;\n  /** Info icon rendered beside the label. */\n  iconLabel?: React.ReactNode;\n  /** Icon rendered inside the field, left side (24×24 slot). */\n  iconLeft?: React.ReactNode;\n  /** Icon rendered inside the field, right side (24×24 slot). */\n  iconRight?: React.ReactNode;\n  value?: string;\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  /** Called when search button is clicked (only for inputType=\"search\") */\n  onSearch?: () => void;\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport function Input({\n  state = 'Default',\n  inputType = 'text',\n  label,\n  placeholder,\n  message,\n  iconLabel,\n  iconLeft,\n  iconRight,\n  value,\n  onChange,\n  onSearch,\n  id: idProp,\n  className,\n  ...props\n}: InputProps) {\n  const generatedId = useId();\n  const id = idProp ?? generatedId;\n  const [showPassword, setShowPassword] = useState(false);\n\n  const isDisabled = state === 'Disabled';\n  const isError    = state === 'Error';\n\n  // ── Resolve HTML type ──────────────────────────────────────────────────────\n  const htmlType = inputType === 'password'\n    ? (showPassword ? 'text' : 'password')\n    : inputType === 'search'\n    ? 'text'\n    : inputType;\n\n  // ── Resolve built-in icons ─────────────────────────────────────────────────\n  const resolvedIconLeft: React.ReactNode =\n    iconLeft ??\n    (inputType === 'email'    ? <IconEmail />    :\n     inputType === 'password' ? <IconLock />     :\n     undefined);\n\n  const resolvedIconRight: React.ReactNode =\n    iconRight ??\n    (inputType === 'password'\n      ? (\n        <button\n          type=\"button\"\n          className={styles.toggleBtn}\n          onClick={() => setShowPassword((v) => !v)}\n          aria-label={showPassword ? 'Ocultar senha' : 'Mostrar senha'}\n          tabIndex={-1}\n        >\n          {showPassword ? <IconEye /> : <IconEyeOff />}\n        </button>\n      )\n      : inputType === 'date'\n      ? <IconCalendar />\n      : inputType === 'search'\n      ? (\n        <button\n          type=\"button\"\n          className={styles.searchBtn}\n          onClick={onSearch}\n          aria-label=\"Buscar\"\n          tabIndex={-1}\n        >\n          <IconSearch />\n        </button>\n      )\n      : undefined);\n\n  const fieldClass = [\n    styles.field,\n    state === 'Hover'  ? styles.hover   : '',\n    state === 'Active' ? styles.active  : '',\n    isDisabled         ? styles.disabled : '',\n    isError            ? styles.error   : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={styles.wrapper}>\n      {label && (\n        <div className={styles.labelRow}>\n          <label\n            htmlFor={id}\n            className={[styles.label, isDisabled ? styles.labelDisabled : '']\n              .filter(Boolean)\n              .join(' ')}\n          >\n            {label}\n          </label>\n          {iconLabel && (\n            <span className={styles.labelIcon} aria-hidden=\"true\">\n              {iconLabel}\n            </span>\n          )}\n        </div>\n      )}\n\n      <div className={fieldClass}>\n        {resolvedIconLeft && (\n          <span className={styles.icon} aria-hidden=\"true\">\n            {resolvedIconLeft}\n          </span>\n        )}\n        <input\n          id={id}\n          type={htmlType}\n          className={styles.input}\n          placeholder={placeholder}\n          disabled={isDisabled}\n          value={value}\n          onChange={onChange}\n          aria-invalid={isError}\n          aria-describedby={message ? `${id}-message` : undefined}\n          {...props}\n        />\n        {resolvedIconRight && (\n          <span className={[styles.icon, inputType === 'search' || inputType === 'password' ? styles.iconAction : ''].filter(Boolean).join(' ')}>\n            {resolvedIconRight}\n          </span>\n        )}\n      </div>\n\n      {message && (\n        <p\n          id={`${id}-message`}\n          className={[styles.message, isError ? styles.messageError : '']\n            .filter(Boolean)\n            .join(' ')}\n        >\n          {message}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"names":["IconEmail","jsxs","jsx","IconSearch","IconCalendar","IconLock","IconEye","IconEyeOff","Input","state","inputType","label","placeholder","message","iconLabel","iconLeft","iconRight","value","onChange","onSearch","idProp","className","props","generatedId","useId","id","showPassword","setShowPassword","useState","isDisabled","isError","htmlType","resolvedIconLeft","resolvedIconRight","styles","v","fieldClass"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@treeal/ds",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Treeal Design System — React component library with CSS Modules",
   "license": "MIT",