@metamask-previews/design-system-react 0.0.0-preview.52473ea → 0.0.0-preview.6c1eed6

package/dist/components/ButtonIcon/index.d.mts

@@ -0,0 +1,4 @@
+export { ButtonIconSize } from "../../types/index.mjs";
+export { ButtonIcon } from "./ButtonIcon.mjs";
+export type { ButtonIconProps } from "./ButtonIcon.types.mjs";
+//# sourceMappingURL=index.d.mts.map

package/dist/components/ButtonIcon/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,8BAAoB;AAC7C,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B"}

package/dist/components/ButtonIcon/index.mjs

@@ -0,0 +1,3 @@
+export { ButtonIconSize } from "../../types/index.mjs";
+export { ButtonIcon } from "./ButtonIcon.mjs";
+//# sourceMappingURL=index.mjs.map

package/dist/components/ButtonIcon/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,8BAAoB;AAC7C,OAAO,EAAE,UAAU,EAAE,yBAAqB","sourcesContent":["export { ButtonIconSize } from '../../types';\nexport { ButtonIcon } from './ButtonIcon';\nexport type { ButtonIconProps } from './ButtonIcon.types';\n"]}

package/dist/components/Checkbox/Checkbox.cjs

@@ -0,0 +1,73 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+const react_1 = __importStar(require("react"));
+const tw_merge_1 = require("../../utils/tw-merge.cjs");
+const Icon_1 = require("../Icon/index.cjs");
+const Text_1 = require("../Text/index.cjs");
+exports.Checkbox = (0, react_1.forwardRef)(({ id, isSelected, isDisabled = false, isInvalid = false, label, labelProps, onChange, inputProps, checkboxContainerProps, checkedIconProps, className, style, ...props }, ref) => {
+    const handleChange = (event) => {
+        if (isDisabled) {
+            return;
+        }
+        onChange?.(event.target.checked);
+    };
+    const handleClick = () => {
+        if (isDisabled) {
+            return;
+        }
+        onChange?.(!isSelected);
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            handleClick();
+        }
+    };
+    (0, react_1.useImperativeHandle)(ref, () => ({ toggle: handleClick }), [handleClick]);
+    const outerClassName = (0, tw_merge_1.twMerge)('inline-flex items-center', isDisabled && 'cursor-not-allowed opacity-50', className);
+    const baseBg = isSelected
+        ? 'bg-primary-default hover:bg-primary-default-hover active:bg-primary-default-pressed'
+        : 'bg-background-default hover:bg-background-default-hover active:bg-background-default-pressed';
+    let baseBorder = 'border-border-default';
+    if (isSelected) {
+        baseBorder = 'border-primary-default';
+    }
+    else if (isInvalid) {
+        baseBorder = 'border-error-default';
+    }
+    const checkboxClasses = (0, tw_merge_1.twMerge)('relative flex h-6 w-6 items-center justify-center rounded border-2 p-0 transition-transform active:scale-95', baseBg, baseBorder, checkboxContainerProps?.className);
+    const iconClasses = (0, tw_merge_1.twMerge)('pointer-events-none transition-opacity', isSelected ? 'opacity-100' : 'opacity-0', checkedIconProps?.className);
+    return (react_1.default.createElement("label", { htmlFor: id, className: outerClassName, style: style, ...props },
+        react_1.default.createElement("div", { className: "relative" },
+            react_1.default.createElement("input", { type: "checkbox", id: id, checked: isSelected, disabled: isDisabled, "aria-invalid": isInvalid, onChange: handleChange, onKeyDown: handleKeyDown, className: "absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed", ...inputProps }),
+            react_1.default.createElement("div", { className: checkboxClasses, ...checkboxContainerProps },
+                react_1.default.createElement(Icon_1.Icon, { name: Icon_1.IconName.Check, color: Icon_1.IconColor.PrimaryInverse, size: Icon_1.IconSize.Sm, ...checkedIconProps, className: iconClasses }))),
+        label ? (react_1.default.createElement(Text_1.Text, { asChild: true, ...labelProps, className: (0, tw_merge_1.twMerge)('ml-3', labelProps?.className) },
+            react_1.default.createElement("span", null, label))) : null));
+});
+exports.Checkbox.displayName = 'Checkbox';
+//# sourceMappingURL=Checkbox.cjs.map

