@unoff/ui 1.21.0

package/dist/components/inputs/dropzone/Dropzone.js

@@ -0,0 +1,222 @@
+import '../../../assets/Dropzone.css';
+import { jsx as r, jsxs as u } from "react/jsx-runtime";
+import D from "react";
+import g from "../../dialogs/semantic-message/SemanticMessage.js";
+import { Icon as L } from "../../assets/icon/Icon.js";
+import d from "../../actions/button/Button.js";
+import { t as y } from "../../../do-classnames-DSDFCvzy.js";
+class V extends D.Component {
+  stopLoading;
+  static defaultProps = {
+    acceptedMimeTypes: ["image/jpeg", "image/png", "application/pdf"],
+    isLoading: !1,
+    isDisabled: !1,
+    isNew: !1,
+    isBlocked: !1
+  };
+  constructor(e) {
+    super(e), this.state = {
+      status: "READY",
+      isLoading: e.isLoading || !1,
+      isDraggedOver: !1,
+      blackList: []
+    }, this.stopLoading = void 0;
+  }
+  // Lifecycle
+  componentDidUpdate = (e) => {
+    const { isLoading: i } = this.props;
+    i !== e.isLoading && i ? (this.setState({
+      isLoading: !0
+    }), this.stopLoading = setTimeout(
+      () => {
+        this.setState({
+          isLoading: !1
+        });
+      },
+      120 * 1e3
+    )) : i !== e.isLoading && !i && (clearTimeout(this.stopLoading), this.setState({
+      isLoading: !1
+    }));
+  };
+  // Direct Actions
+  onImport = (e, i) => {
+    const { onImportFiles: o } = this.props, a = [];
+    e.forEach((t) => {
+      const s = new FileReader();
+      s.onload = (n) => {
+        const p = n.target?.result;
+        a.push({ name: t.name, content: p }), a.length === e.length && i.length === 0 ? (o(a), this.setState({
+          status: "READY"
+        })) : a.length === e.length && i.length > 0 && (o(a), this.setState({
+          status: "WARNING"
+        }));
+      }, t.type.startsWith("image/png") || t.type === "application/pdf" ? s.readAsArrayBuffer(t) : s.readAsText(t);
+    });
+  };
+  onValidFilesViaButton = () => {
+    const { acceptedMimeTypes: e, isMultiple: i } = this.props;
+    this.setState({
+      isDraggedOver: !1
+    });
+    const o = document.createElement("input");
+    o.type = "file", o.accept = e.join(","), o.multiple = i, o.onchange = (a) => {
+      this.setState({
+        status: "WAITING",
+        isLoading: !0
+      });
+      const s = a.target.files;
+      this.onImport(Array.from(s || []), []);
+    }, o.click(), o.remove();
+  };
+  onValidFilesViaDrop = (e) => {
+    const { acceptedMimeTypes: i, isMultiple: o } = this.props;
+    e.preventDefault(), this.setState({
+      status: "WAITING",
+      isLoading: !0,
+      isDraggedOver: !1
+    });
+    let a = Array.from(e.dataTransfer.files).filter(
+      (s) => i.includes(s.type)
+    ), t = Array.from(e.dataTransfer.files).filter(
+      (s) => !i.includes(s.type)
+    );
+    !o && a.length > 1 && (t = t.concat(a.slice(1)), a = a.slice(0, 1)), this.setState({
+      blackList: t.map((s) => s.name)
+    }), a.length > 0 ? this.onImport(a, t) : this.setState({
+      status: "ERROR",
+      isLoading: !1
+    });
+  };
+  onDragOver = (e) => {
+    e.preventDefault(), this.setState({
+      isDraggedOver: !0
+    });
+  };
+  onDragEnter = (e) => {
+    e.preventDefault(), this.setState({
+      isDraggedOver: !0
+    });
+  };
+  onDragLeave = (e) => {
+    e.preventDefault(), this.setState({
+      isDraggedOver: !1
+    });
+  };
+  render() {
+    const {
+      message: e,
+      warningMessage: i,
+      errorMessage: o,
+      cta: a,
+      isDisabled: t,
+      isBlocked: s,
+      isNew: n
+    } = this.props, { status: p, isLoading: c, isDraggedOver: f, blackList: m } = this.state;
+    let l;
+    switch (p) {
+      case "READY": {
+        l = /* @__PURE__ */ r(
+          g,
+          {
+            type: "NEUTRAL",
+            message: e,
+            orientation: "VERTICAL",
+            actionsSlot: /* @__PURE__ */ r(
+              d,
+              {
+                type: "primary",
+                label: a,
+                isBlocked: s,
+                isDisabled: t,
+                isNew: n,
+                action: () => !(s || t) && this.onValidFilesViaButton()
+              }
+            )
+          }
+        );
+        break;
+      }
+      case "WAITING": {
+        l = null;
+        break;
+      }
+      case "WARNING": {
+        l = /* @__PURE__ */ r(
+          g,
+          {
+            type: "WARNING",
+            message: i.replace(
+              "$1",
+              m.map((h) => `"${h}"`).join(", ")
+            ),
+            orientation: "VERTICAL",
+            actionsSlot: /* @__PURE__ */ r(
+              d,
+              {
+                type: "primary",
+                label: a,
+                isBlocked: s,
+                isDisabled: t,
+                isNew: n,
+                action: () => !(s || t) && this.onValidFilesViaButton()
+              }
+            )
+          }
+        );
+        break;
+      }
+      case "ERROR": {
+        l = /* @__PURE__ */ r(
+          g,
+          {
+            type: "ERROR",
+            message: o,
+            orientation: "VERTICAL",
+            actionsSlot: /* @__PURE__ */ r(
+              d,
+              {
+                type: "primary",
+                label: a,
+                isBlocked: s,
+                isDisabled: t,
+                isNew: n,
+                action: () => !(s || t) && this.onValidFilesViaButton()
+              }
+            )
+          }
+        );
+        break;
+      }
+    }
+    return /* @__PURE__ */ u(
+      "div",
+      {
+        className: y([
+          "dropzone",
+          f && "dropzone--dragged-over",
+          (s || t) && "dropzone--disabled"
+        ]),
+        role: "region",
+        "aria-disabled": t || s,
+        onDragOver: this.onDragOver,
+        onDragEnter: this.onDragEnter,
+        onDragLeave: this.onDragLeave,
+        onDrop: this.onValidFilesViaDrop,
+        children: [
+          c && /* @__PURE__ */ r(
+            L,
+            {
+              type: "PICTO",
+              iconName: "spinner"
+            }
+          ),
+          l
+        ]
+      }
+    );
+  }
+}
+export {
+  V as default
+};
+//# sourceMappingURL=Dropzone.js.map

