@dsn-starter-kit/components-react 3.4.0 → 4.0.0

package/dist/TimeInput/TimeInput2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TimeInput2.mjs","names":[],"sources":["../../src/TimeInput/TimeInput.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Button } from '../Button';\nimport { Icon } from '../Icon';\nimport '../TextInput/TextInput.css';\nimport './TimeInput.css';\n\nexport interface TimeInputProps extends Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'type'\n> {\n  /**\n   * Whether the input is in an invalid state\n   * @default false\n   */\n  invalid?: boolean;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n}\n\n/**\n * Time Input component\n * Time input with an interactive clock button at inline-end that opens the native time picker.\n * Fixed width (sm) — not configurable, as time inputs have a predictable content width.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <TimeInput />\n *\n * // With label\n * <FormFieldLabel htmlFor=\"time\">Tijd</FormFieldLabel>\n * <TimeInput id=\"time\" />\n *\n * // With default value\n * <TimeInput defaultValue=\"14:30\" />\n *\n * // Invalid state\n * <TimeInput invalid aria-invalid=\"true\" aria-describedby=\"error\" />\n * ```\n */\nexport const TimeInput = React.forwardRef<HTMLInputElement, TimeInputProps>(\n  ({ className, invalid, disabled, readOnly, ...props }, ref) => {\n    const inputRef = React.useRef<HTMLInputElement>(null);\n\n    // Merge external ref with internal ref\n    const handleRef = React.useCallback(\n      (node: HTMLInputElement | null) => {\n        (inputRef as React.MutableRefObject<HTMLInputElement | null>).current =\n          node;\n        if (typeof ref === 'function') {\n          ref(node);\n        } else if (ref) {\n          (ref as React.MutableRefObject<HTMLInputElement | null>).current =\n            node;\n        }\n      },\n      [ref]\n    );\n\n    const handleButtonClick = () => {\n      if (inputRef.current && 'showPicker' in inputRef.current) {\n        inputRef.current.showPicker();\n      }\n    };\n\n    const inputClasses = classNames(\n      'dsn-text-input',\n      'dsn-time-input',\n      className\n    );\n\n    return (\n      <div className=\"dsn-time-input-wrapper\">\n        <input\n          ref={handleRef}\n          type=\"time\"\n          className={inputClasses}\n          aria-invalid={invalid || undefined}\n          disabled={disabled}\n          readOnly={readOnly}\n          {...props}\n        />\n        {!disabled && !readOnly && (\n          <Button\n            variant=\"subtle\"\n            size=\"small\"\n            iconOnly\n            iconStart={<Icon name=\"clock\" aria-hidden />}\n            className=\"dsn-time-input__button\"\n            onClick={handleButtonClick}\n          >\n            Tijdkiezer openen\n          </Button>\n        )}\n      </div>\n    );\n  }\n);\n\nTimeInput.displayName = 'TimeInput';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,MAAa,YAAY,MAAM,YAC5B,EAAE,WAAW,SAAS,UAAU,UAAU,GAAG,SAAS,QAAQ;CAC7D,MAAM,WAAW,MAAM,OAAyB,IAAI;CAGpD,MAAM,YAAY,MAAM,aACrB,SAAkC;EACjC,SAA8D,UAC5D;EACF,IAAI,OAAO,QAAQ,YACjB,IAAI,IAAI;OACH,IAAI,KACT,IAAyD,UACvD;CAEN,GACA,CAAC,GAAG,CACN;CAEA,MAAM,0BAA0B;EAC9B,IAAI,SAAS,WAAW,gBAAgB,SAAS,SAC/C,SAAS,QAAQ,WAAW;CAEhC;CAEA,MAAM,eAAe,WACnB,kBACA,kBACA,SACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,oBAAC,SAAD;GACE,KAAK;GACL,MAAK;GACL,WAAW;GACX,gBAAc,WAAW,KAAA;GACf;GACA;GACV,GAAI;EACL,CAAA,GACA,CAAC,YAAY,CAAC,YACb,oBAAC,QAAD;GACE,SAAQ;GACR,MAAK;GACL,UAAA;GACA,WAAW,oBAAC,MAAD;IAAM,MAAK;IAAQ,eAAA;GAAa,CAAA;GAC3C,WAAU;GACV,SAAS;GACV,UAAA;EAEO,CAAA,CAEP;;AAET,CACF;AAEA,UAAU,cAAc"}
+{"version":3,"file":"TimeInput2.mjs","names":[],"sources":["../../src/TimeInput/TimeInput.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Button } from '../Button';\nimport { Icon } from '../Icon';\nimport './TimeInput.css';\n\nexport interface TimeInputProps extends Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'type'\n> {\n  /**\n   * Whether the input is in an invalid state\n   * @default false\n   */\n  invalid?: boolean;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n}\n\n/**\n * Time Input component\n * Time input with an interactive clock button at inline-end that opens the native time picker.\n * Fixed inline-size (sm): not configurable, as time inputs have a predictable content length.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <TimeInput />\n *\n * // With label\n * <FormFieldLabel htmlFor=\"time\">Tijd</FormFieldLabel>\n * <TimeInput id=\"time\" />\n *\n * // With default value\n * <TimeInput defaultValue=\"14:30\" />\n *\n * // Invalid state\n * <TimeInput invalid aria-invalid=\"true\" aria-describedby=\"error\" />\n * ```\n */\nexport const TimeInput = React.forwardRef<HTMLInputElement, TimeInputProps>(\n  ({ className, invalid, disabled, readOnly, ...props }, ref) => {\n    const inputRef = React.useRef<HTMLInputElement>(null);\n\n    // Merge external ref with internal ref\n    const handleRef = React.useCallback(\n      (node: HTMLInputElement | null) => {\n        (inputRef as React.MutableRefObject<HTMLInputElement | null>).current =\n          node;\n        if (typeof ref === 'function') {\n          ref(node);\n        } else if (ref) {\n          (ref as React.MutableRefObject<HTMLInputElement | null>).current =\n            node;\n        }\n      },\n      [ref]\n    );\n\n    const handleButtonClick = () => {\n      if (inputRef.current && 'showPicker' in inputRef.current) {\n        inputRef.current.showPicker();\n      }\n    };\n\n    const inputClasses = classNames(\n      'dsn-text-input',\n      'dsn-time-input',\n      className\n    );\n\n    return (\n      <div className=\"dsn-time-input-wrapper\">\n        <input\n          ref={handleRef}\n          type=\"time\"\n          className={inputClasses}\n          aria-invalid={invalid || undefined}\n          disabled={disabled}\n          readOnly={readOnly}\n          {...props}\n        />\n        {!disabled && !readOnly && (\n          <Button\n            variant=\"subtle\"\n            size=\"small\"\n            iconOnly\n            iconStart={<Icon name=\"clock\" aria-hidden />}\n            className=\"dsn-time-input__button\"\n            onClick={handleButtonClick}\n          >\n            Tijdkiezer openen\n          </Button>\n        )}\n      </div>\n    );\n  }\n);\n\nTimeInput.displayName = 'TimeInput';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAa,YAAY,MAAM,YAC5B,EAAE,WAAW,SAAS,UAAU,UAAU,GAAG,SAAS,QAAQ;CAC7D,MAAM,WAAW,MAAM,OAAyB,IAAI;CAGpD,MAAM,YAAY,MAAM,aACrB,SAAkC;EACjC,SAA8D,UAC5D;EACF,IAAI,OAAO,QAAQ,YACjB,IAAI,IAAI;OACH,IAAI,KACT,IAAyD,UACvD;CAEN,GACA,CAAC,GAAG,CACN;CAEA,MAAM,0BAA0B;EAC9B,IAAI,SAAS,WAAW,gBAAgB,SAAS,SAC/C,SAAS,QAAQ,WAAW;CAEhC;CAEA,MAAM,eAAe,WACnB,kBACA,kBACA,SACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,oBAAC,SAAD;GACE,KAAK;GACL,MAAK;GACL,WAAW;GACX,gBAAc,WAAW,KAAA;GACf;GACA;GACV,GAAI;EACL,CAAA,GACA,CAAC,YAAY,CAAC,YACb,oBAAC,QAAD;GACE,SAAQ;GACR,MAAK;GACL,UAAA;GACA,WAAW,oBAAC,MAAD;IAAM,MAAK;IAAQ,eAAA;GAAa,CAAA;GAC3C,WAAU;GACV,SAAS;GACV,UAAA;EAEO,CAAA,CAEP;;AAET,CACF;AAEA,UAAU,cAAc"}