package/dist/components/Checkbox/Checkbox.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.cjs","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ChangeEvent, KeyboardEvent } from 'react';\nimport React, { forwardRef, useImperativeHandle } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Icon, IconName, IconColor, IconSize } from '../Icon';\nimport { Text } from '../Text';\n\nimport type { CheckboxProps } from './Checkbox.types';\n\nexport const Checkbox = forwardRef<{ toggle: () => void }, CheckboxProps>(\n  (\n    {\n      id,\n      isSelected,\n      isDisabled = false,\n      isInvalid = false,\n      label,\n      labelProps,\n      onChange,\n      inputProps,\n      checkboxContainerProps,\n      checkedIconProps,\n      className,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n      if (isDisabled) {\n        return;\n      }\n      onChange?.(event.target.checked);\n    };\n\n    const handleClick = () => {\n      if (isDisabled) {\n        return;\n      }\n      onChange?.(!isSelected);\n    };\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === 'Enter') {\n        event.preventDefault();\n        handleClick();\n      }\n    };\n\n    useImperativeHandle(ref, () => ({ toggle: handleClick }), [handleClick]);\n\n    const outerClassName = twMerge(\n      'inline-flex items-center',\n      isDisabled && 'cursor-not-allowed opacity-50',\n      className,\n    );\n\n    const baseBg = isSelected\n      ? 'bg-primary-default hover:bg-primary-default-hover active:bg-primary-default-pressed'\n      : 'bg-background-default hover:bg-background-default-hover active:bg-background-default-pressed';\n    let baseBorder = 'border-border-default';\n    if (isSelected) {\n      baseBorder = 'border-primary-default';\n    } else if (isInvalid) {\n      baseBorder = 'border-error-default';\n    }\n\n    const checkboxClasses = twMerge(\n      'relative flex h-6 w-6 items-center justify-center rounded border-2 p-0 transition-transform active:scale-95',\n      baseBg,\n      baseBorder,\n      checkboxContainerProps?.className,\n    );\n\n    const iconClasses = twMerge(\n      'pointer-events-none transition-opacity',\n      isSelected ? 'opacity-100' : 'opacity-0',\n      checkedIconProps?.className,\n    );\n\n    return (\n      <label htmlFor={id} className={outerClassName} style={style} {...props}>\n        <div className=\"relative\">\n          <input\n            type=\"checkbox\"\n            id={id}\n            checked={isSelected}\n            disabled={isDisabled}\n            aria-invalid={isInvalid}\n            onChange={handleChange}\n            onKeyDown={handleKeyDown}\n            className=\"absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed\"\n            {...inputProps}\n          />\n          <div className={checkboxClasses} {...checkboxContainerProps}>\n            <Icon\n              name={IconName.Check}\n              color={IconColor.PrimaryInverse}\n              size={IconSize.Sm}\n              {...checkedIconProps}\n              className={iconClasses}\n            />\n          </div>\n        </div>\n        {label ? (\n          <Text\n            asChild\n            {...labelProps}\n            className={twMerge('ml-3', labelProps?.className)}\n          >\n            <span>{label}</span>\n          </Text>\n        ) : null}\n      </label>\n    );\n  },\n);\n\nCheckbox.displayName = 'Checkbox';\n"]}

package/dist/components/Checkbox/Checkbox.d.cts

@@ -0,0 +1,6 @@
+import React from "react";
+import type { CheckboxProps } from "./Checkbox.types.cjs";
+export declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<{
+    toggle: () => void;
+}>>;
+//# sourceMappingURL=Checkbox.d.cts.map

package/dist/components/Checkbox/Checkbox.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.cts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0C,cAAc;AAM/D,OAAO,KAAK,EAAE,aAAa,EAAE,6BAAyB;AAEtD,eAAO,MAAM,QAAQ;YAAwB,MAAM,IAAI;GA2GtD,CAAC"}

package/dist/components/Checkbox/Checkbox.d.mts

@@ -0,0 +1,6 @@
+import React from "react";
+import type { CheckboxProps } from "./Checkbox.types.mjs";
+export declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<{
+    toggle: () => void;
+}>>;
+//# sourceMappingURL=Checkbox.d.mts.map

package/dist/components/Checkbox/Checkbox.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.mts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0C,cAAc;AAM/D,OAAO,KAAK,EAAE,aAAa,EAAE,6BAAyB;AAEtD,eAAO,MAAM,QAAQ;YAAwB,MAAM,IAAI;GA2GtD,CAAC"}

package/dist/components/Checkbox/Checkbox.mjs

@@ -0,0 +1,55 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+import $React from "react";
+const { forwardRef, useImperativeHandle } = $React;
+const React = $importDefault($React);
+import { twMerge } from "../../utils/tw-merge.mjs";
+import { Icon, IconName, IconColor, IconSize } from "../Icon/index.mjs";
+import { Text } from "../Text/index.mjs";
+export const Checkbox = forwardRef(({ id, isSelected, isDisabled = false, isInvalid = false, label, labelProps, onChange, inputProps, checkboxContainerProps, checkedIconProps, className, style, ...props }, ref) => {
+    const handleChange = (event) => {
+        if (isDisabled) {
+            return;
+        }
+        onChange?.(event.target.checked);
+    };
+    const handleClick = () => {
+        if (isDisabled) {
+            return;
+        }
+        onChange?.(!isSelected);
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            handleClick();
+        }
+    };
+    useImperativeHandle(ref, () => ({ toggle: handleClick }), [handleClick]);
+    const outerClassName = twMerge('inline-flex items-center', isDisabled && 'cursor-not-allowed opacity-50', className);
+    const baseBg = isSelected
+        ? 'bg-primary-default hover:bg-primary-default-hover active:bg-primary-default-pressed'
+        : 'bg-background-default hover:bg-background-default-hover active:bg-background-default-pressed';
+    let baseBorder = 'border-border-default';
+    if (isSelected) {
+        baseBorder = 'border-primary-default';
+    }
+    else if (isInvalid) {
+        baseBorder = 'border-error-default';
+    }
+    const checkboxClasses = twMerge('relative flex h-6 w-6 items-center justify-center rounded border-2 p-0 transition-transform active:scale-95', baseBg, baseBorder, checkboxContainerProps?.className);
+    const iconClasses = twMerge('pointer-events-none transition-opacity', isSelected ? 'opacity-100' : 'opacity-0', checkedIconProps?.className);
+    return (React.createElement("label", { htmlFor: id, className: outerClassName, style: style, ...props },
+        React.createElement("div", { className: "relative" },
+            React.createElement("input", { type: "checkbox", id: id, checked: isSelected, disabled: isDisabled, "aria-invalid": isInvalid, onChange: handleChange, onKeyDown: handleKeyDown, className: "absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed", ...inputProps }),
+            React.createElement("div", { className: checkboxClasses, ...checkboxContainerProps },
+                React.createElement(Icon, { name: IconName.Check, color: IconColor.PrimaryInverse, size: IconSize.Sm, ...checkedIconProps, className: iconClasses }))),
+        label ? (React.createElement(Text, { asChild: true, ...labelProps, className: twMerge('ml-3', labelProps?.className) },
+            React.createElement("span", null, label))) : null));
+});
+Checkbox.displayName = 'Checkbox';
+//# sourceMappingURL=Checkbox.mjs.map