package/dist/components/inputs/dropzone/Dropzone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropzone.js","sources":["../../../../src/components/inputs/dropzone/Dropzone.tsx"],"sourcesContent":["import React from 'react'\nimport SemanticMessage from '@components/dialogs/semantic-message/SemanticMessage'\nimport Icon from '@components/assets/icon/Icon'\nimport Button from '@components/actions/button/Button'\nimport { doClassnames } from '@a_ng_d/figmug-utils'\nimport './dropzone.scss'\n\ninterface FileContent {\n  name: string\n  content: string | ArrayBuffer | null | undefined\n}\n\nexport interface DropzoneProps {\n  /**\n   * Message to display in the dropzone\n   */\n  message: string\n  /**\n   * Warning message to show on invalid file type\n   */\n  warningMessage: string\n  /**\n   * Error message to show on upload failure\n   */\n  errorMessage: string\n  /**\n   * Call-to-action text for the upload button\n   */\n  cta: string\n  /**\n   * Array of accepted MIME types\n   * @default ['image/jpeg', 'image/png', 'application/pdf']\n   */\n  acceptedMimeTypes: Array<string>\n  /**\n   * Whether multiple files can be uploaded\n   */\n  isMultiple: boolean\n  /**\n   * Whether the dropzone is in loading state\n   * @default false\n   */\n  isLoading?: boolean\n  /**\n   * Whether the dropzone is disabled\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * Whether the dropzone is blocked\n   * @default false\n   */\n  isBlocked?: boolean\n  /**\n   * Whether to show a \"New\" badge\n   * @default false\n   */\n  isNew?: boolean\n  /**\n   * Callback when files are successfully imported\n   */\n  onImportFiles: (files: Array<FileContent>) => void\n}\n\nexport interface DropzoneStates {\n  status: 'READY' | 'WAITING' | 'WARNING' | 'ERROR'\n  isLoading: boolean\n  isDraggedOver: boolean\n  blackList: Array<string>\n}\n\nexport default class Dropzone extends React.Component<\n  DropzoneProps,\n  DropzoneStates\n> {\n  stopLoading: NodeJS.Timeout | undefined\n\n  static defaultProps: Partial<DropzoneProps> = {\n    acceptedMimeTypes: ['image/jpeg', 'image/png', 'application/pdf'],\n    isLoading: false,\n    isDisabled: false,\n    isNew: false,\n    isBlocked: false,\n  }\n\n  constructor(props: DropzoneProps) {\n    super(props)\n    this.state = {\n      status: 'READY',\n      isLoading: props.isLoading || false,\n      isDraggedOver: false,\n      blackList: [],\n    }\n    this.stopLoading = undefined\n  }\n\n  // Lifecycle\n  componentDidUpdate = (prevProps: Readonly<DropzoneProps>) => {\n    const { isLoading } = this.props\n\n    if (isLoading !== prevProps.isLoading && isLoading) {\n      this.setState({\n        isLoading: true,\n      })\n      this.stopLoading = setTimeout(\n        () => {\n          this.setState({\n            isLoading: false,\n          })\n        },\n        2 * 60 * 1000\n      )\n    } else if (isLoading !== prevProps.isLoading && !isLoading) {\n      clearTimeout(this.stopLoading)\n      this.setState({\n        isLoading: false,\n      })\n    }\n  }\n\n  // Direct Actions\n  onImport = (validFiles: Array<File>, unValidFiles: Array<File>) => {\n    const { onImportFiles } = this.props\n    const fileContents: Array<FileContent> = []\n\n    validFiles.forEach((file: File) => {\n      const reader = new FileReader()\n\n      reader.onload = (e) => {\n        const content = e.target?.result\n\n        fileContents.push({ name: file.name, content: content })\n\n        if (\n          fileContents.length === validFiles.length &&\n          unValidFiles.length === 0\n        ) {\n          onImportFiles(fileContents)\n          this.setState({\n            status: 'READY',\n          })\n        } else if (\n          fileContents.length === validFiles.length &&\n          unValidFiles.length > 0\n        ) {\n          onImportFiles(fileContents)\n          this.setState({\n            status: 'WARNING',\n          })\n        }\n      }\n\n      if (file.type.startsWith('image/png')) reader.readAsArrayBuffer(file)\n      else if (file.type === 'application/pdf') reader.readAsArrayBuffer(file)\n      else reader.readAsText(file)\n    })\n  }\n\n  onValidFilesViaButton = () => {\n    const { acceptedMimeTypes, isMultiple } = this.props\n\n    this.setState({\n      isDraggedOver: false,\n    })\n\n    const fileInput = document.createElement('input')\n    fileInput.type = 'file'\n    fileInput.accept = acceptedMimeTypes.join(',')\n    fileInput.multiple = isMultiple\n    fileInput.onchange = (event: Event) => {\n      this.setState({\n        status: 'WAITING',\n        isLoading: true,\n      })\n      const target = event.target as HTMLInputElement\n      const files = target.files\n      this.onImport(Array.from(files || []), [])\n    }\n    fileInput.click()\n    fileInput.remove()\n  }\n\n  onValidFilesViaDrop = (event: React.DragEvent) => {\n    const { acceptedMimeTypes, isMultiple } = this.props\n\n    event.preventDefault()\n    this.setState({\n      status: 'WAITING',\n      isLoading: true,\n      isDraggedOver: false,\n    })\n\n    let validFiles: File[] = Array.from(event.dataTransfer.files).filter(\n      (file: File) => acceptedMimeTypes.includes(file.type)\n    )\n\n    let unValidFiles: File[] = Array.from(event.dataTransfer.files).filter(\n      (file: File) => !acceptedMimeTypes.includes(file.type)\n    )\n\n    if (!isMultiple && validFiles.length > 1) {\n      unValidFiles = unValidFiles.concat(validFiles.slice(1))\n      validFiles = validFiles.slice(0, 1)\n    }\n\n    this.setState({\n      blackList: unValidFiles.map((file) => file.name),\n    })\n\n    if (validFiles.length > 0) this.onImport(validFiles, unValidFiles)\n    else\n      this.setState({\n        status: 'ERROR',\n        isLoading: false,\n      })\n  }\n\n  onDragOver = (event: React.DragEvent) => {\n    event.preventDefault()\n    this.setState({\n      isDraggedOver: true,\n    })\n  }\n\n  onDragEnter = (event: React.DragEvent) => {\n    event.preventDefault()\n    this.setState({\n      isDraggedOver: true,\n    })\n  }\n\n  onDragLeave = (event: React.DragEvent) => {\n    event.preventDefault()\n    this.setState({\n      isDraggedOver: false,\n    })\n  }\n\n  render() {\n    const {\n      message,\n      warningMessage,\n      errorMessage,\n      cta,\n      isDisabled,\n      isBlocked,\n      isNew,\n    } = this.props\n    const { status, isLoading, isDraggedOver, blackList } = this.state\n    let fragment\n\n    switch (status) {\n      case 'READY': {\n        fragment = (\n          <SemanticMessage\n            type=\"NEUTRAL\"\n            message={message}\n            orientation=\"VERTICAL\"\n            actionsSlot={\n              <Button\n                type=\"primary\"\n                label={cta}\n                isBlocked={isBlocked}\n                isDisabled={isDisabled}\n                isNew={isNew}\n                action={() =>\n                  !(isBlocked || isDisabled) && this.onValidFilesViaButton()\n                }\n              />\n            }\n          />\n        )\n        break\n      }\n      case 'WAITING': {\n        fragment = null\n        break\n      }\n      case 'WARNING': {\n        fragment = (\n          <SemanticMessage\n            type=\"WARNING\"\n            message={warningMessage.replace(\n              '$1',\n              blackList.map((item) => `\"${item}\"`).join(', ')\n            )}\n            orientation=\"VERTICAL\"\n            actionsSlot={\n              <Button\n                type=\"primary\"\n                label={cta}\n                isBlocked={isBlocked}\n                isDisabled={isDisabled}\n                isNew={isNew}\n                action={() =>\n                  !(isBlocked || isDisabled) && this.onValidFilesViaButton()\n                }\n              />\n            }\n          />\n        )\n        break\n      }\n      case 'ERROR': {\n        fragment = (\n          <SemanticMessage\n            type=\"ERROR\"\n            message={errorMessage}\n            orientation=\"VERTICAL\"\n            actionsSlot={\n              <Button\n                type=\"primary\"\n                label={cta}\n                isBlocked={isBlocked}\n                isDisabled={isDisabled}\n                isNew={isNew}\n                action={() =>\n                  !(isBlocked || isDisabled) && this.onValidFilesViaButton()\n                }\n              />\n            }\n          />\n        )\n        break\n      }\n    }\n\n    return (\n      <div\n        className={doClassnames([\n          'dropzone',\n          isDraggedOver && 'dropzone--dragged-over',\n          (isBlocked || isDisabled) && 'dropzone--disabled',\n        ])}\n        role=\"region\"\n        aria-disabled={isDisabled || isBlocked}\n        onDragOver={this.onDragOver}\n        onDragEnter={this.onDragEnter}\n        onDragLeave={this.onDragLeave}\n        onDrop={this.onValidFilesViaDrop}\n      >\n        {isLoading && (\n          <Icon\n            type=\"PICTO\"\n            iconName=\"spinner\"\n          />\n        )}\n        {fragment}\n      </div>\n    )\n  }\n}\n"],"names":["Dropzone","React","props","prevProps","isLoading","validFiles","unValidFiles","onImportFiles","fileContents","file","reader","e","content","acceptedMimeTypes","isMultiple","fileInput","event","files","message","warningMessage","errorMessage","cta","isDisabled","isBlocked","isNew","status","isDraggedOver","blackList","fragment","jsx","SemanticMessage","Button","item","jsxs","doClassnames","Icon"],"mappings":"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"}

package/dist/components/inputs/input/Input.d.ts

@@ -0,0 +1,203 @@
+import { default as React } from 'react';
+import { IconList } from '../../../types/icon.types';
+
+export interface InputProps {
+    /**
+     * HTML id attribute
+     */
+    id?: string;
+    /**
+     * Type of input
+     */
+    type: 'NUMBER' | 'COLOR' | 'TEXT' | 'LONG_TEXT' | 'CODE';
+    /**
+     * Icon configuration to display in the input
+     */
+    icon?: {
+        type: 'LETTER' | 'PICTO';
+        value: IconList;
+    };
+    /**
+     * Unit suffix to display (% or °)
+     */
+    unit?: '%' | '°';
+    /**
+     * Visual state of the input
+     * @default 'DEFAULT'
+     */
+    state?: 'DEFAULT' | 'ERROR';
+    /**
+     * Placeholder text
+     */
+    placeholder?: string;
+    /**
+     * Current value of the input
+     */
+    value: string;
+    /**
+     * Maximum number of characters allowed
+     */
+    charactersLimit?: number;
+    /**
+     * Minimum value (for NUMBER type)
+     */
+    min?: string;
+    /**
+     * Maximum value (for NUMBER type)
+     */
+    max?: string;
+    /**
+     * Step value (for NUMBER type)
+     */
+    step?: string;
+    /**
+     * Helper tooltip configuration
+     */
+    helper?: {
+        /** Tooltip content */
+        label: string | React.ReactNode;
+        /** Tooltip position */
+        pin?: 'TOP' | 'BOTTOM';
+        /** Tooltip display type */
+        type?: 'MULTI_LINE' | 'SINGLE_LINE';
+    };
+    /**
+     * Preview tooltip configuration with image
+     */
+    preview?: {
+        /** Preview image URL */
+        image: string;
+        /** Preview text */
+        text: string | React.ReactNode;
+        /** Preview position */
+        pin?: 'TOP' | 'BOTTOM';
+    };
+    /**
+     * Warning tooltip configuration
+     */
+    warning?: {
+        /** Warning message */
+        label: string | React.ReactNode;
+        /** Warning position */
+        pin?: 'TOP' | 'BOTTOM';
+        /** Warning display type */
+        type?: 'MULTI_LINE' | 'SINGLE_LINE';
+    };
+    /**
+     * Feature identifier for tracking
+     */
+    feature?: string;
+    /**
+     * Whether to blur the input after interaction
+     */
+    shouldBlur?: boolean;
+    /**
+     * Whether to auto-focus on mount
+     */
+    isAutoFocus?: boolean;
+    /**
+     * Whether the textarea should grow with content
+     */
+    isGrowing?: boolean;
+    /**
+     * Whether to use flex layout
+     */
+    isFlex?: boolean;
+    /**
+     * Whether to show a clear button
+     */
+    isClearable?: boolean;
+    /**
+     * Whether to show a frame border
+     */
+    isFramed?: boolean;
+    /**
+     * Whether the input can be empty
+     */
+    canBeEmpty?: boolean;
+    /**
+     * Whether the input is blocked
+     */
+    isBlocked?: boolean;
+    /**
+     * Whether the input is disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether to show a "New" badge
+     */
+    isNew?: boolean;
+    /**
+     * Change event handler
+     */
+    onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    /**
+     * Focus event handler
+     */
+    onFocus?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    /**
+     * Blur event handler
+     */
+    onBlur?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    /**
+     * Keyboard shift handler
+     */
+    onShift?: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    /**
+     * Clear button handler
+     */
+    onClear?: (value: string) => void;
+    /**
+     * Slider change handler (for NUMBER type)
+     */
+    onSlide?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    /**
+     * Validation handler
+     */
+    onValid?: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    /**
+     * Color picker handler (for COLOR type)
+     */
+    onPick?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    /**
+     * Handler called when unblock is clicked
+     */
+    onUnblock?: React.MouseEventHandler & React.KeyboardEventHandler;
+}
+export interface InputStates {
+    inputValue: string;
+    lastValidValue: string;
+    lastValidColorValue: string;
+    colorValue: string;
+    isTooltipVisible: boolean;
+}
+export default class Input extends React.Component<InputProps, InputStates> {
+    inputRef: React.RefObject<HTMLInputElement>;
+    textareaRef: React.RefObject<HTMLTextAreaElement>;
+    static defaultProps: Partial<InputProps>;
+    constructor(props: InputProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: InputProps): void;
+    onPickColorValue: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onChangeColorValue: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onChangeNumber: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onChangeText: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onFocus: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onBlur: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onValidText: (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onValidLongText: (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onValidNumber: (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onValidColor: (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    doClear: () => void;
+    onGrab: () => void;
+    onDrag: (e: MouseEvent) => void;
+    transformColorCode: (colorCode: string) => string;
+    Status: () => import("react/jsx-runtime").JSX.Element | undefined;
+    Color: () => import("react/jsx-runtime").JSX.Element;
+    Number: () => import("react/jsx-runtime").JSX.Element;
+    Text: () => import("react/jsx-runtime").JSX.Element;
+    LongText: () => import("react/jsx-runtime").JSX.Element;
+    CodeSnippet: () => import("react/jsx-runtime").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+//# sourceMappingURL=Input.d.ts.map

package/dist/components/inputs/input/Input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/input/Input.tsx"],"names":[],"mappings":"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"}

package/dist/components/inputs/input/Input.figma.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Input.figma.d.ts.map

package/dist/components/inputs/input/Input.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.figma.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/input/Input.figma.tsx"],"names":[],"mappings":""}

package/dist/components/inputs/input/Input.figma.js

@@ -0,0 +1,35 @@
+import { jsx as i } from "react/jsx-runtime";
+import { i as e } from "../../../index_react-CmuCVQet.js";
+import t from "./Input.js";
+e.figma.connect(
+  t,
+  "https://www.figma.com/design/QlBdsfEcaUsGBzqA20xbNi/Unoff?node-id=1:4618",
+  {
+    props: {
+      type: e.figma.enum("type", {
+        TEXT_INPUT: "TEXT",
+        TEXT_AREA: "LONG_TEXT",
+        NUMBER: "NUMBER",
+        COLOR_INPUT: "COLOR"
+      }),
+      value: e.figma.string("value"),
+      placeholder: e.figma.string("placeholder"),
+      isFramed: e.figma.boolean("hasBorder"),
+      state: e.figma.enum("state", {
+        DEFAULT: "DEFAULT",
+        ERROR: "ERROR"
+      })
+    },
+    example: (a) => /* @__PURE__ */ i(
+      t,
+      {
+        type: a.type,
+        value: a.value,
+        placeholder: a.placeholder,
+        isFramed: a.isFramed,
+        state: a.state
+      }
+    )
+  }
+);
+//# sourceMappingURL=Input.figma.js.map

package/dist/components/inputs/input/Input.figma.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.figma.js","sources":["../../../../src/components/inputs/input/Input.figma.tsx"],"sourcesContent":["import { figma } from '@figma/code-connect'\nimport Input from './Input'\n\nfigma.connect(\n  Input,\n  'https://www.figma.com/design/QlBdsfEcaUsGBzqA20xbNi/Unoff?node-id=1:4618',\n  {\n    props: {\n      type: figma.enum('type', {\n        TEXT_INPUT: 'TEXT',\n        TEXT_AREA: 'LONG_TEXT',\n        NUMBER: 'NUMBER',\n        COLOR_INPUT: 'COLOR',\n      }),\n      value: figma.string('value'),\n      placeholder: figma.string('placeholder'),\n      isFramed: figma.boolean('hasBorder'),\n      state: figma.enum('state', {\n        DEFAULT: 'DEFAULT',\n        ERROR: 'ERROR',\n      }),\n    },\n    example: (props) => (\n      <Input\n        type={props.type}\n        value={props.value}\n        placeholder={props.placeholder}\n        isFramed={props.isFramed}\n        state={props.state}\n      />\n    ),\n  }\n)\n"],"names":["figma","Input","props","jsx"],"mappings":";;;AAGAA,EAAAA,MAAM;AAAA,EACJC;AAAA,EACA;AAAA,EACA;AAAA,IACE,OAAO;AAAA,MACL,MAAMD,EAAAA,MAAM,KAAK,QAAQ;AAAA,QACvB,YAAY;AAAA,QACZ,WAAW;AAAA,QACX,QAAQ;AAAA,QACR,aAAa;AAAA,MAAA,CACd;AAAA,MACD,OAAOA,EAAAA,MAAM,OAAO,OAAO;AAAA,MAC3B,aAAaA,EAAAA,MAAM,OAAO,aAAa;AAAA,MACvC,UAAUA,EAAAA,MAAM,QAAQ,WAAW;AAAA,MACnC,OAAOA,EAAAA,MAAM,KAAK,SAAS;AAAA,QACzB,SAAS;AAAA,QACT,OAAO;AAAA,MAAA,CACR;AAAA,IAAA;AAAA,IAEH,SAAS,CAACE,MACR,gBAAAC;AAAA,MAACF;AAAA,MAAA;AAAA,QACC,MAAMC,EAAM;AAAA,QACZ,OAAOA,EAAM;AAAA,QACb,aAAaA,EAAM;AAAA,QACnB,UAAUA,EAAM;AAAA,QAChB,OAAOA,EAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EACf;AAGN;"}