package/dist/components/Checkbox/Checkbox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.mjs","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ChangeEvent, KeyboardEvent } from 'react';\nimport React, { forwardRef, useImperativeHandle } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Icon, IconName, IconColor, IconSize } from '../Icon';\nimport { Text } from '../Text';\n\nimport type { CheckboxProps } from './Checkbox.types';\n\nexport const Checkbox = forwardRef<{ toggle: () => void }, CheckboxProps>(\n  (\n    {\n      id,\n      isSelected,\n      isDisabled = false,\n      isInvalid = false,\n      label,\n      labelProps,\n      onChange,\n      inputProps,\n      checkboxContainerProps,\n      checkedIconProps,\n      className,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n      if (isDisabled) {\n        return;\n      }\n      onChange?.(event.target.checked);\n    };\n\n    const handleClick = () => {\n      if (isDisabled) {\n        return;\n      }\n      onChange?.(!isSelected);\n    };\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === 'Enter') {\n        event.preventDefault();\n        handleClick();\n      }\n    };\n\n    useImperativeHandle(ref, () => ({ toggle: handleClick }), [handleClick]);\n\n    const outerClassName = twMerge(\n      'inline-flex items-center',\n      isDisabled && 'cursor-not-allowed opacity-50',\n      className,\n    );\n\n    const baseBg = isSelected\n      ? 'bg-primary-default hover:bg-primary-default-hover active:bg-primary-default-pressed'\n      : 'bg-background-default hover:bg-background-default-hover active:bg-background-default-pressed';\n    let baseBorder = 'border-border-default';\n    if (isSelected) {\n      baseBorder = 'border-primary-default';\n    } else if (isInvalid) {\n      baseBorder = 'border-error-default';\n    }\n\n    const checkboxClasses = twMerge(\n      'relative flex h-6 w-6 items-center justify-center rounded border-2 p-0 transition-transform active:scale-95',\n      baseBg,\n      baseBorder,\n      checkboxContainerProps?.className,\n    );\n\n    const iconClasses = twMerge(\n      'pointer-events-none transition-opacity',\n      isSelected ? 'opacity-100' : 'opacity-0',\n      checkedIconProps?.className,\n    );\n\n    return (\n      <label htmlFor={id} className={outerClassName} style={style} {...props}>\n        <div className=\"relative\">\n          <input\n            type=\"checkbox\"\n            id={id}\n            checked={isSelected}\n            disabled={isDisabled}\n            aria-invalid={isInvalid}\n            onChange={handleChange}\n            onKeyDown={handleKeyDown}\n            className=\"absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed\"\n            {...inputProps}\n          />\n          <div className={checkboxClasses} {...checkboxContainerProps}>\n            <Icon\n              name={IconName.Check}\n              color={IconColor.PrimaryInverse}\n              size={IconSize.Sm}\n              {...checkedIconProps}\n              className={iconClasses}\n            />\n          </div>\n        </div>\n        {label ? (\n          <Text\n            asChild\n            {...labelProps}\n            className={twMerge('ml-3', labelProps?.className)}\n          >\n            <span>{label}</span>\n          </Text>\n        ) : null}\n      </label>\n    );\n  },\n);\n\nCheckbox.displayName = 'Checkbox';\n"]}

package/dist/components/Checkbox/Checkbox.types.cjs

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=Checkbox.types.cjs.map

package/dist/components/Checkbox/Checkbox.types.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.types.cjs","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport type { IconProps } from '../Icon';\nimport type { TextProps } from '../Text';\n\nexport type CheckboxProps = Omit<\n  ComponentProps<'label'>,\n  'style' | 'className' | 'children' | 'htmlFor'\n> & {\n  /**\n   * Required unique identifier for the checkbox input element.\n   * This is used for the input's ID and the label's htmlFor attributes.\n   */\n  id: string;\n\n  /**\n   * Required prop to determine whether the checkbox is currently selected.\n   * This component is fully controlled, so you must manage this state\n   * in your parent component.\n   */\n  isSelected: boolean;\n\n  /**\n   * Optional prop that when true, disables the checkbox.\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n\n  /**\n   * Optional prop that when true, displays the invalid/error state of the checkbox.\n   *\n   * @default false\n   */\n  isInvalid?: boolean;\n\n  /**\n   * Optional label prop that renders text or a React node as a label beside the checkbox.\n   */\n  label?: React.ReactNode | string;\n\n  /**\n   * Optional props to be passed to the label's Text component\n   */\n  labelProps?: Omit<Partial<TextProps>, 'children'>;\n\n  /**\n   * Required callback for when the checked state changes.\n   * Use this to update your state.\n   */\n  onChange: (isSelected: boolean) => void;\n\n  /**\n   * Optional props passed to the input element.\n   */\n  inputProps?: Omit<\n    ComponentProps<'input'>,\n    'type' | 'checked' | 'onChange' | 'disabled'\n  > & {\n    [key: `data-${string}`]: string;\n  };\n\n  /**\n   * Optional props passed to the container div wrapping the checkbox icon.\n   */\n  checkboxContainerProps?: (Omit<ComponentProps<'div'>, 'children'> & {\n    className?: string;\n  }) &\n    Record<string, unknown>;\n\n  /**\n   * Optional props to be passed to the check Icon component\n   */\n  checkedIconProps?: Partial<IconProps>;\n  /**\n   * Optional prop for additional CSS classes to be applied to the Checkbox component.\n   * These classes will be merged with the component's default classes using twMerge.\n   */\n  className?: string;\n  /**\n   * Optional CSS styles for the outer container.\n   */\n  style?: React.CSSProperties;\n};\n"]}

package/dist/components/Checkbox/Checkbox.types.d.cts

@@ -0,0 +1,67 @@
+import type { ComponentProps } from "react";
+import type { IconProps } from "../Icon/index.cjs";
+import type { TextProps } from "../Text/index.cjs";
+export type CheckboxProps = Omit<ComponentProps<'label'>, 'style' | 'className' | 'children' | 'htmlFor'> & {
+    /**
+     * Required unique identifier for the checkbox input element.
+     * This is used for the input's ID and the label's htmlFor attributes.
+     */
+    id: string;
+    /**
+     * Required prop to determine whether the checkbox is currently selected.
+     * This component is fully controlled, so you must manage this state
+     * in your parent component.
+     */
+    isSelected: boolean;
+    /**
+     * Optional prop that when true, disables the checkbox.
+     *
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Optional prop that when true, displays the invalid/error state of the checkbox.
+     *
+     * @default false
+     */
+    isInvalid?: boolean;
+    /**
+     * Optional label prop that renders text or a React node as a label beside the checkbox.
+     */
+    label?: React.ReactNode | string;
+    /**
+     * Optional props to be passed to the label's Text component
+     */
+    labelProps?: Omit<Partial<TextProps>, 'children'>;
+    /**
+     * Required callback for when the checked state changes.
+     * Use this to update your state.
+     */
+    onChange: (isSelected: boolean) => void;
+    /**
+     * Optional props passed to the input element.
+     */
+    inputProps?: Omit<ComponentProps<'input'>, 'type' | 'checked' | 'onChange' | 'disabled'> & {
+        [key: `data-${string}`]: string;
+    };
+    /**
+     * Optional props passed to the container div wrapping the checkbox icon.
+     */
+    checkboxContainerProps?: (Omit<ComponentProps<'div'>, 'children'> & {
+        className?: string;
+    }) & Record<string, unknown>;
+    /**
+     * Optional props to be passed to the check Icon component
+     */
+    checkedIconProps?: Partial<IconProps>;
+    /**
+     * Optional prop for additional CSS classes to be applied to the Checkbox component.
+     * These classes will be merged with the component's default classes using twMerge.
+     */
+    className?: string;
+    /**
+     * Optional CSS styles for the outer container.
+     */
+    style?: React.CSSProperties;
+};
+//# sourceMappingURL=Checkbox.types.d.cts.map

package/dist/components/Checkbox/Checkbox.types.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.types.d.cts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,cAAc,CAAC,OAAO,CAAC,EACvB,OAAO,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAC/C,GAAG;IACF;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;;;OAIG;IACH,UAAU,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IAEjC;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC;IAElD;;;OAGG;IACH,QAAQ,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CACf,cAAc,CAAC,OAAO,CAAC,EACvB,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAC7C,GAAG;QACF,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,CAAC;KACjC,CAAC;IAEF;;OAEG;IACH,sBAAsB,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;QAClE,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC,GACA,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAE1B;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACtC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC"}

package/dist/components/Checkbox/Checkbox.types.d.mts

@@ -0,0 +1,67 @@
+import type { ComponentProps } from "react";
+import type { IconProps } from "../Icon/index.mjs";
+import type { TextProps } from "../Text/index.mjs";
+export type CheckboxProps = Omit<ComponentProps<'label'>, 'style' | 'className' | 'children' | 'htmlFor'> & {
+    /**
+     * Required unique identifier for the checkbox input element.
+     * This is used for the input's ID and the label's htmlFor attributes.
+     */
+    id: string;
+    /**
+     * Required prop to determine whether the checkbox is currently selected.
+     * This component is fully controlled, so you must manage this state
+     * in your parent component.
+     */
+    isSelected: boolean;
+    /**
+     * Optional prop that when true, disables the checkbox.
+     *
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Optional prop that when true, displays the invalid/error state of the checkbox.
+     *
+     * @default false
+     */
+    isInvalid?: boolean;
+    /**
+     * Optional label prop that renders text or a React node as a label beside the checkbox.
+     */
+    label?: React.ReactNode | string;
+    /**
+     * Optional props to be passed to the label's Text component
+     */
+    labelProps?: Omit<Partial<TextProps>, 'children'>;
+    /**
+     * Required callback for when the checked state changes.
+     * Use this to update your state.
+     */
+    onChange: (isSelected: boolean) => void;
+    /**
+     * Optional props passed to the input element.
+     */
+    inputProps?: Omit<ComponentProps<'input'>, 'type' | 'checked' | 'onChange' | 'disabled'> & {
+        [key: `data-${string}`]: string;
+    };
+    /**
+     * Optional props passed to the container div wrapping the checkbox icon.
+     */
+    checkboxContainerProps?: (Omit<ComponentProps<'div'>, 'children'> & {
+        className?: string;
+    }) & Record<string, unknown>;
+    /**
+     * Optional props to be passed to the check Icon component
+     */
+    checkedIconProps?: Partial<IconProps>;
+    /**
+     * Optional prop for additional CSS classes to be applied to the Checkbox component.
+     * These classes will be merged with the component's default classes using twMerge.
+     */
+    className?: string;
+    /**
+     * Optional CSS styles for the outer container.
+     */
+    style?: React.CSSProperties;
+};
+//# sourceMappingURL=Checkbox.types.d.mts.map

package/dist/components/Checkbox/Checkbox.types.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.types.d.mts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,cAAc,CAAC,OAAO,CAAC,EACvB,OAAO,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAC/C,GAAG;IACF;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;;;OAIG;IACH,UAAU,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IAEjC;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC;IAElD;;;OAGG;IACH,QAAQ,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CACf,cAAc,CAAC,OAAO,CAAC,EACvB,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAC7C,GAAG;QACF,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,CAAC;KACjC,CAAC;IAEF;;OAEG;IACH,sBAAsB,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;QAClE,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC,GACA,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAE1B;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACtC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC"}

package/dist/components/Checkbox/Checkbox.types.mjs

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Checkbox.types.mjs.map

package/dist/components/Checkbox/Checkbox.types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.types.mjs","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport type { IconProps } from '../Icon';\nimport type { TextProps } from '../Text';\n\nexport type CheckboxProps = Omit<\n  ComponentProps<'label'>,\n  'style' | 'className' | 'children' | 'htmlFor'\n> & {\n  /**\n   * Required unique identifier for the checkbox input element.\n   * This is used for the input's ID and the label's htmlFor attributes.\n   */\n  id: string;\n\n  /**\n   * Required prop to determine whether the checkbox is currently selected.\n   * This component is fully controlled, so you must manage this state\n   * in your parent component.\n   */\n  isSelected: boolean;\n\n  /**\n   * Optional prop that when true, disables the checkbox.\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n\n  /**\n   * Optional prop that when true, displays the invalid/error state of the checkbox.\n   *\n   * @default false\n   */\n  isInvalid?: boolean;\n\n  /**\n   * Optional label prop that renders text or a React node as a label beside the checkbox.\n   */\n  label?: React.ReactNode | string;\n\n  /**\n   * Optional props to be passed to the label's Text component\n   */\n  labelProps?: Omit<Partial<TextProps>, 'children'>;\n\n  /**\n   * Required callback for when the checked state changes.\n   * Use this to update your state.\n   */\n  onChange: (isSelected: boolean) => void;\n\n  /**\n   * Optional props passed to the input element.\n   */\n  inputProps?: Omit<\n    ComponentProps<'input'>,\n    'type' | 'checked' | 'onChange' | 'disabled'\n  > & {\n    [key: `data-${string}`]: string;\n  };\n\n  /**\n   * Optional props passed to the container div wrapping the checkbox icon.\n   */\n  checkboxContainerProps?: (Omit<ComponentProps<'div'>, 'children'> & {\n    className?: string;\n  }) &\n    Record<string, unknown>;\n\n  /**\n   * Optional props to be passed to the check Icon component\n   */\n  checkedIconProps?: Partial<IconProps>;\n  /**\n   * Optional prop for additional CSS classes to be applied to the Checkbox component.\n   * These classes will be merged with the component's default classes using twMerge.\n   */\n  className?: string;\n  /**\n   * Optional CSS styles for the outer container.\n   */\n  style?: React.CSSProperties;\n};\n"]}

package/dist/components/Checkbox/index.cjs

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+var Checkbox_1 = require("./Checkbox.cjs");
+Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return Checkbox_1.Checkbox; } });
+//# sourceMappingURL=index.cjs.map

package/dist/components/Checkbox/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/Checkbox/index.ts"],"names":[],"mappings":";;;AAAA,2CAAsC;AAA7B,oGAAA,QAAQ,OAAA","sourcesContent":["export { Checkbox } from './Checkbox';\nexport type { CheckboxProps } from './Checkbox.types';\n"]}

package/dist/components/Checkbox/index.d.cts

@@ -0,0 +1,3 @@
+export { Checkbox } from "./Checkbox.cjs";
+export type { CheckboxProps } from "./Checkbox.types.cjs";
+//# sourceMappingURL=index.d.cts.map

package/dist/components/Checkbox/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,uBAAmB;AACtC,YAAY,EAAE,aAAa,EAAE,6BAAyB"}

package/dist/components/Checkbox/index.d.mts

@@ -0,0 +1,3 @@
+export { Checkbox } from "./Checkbox.mjs";
+export type { CheckboxProps } from "./Checkbox.types.mjs";
+//# sourceMappingURL=index.d.mts.map

package/dist/components/Checkbox/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/Checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,uBAAmB;AACtC,YAAY,EAAE,aAAa,EAAE,6BAAyB"}

package/dist/components/Checkbox/index.mjs

@@ -0,0 +1,2 @@
+export { Checkbox } from "./Checkbox.mjs";
+//# sourceMappingURL=index.mjs.map

package/dist/components/Checkbox/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/Checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,uBAAmB","sourcesContent":["export { Checkbox } from './Checkbox';\nexport type { CheckboxProps } from './Checkbox.types';\n"]}

package/dist/components/Icon/Icon.cjs

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icon = void 0;
+const react_1 = __importDefault(require("react"));
+const types_1 = require("../../types/index.cjs");
+const tw_merge_1 = require("../../utils/tw-merge.cjs");
+const Icon_constants_1 = require("./Icon.constants.cjs");
+const icons_1 = require("./icons/index.cjs");
+const Icon = ({ name, size = types_1.IconSize.Md, color = types_1.IconColor.IconDefault, className, style, ...props }) => {
+    if (!name) {
+        console.warn('Icon name is required');
+        return null;
+    }
+    const IconComponent = icons_1.Icons[name];
+    if (!IconComponent) {
+        console.warn(`Icon "${name}" not found`);
+        return null;
+    }
+    const mergedClassName = (0, tw_merge_1.twMerge)('inline-block', Icon_constants_1.ICON_SIZE_CLASS_MAP[size], color, className);
+    return (react_1.default.createElement(IconComponent, { className: mergedClassName, ...props, style: style }));
+};
+exports.Icon = Icon;
+//# sourceMappingURL=Icon.cjs.map

package/dist/components/Icon/Icon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.cjs","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,iDAAkD;AAClD,uDAA+C;AAE/C,yDAAuD;AAEvD,6CAAgC;AAEzB,MAAM,IAAI,GAAwB,CAAC,EACxC,IAAI,EACJ,IAAI,GAAG,gBAAQ,CAAC,EAAE,EAClB,KAAK,GAAG,iBAAS,CAAC,WAAW,EAC7B,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;QACtC,OAAO,IAAI,CAAC;KACb;IAED,MAAM,aAAa,GAAG,aAAK,CAAC,IAAI,CAAC,CAAC;IAElC,IAAI,CAAC,aAAa,EAAE;QAClB,OAAO,CAAC,IAAI,CAAC,SAAS,IAAI,aAAa,CAAC,CAAC;QACzC,OAAO,IAAI,CAAC;KACb;IAED,MAAM,eAAe,GAAG,IAAA,kBAAO,EAC7B,cAAc,EACd,oCAAmB,CAAC,IAAI,CAAC,EACzB,KAAK,EACL,SAAS,CACV,CAAC;IAEF,OAAO,CACL,8BAAC,aAAa,IACZ,SAAS,EAAE,eAAe,KACrB,KAAuC,EAC5C,KAAK,EAAE,KAAK,GACZ,CACH,CAAC;AACJ,CAAC,CAAC;AAlCW,QAAA,IAAI,QAkCf","sourcesContent":["import React from 'react';\n\nimport { IconSize, IconColor } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\n\nimport { ICON_SIZE_CLASS_MAP } from './Icon.constants';\nimport type { IconProps } from './Icon.types';\nimport { Icons } from './icons';\n\nexport const Icon: React.FC<IconProps> = ({\n  name,\n  size = IconSize.Md,\n  color = IconColor.IconDefault,\n  className,\n  style,\n  ...props\n}) => {\n  if (!name) {\n    console.warn('Icon name is required');\n    return null;\n  }\n\n  const IconComponent = Icons[name];\n\n  if (!IconComponent) {\n    console.warn(`Icon \"${name}\" not found`);\n    return null;\n  }\n\n  const mergedClassName = twMerge(\n    'inline-block',\n    ICON_SIZE_CLASS_MAP[size],\n    color,\n    className,\n  );\n\n  return (\n    <IconComponent\n      className={mergedClassName}\n      {...(props as React.SVGProps<SVGSVGElement>)}\n      style={style}\n    />\n  );\n};\n"]}

package/dist/components/Icon/Icon.constants.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ICON_SIZE_CLASS_MAP = void 0;
+const types_1 = require("../../types/index.cjs");
+exports.ICON_SIZE_CLASS_MAP = {
+    [types_1.IconSize.Xs]: 'w-3 h-3',
+    [types_1.IconSize.Sm]: 'w-4 h-4',
+    [types_1.IconSize.Md]: 'w-5 h-5',
+    [types_1.IconSize.Lg]: 'w-6 h-6',
+    [types_1.IconSize.Xl]: 'w-8 h-8', // 32px
+};
+//# sourceMappingURL=Icon.constants.cjs.map

package/dist/components/Icon/Icon.constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.constants.cjs","sourceRoot":"","sources":["../../../src/components/Icon/Icon.constants.ts"],"names":[],"mappings":";;;AAAA,iDAAuC;AAE1B,QAAA,mBAAmB,GAA6B;IAC3D,CAAC,gBAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,gBAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,gBAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,gBAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,gBAAQ,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO;CAClC,CAAC","sourcesContent":["import { IconSize } from '../../types';\n\nexport const ICON_SIZE_CLASS_MAP: Record<IconSize, string> = {\n  [IconSize.Xs]: 'w-3 h-3', // 12px\n  [IconSize.Sm]: 'w-4 h-4', // 16px\n  [IconSize.Md]: 'w-5 h-5', // 20px\n  [IconSize.Lg]: 'w-6 h-6', // 24px\n  [IconSize.Xl]: 'w-8 h-8', // 32px\n};\n"]}

package/dist/components/Icon/Icon.constants.d.cts

@@ -0,0 +1,3 @@
+import { IconSize } from "../../types/index.cjs";
+export declare const ICON_SIZE_CLASS_MAP: Record<IconSize, string>;
+//# sourceMappingURL=Icon.constants.d.cts.map

package/dist/components/Icon/Icon.constants.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.constants.d.cts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,8BAAoB;AAEvC,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAMxD,CAAC"}

package/dist/components/Icon/Icon.constants.d.mts

@@ -0,0 +1,3 @@
+import { IconSize } from "../../types/index.mjs";
+export declare const ICON_SIZE_CLASS_MAP: Record<IconSize, string>;
+//# sourceMappingURL=Icon.constants.d.mts.map

package/dist/components/Icon/Icon.constants.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.constants.d.mts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,8BAAoB;AAEvC,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAMxD,CAAC"}

package/dist/components/Icon/Icon.constants.mjs

@@ -0,0 +1,9 @@
+import { IconSize } from "../../types/index.mjs";
+export const ICON_SIZE_CLASS_MAP = {
+    [IconSize.Xs]: 'w-3 h-3',
+    [IconSize.Sm]: 'w-4 h-4',
+    [IconSize.Md]: 'w-5 h-5',
+    [IconSize.Lg]: 'w-6 h-6',
+    [IconSize.Xl]: 'w-8 h-8', // 32px
+};
+//# sourceMappingURL=Icon.constants.mjs.map

package/dist/components/Icon/Icon.constants.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.constants.mjs","sourceRoot":"","sources":["../../../src/components/Icon/Icon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,8BAAoB;AAEvC,MAAM,CAAC,MAAM,mBAAmB,GAA6B;IAC3D,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO;CAClC,CAAC","sourcesContent":["import { IconSize } from '../../types';\n\nexport const ICON_SIZE_CLASS_MAP: Record<IconSize, string> = {\n  [IconSize.Xs]: 'w-3 h-3', // 12px\n  [IconSize.Sm]: 'w-4 h-4', // 16px\n  [IconSize.Md]: 'w-5 h-5', // 20px\n  [IconSize.Lg]: 'w-6 h-6', // 24px\n  [IconSize.Xl]: 'w-8 h-8', // 32px\n};\n"]}

package/dist/components/Icon/Icon.d.cts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { IconProps } from "./Icon.types.cjs";
+export declare const Icon: React.FC<IconProps>;
+//# sourceMappingURL=Icon.d.cts.map

package/dist/components/Icon/Icon.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.cts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc;AAM1B,OAAO,KAAK,EAAE,SAAS,EAAE,yBAAqB;AAG9C,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAkCpC,CAAC"}

package/dist/components/Icon/Icon.d.mts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { IconProps } from "./Icon.types.mjs";
+export declare const Icon: React.FC<IconProps>;
+//# sourceMappingURL=Icon.d.mts.map

package/dist/components/Icon/Icon.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.mts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc;AAM1B,OAAO,KAAK,EAAE,SAAS,EAAE,yBAAqB;AAG9C,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAkCpC,CAAC"}

package/dist/components/Icon/Icon.mjs

@@ -0,0 +1,26 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+import $React from "react";
+const React = $importDefault($React);
+import { IconSize, IconColor } from "../../types/index.mjs";
+import { twMerge } from "../../utils/tw-merge.mjs";
+import { ICON_SIZE_CLASS_MAP } from "./Icon.constants.mjs";
+import { Icons } from "./icons/index.mjs";
+export const Icon = ({ name, size = IconSize.Md, color = IconColor.IconDefault, className, style, ...props }) => {
+    if (!name) {
+        console.warn('Icon name is required');
+        return null;
+    }
+    const IconComponent = Icons[name];
+    if (!IconComponent) {
+        console.warn(`Icon "${name}" not found`);
+        return null;
+    }
+    const mergedClassName = twMerge('inline-block', ICON_SIZE_CLASS_MAP[size], color, className);
+    return (React.createElement(IconComponent, { className: mergedClassName, ...props, style: style }));
+};
+//# sourceMappingURL=Icon.mjs.map

package/dist/components/Icon/Icon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.mjs","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,8BAAoB;AAClD,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAE/C,OAAO,EAAE,mBAAmB,EAAE,6BAAyB;AAEvD,OAAO,EAAE,KAAK,EAAE,0BAAgB;AAEhC,MAAM,CAAC,MAAM,IAAI,GAAwB,CAAC,EACxC,IAAI,EACJ,IAAI,GAAG,QAAQ,CAAC,EAAE,EAClB,KAAK,GAAG,SAAS,CAAC,WAAW,EAC7B,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;QACtC,OAAO,IAAI,CAAC;KACb;IAED,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;IAElC,IAAI,CAAC,aAAa,EAAE;QAClB,OAAO,CAAC,IAAI,CAAC,SAAS,IAAI,aAAa,CAAC,CAAC;QACzC,OAAO,IAAI,CAAC;KACb;IAED,MAAM,eAAe,GAAG,OAAO,CAC7B,cAAc,EACd,mBAAmB,CAAC,IAAI,CAAC,EACzB,KAAK,EACL,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,aAAa,IACZ,SAAS,EAAE,eAAe,KACrB,KAAuC,EAC5C,KAAK,EAAE,KAAK,GACZ,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { IconSize, IconColor } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\n\nimport { ICON_SIZE_CLASS_MAP } from './Icon.constants';\nimport type { IconProps } from './Icon.types';\nimport { Icons } from './icons';\n\nexport const Icon: React.FC<IconProps> = ({\n  name,\n  size = IconSize.Md,\n  color = IconColor.IconDefault,\n  className,\n  style,\n  ...props\n}) => {\n  if (!name) {\n    console.warn('Icon name is required');\n    return null;\n  }\n\n  const IconComponent = Icons[name];\n\n  if (!IconComponent) {\n    console.warn(`Icon \"${name}\" not found`);\n    return null;\n  }\n\n  const mergedClassName = twMerge(\n    'inline-block',\n    ICON_SIZE_CLASS_MAP[size],\n    color,\n    className,\n  );\n\n  return (\n    <IconComponent\n      className={mergedClassName}\n      {...(props as React.SVGProps<SVGSVGElement>)}\n      style={style}\n    />\n  );\n};\n"]}

package/dist/components/Icon/Icon.types.cjs

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=Icon.types.cjs.map

package/dist/components/Icon/Icon.types.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.types.cjs","sourceRoot":"","sources":["../../../src/components/Icon/Icon.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { SVGProps, ComponentPropsWithoutRef } from 'react';\n\nimport type { IconName, IconSize, IconColor } from '../../types';\n\n// Use ComponentPropsWithoutRef to get SVG element props without relying on global SVGElement\ntype SVGElementProps = ComponentPropsWithoutRef<'svg'>;\n\nexport type IconProps = SVGProps<SVGElementProps> & {\n  /**\n   * Required prop to specify which icon to render from the icon set\n   */\n  name: IconName;\n  /**\n   * Optional prop to control the size of the icon\n   * Different sizes map to specific pixel dimensions\n   *\n   * @default IconSize.Md\n   */\n  size?: IconSize;\n  /**\n   * Optional prop that sets the color of the icon using predefined theme colors\n   *\n   * @default IconColor.IconDefault\n   */\n  color?: IconColor;\n  /**\n   * Additional CSS classes to be added to the component.\n   * These classes will be merged with the component's default classes using twMerge.\n   */\n  className?: string;\n  /**\n   * Optional CSS styles to be applied to the component.\n   * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n   */\n  style?: React.CSSProperties;\n  /**\n   * Optional prop to add a test id to the icon\n   */\n  'data-testid'?: string;\n};\n"]}

package/dist/components/Icon/Icon.types.d.cts

@@ -0,0 +1,38 @@
+import type { SVGProps, ComponentPropsWithoutRef } from "react";
+import type { IconName, IconSize, IconColor } from "../../types/index.cjs";
+type SVGElementProps = ComponentPropsWithoutRef<'svg'>;
+export type IconProps = SVGProps<SVGElementProps> & {
+    /**
+     * Required prop to specify which icon to render from the icon set
+     */
+    name: IconName;
+    /**
+     * Optional prop to control the size of the icon
+     * Different sizes map to specific pixel dimensions
+     *
+     * @default IconSize.Md
+     */
+    size?: IconSize;
+    /**
+     * Optional prop that sets the color of the icon using predefined theme colors
+     *
+     * @default IconColor.IconDefault
+     */
+    color?: IconColor;
+    /**
+     * Additional CSS classes to be added to the component.
+     * These classes will be merged with the component's default classes using twMerge.
+     */
+    className?: string;
+    /**
+     * Optional CSS styles to be applied to the component.
+     * Should be used sparingly and only for dynamic styles that can't be achieved with className.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Optional prop to add a test id to the icon
+     */
+    'data-testid'?: string;
+};
+export {};
+//# sourceMappingURL=Icon.types.d.cts.map

package/dist/components/Icon/Icon.types.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.types.d.cts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,wBAAwB,EAAE,cAAc;AAEhE,OAAO,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,8BAAoB;AAGjE,KAAK,eAAe,GAAG,wBAAwB,CAAC,KAAK,CAAC,CAAC;AAEvD,MAAM,MAAM,SAAS,GAAG,QAAQ,CAAC,eAAe,CAAC,GAAG;IAClD;;OAEG;IACH,IAAI,EAAE,QAAQ,CAAC;IACf;;;;;OAKG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC"}