se-design 0.0.105 → 0.0.106

package/dist/components/Toggle/index.d.ts

@@ -1,3 +1,24 @@
 import { default as React } from 'react';
-import { ToggleProps } from './Toggle.types';
+export interface ToggleProps {
+    /**
+     * Callback when the toggle is toggled. The parent is responsible for updating the checked state.
+     */
+    onToggle?: (checked: boolean) => void;
+    /**
+     * The controlled state of the toggle.
+     */
+    checked: boolean;
+    /**
+     * Optional disabled state
+     */
+    disabled?: boolean;
+    /**
+     * Optional label
+     */
+    label?: string;
+    /**
+     * Position of the label
+     */
+    labelPosition?: 'left' | 'right';
+}
 export declare const Toggle: React.FC<ToggleProps>;

package/dist/index29.js

@@ -1,8 +1,8 @@
 import e, { useState as m, useEffect as c } from "react";
 import { Icon as d } from "./index4.js";
-const h = ({
-  title: r,
-  content: i,
+const E = ({
+  title: i,
+  content: r,
   defaultOpen: a,
   overflow: o,
   titleClassName: s = "",
@@ -11,7 +11,7 @@ const h = ({
   const [t, n] = m(!1);
   return c(() => {
     n(a || !1);
-  }, [a]), /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", {
+  }, [a]), /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement("div", {
     className: "flex items-center cursor-pointer max-w-[50vw]",
     onClick: () => n(!t)
   }, /* @__PURE__ */ e.createElement("div", {
@@ -20,7 +20,7 @@ const h = ({
     name: "rightSide"
   })), /* @__PURE__ */ e.createElement("h4", {
     className: `text-[#1B2636] font-inter text-[18px] font-semibold leading-[24px] ${s}`
-  }, r)), /* @__PURE__ */ e.createElement("div", {
+  }, i)), /* @__PURE__ */ e.createElement("div", {
     className: `
         overflow-${o || "hidden"}
         transition-all
@@ -28,11 +28,11 @@ const h = ({
         ml-1
         mt-[1vw]
         ${t ? "max-h-[1000vh] opacity-100 visible h-auto" : "max-h-0 opacity-0 invisible h-0"}`
-  }, i), l && /* @__PURE__ */ e.createElement("div", {
+  }, r), l && /* @__PURE__ */ e.createElement("div", {
     className: `h-[1px] bg-[#E5E7EB] ${t ? "hidden" : "block"}`
   }));
 };
 export {
-  h as Accordion
+  E as Accordion
 };
 //# sourceMappingURL=index29.js.map

package/dist/index29.js.map

@@ -1 +1 @@
-{"version":3,"file":"index29.js","sources":["../src/components/Accordion/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useState } from 'react';\nimport { Icon } from '../Icon';\n\nexport interface AccordionProps {\n  title: string;\n  titleClassName?: string;\n  content: React.ReactNode;\n  defaultOpen?: boolean;\n  showSeparator?: boolean;\n  overflow?: 'hidden' | 'visible' | 'scroll' | 'auto' | undefined | string;\n}\n\nexport const Accordion: FC<AccordionProps> = ({\n  title,\n  content,\n  defaultOpen,\n  overflow,\n  titleClassName = '',\n  showSeparator = true\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  useEffect(() => {\n    setIsOpen(defaultOpen || false);\n  }, [defaultOpen]);\n  return (\n    <>\n      <div className=\"flex items-center cursor-pointer max-w-[50vw]\" onClick={() => setIsOpen(!isOpen)}>\n        <div className={`transform transition-transform duration-300 ${isOpen ? 'rotate-90' : ''}`}>\n          <Icon name=\"rightSide\" />\n        </div>\n        <h4 className={`text-[#1B2636] font-inter text-[18px] font-semibold leading-[24px] ${titleClassName}`}>\n          {title}\n        </h4>\n      </div>\n      <div\n        className={`\n        overflow-${overflow || 'hidden'}\n        transition-all\n        duration-300\n        ml-1\n        mt-[1vw]\n        ${isOpen ? 'max-h-[1000vh] opacity-100 visible h-auto' : 'max-h-0 opacity-0 invisible h-0'}`}\n      >\n        {content}\n      </div>\n      {showSeparator && <div className={`h-[1px] bg-[#E5E7EB] ${!isOpen ? 'block' : 'hidden'}`}></div>}\n    </>\n  );\n};\n"],"names":["Accordion","title","content","defaultOpen","overflow","titleClassName","showSeparator","isOpen","setIsOpen","useState","useEffect","createElement","React","Fragment","className","onClick","Icon","name"],"mappings":";;AAYO,MAAMA,IAAgCA,CAAC;AAAA,EAC5CC,OAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,gBAAAA,IAAiB;AAAA,EACjBC,eAAAA,IAAgB;AAClB,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAC1CC,SAAAA,EAAU,MAAM;AACdF,IAAAA,EAAUL,KAAe,EAAK;AAAA,EAAA,GAC7B,CAACA,CAAW,CAAC,qBAEdQ,cAAAC,EAAAC,UAAA,MACED,gBAAAA,EAAAD,cAAA,OAAA;AAAA,IAAKG,WAAU;AAAA,IAAgDC,SAASA,MAAMP,EAAU,CAACD,CAAM;AAAA,EAAA,GAC7FI,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKG,WAAW,+CAA+CP,IAAS,cAAc,EAAE;AAAA,EAAA,GACtFI,gBAAAA,EAAAA,cAACK,GAAI;AAAA,IAACC,MAAK;AAAA,EAAa,CAAA,CACrB,GACLL,gBAAAA,EAAAD,cAAA,MAAA;AAAA,IAAIG,WAAW,sEAAsET,CAAc;AAAA,KAChGJ,CACC,CACD,GACLW,gBAAAA,EAAAD,cAAA,OAAA;AAAA,IACEG,WAAW;AAAA,mBACAV,KAAY,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,UAK7BG,IAAS,8CAA8C,iCAAiC;AAAA,KAEzFL,CACE,GACJI,KAAiBM,gBAAAA,EAAAD,cAAA,OAAA;AAAA,IAAKG,WAAW,wBAAyBP,IAAmB,WAAV,OAAkB;AAAA,EAAA,CAAS,CAC/F;AAEN;"}
+{"version":3,"file":"index29.js","sources":["../src/components/Accordion/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useState } from 'react';\nimport { Icon } from '../Icon';\n\nexport interface AccordionProps {\n  title: string;\n  titleClassName?: string;\n  content: React.ReactNode;\n  defaultOpen?: boolean;\n  showSeparator?: boolean;\n  overflow?: 'hidden' | 'visible' | 'scroll' | 'auto' | undefined | string;\n}\n\nexport const Accordion: FC<AccordionProps> = ({\n  title,\n  content,\n  defaultOpen,\n  overflow,\n  titleClassName = '',\n  showSeparator = true\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  useEffect(() => {\n    setIsOpen(defaultOpen || false);\n  }, [defaultOpen]);\n  return (\n    <div>\n      <div className=\"flex items-center cursor-pointer max-w-[50vw]\" onClick={() => setIsOpen(!isOpen)}>\n        <div className={`transform transition-transform duration-300 ${isOpen ? 'rotate-90' : ''}`}>\n          <Icon name=\"rightSide\" />\n        </div>\n        <h4 className={`text-[#1B2636] font-inter text-[18px] font-semibold leading-[24px] ${titleClassName}`}>\n          {title}\n        </h4>\n      </div>\n      <div\n        className={`\n        overflow-${overflow || 'hidden'}\n        transition-all\n        duration-300\n        ml-1\n        mt-[1vw]\n        ${isOpen ? 'max-h-[1000vh] opacity-100 visible h-auto' : 'max-h-0 opacity-0 invisible h-0'}`}\n      >\n        {content}\n      </div>\n      {showSeparator && <div className={`h-[1px] bg-[#E5E7EB] ${!isOpen ? 'block' : 'hidden'}`}></div>}\n    </div>\n  );\n};\n"],"names":["Accordion","title","content","defaultOpen","overflow","titleClassName","showSeparator","isOpen","setIsOpen","useState","useEffect","createElement","React","className","onClick","Icon","name"],"mappings":";;AAYO,MAAMA,IAAgCA,CAAC;AAAA,EAC5CC,OAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,gBAAAA,IAAiB;AAAA,EACjBC,eAAAA,IAAgB;AAClB,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAC1CC,SAAAA,EAAU,MAAM;AACdF,IAAAA,EAAUL,KAAe,EAAK;AAAA,EAAA,GAC7B,CAACA,CAAW,CAAC,qBAEdQ,cACEC,OAAAA,MAAAA,gBAAAA,EAAAD,cAAA,OAAA;AAAA,IAAKE,WAAU;AAAA,IAAgDC,SAASA,MAAMN,EAAU,CAACD,CAAM;AAAA,EAAA,GAC7FI,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKE,WAAW,+CAA+CN,IAAS,cAAc,EAAE;AAAA,EAAA,GACtFI,gBAAAA,EAAAA,cAACI,GAAI;AAAA,IAACC,MAAK;AAAA,EAAa,CAAA,CACrB,GACLJ,gBAAAA,EAAAD,cAAA,MAAA;AAAA,IAAIE,WAAW,sEAAsER,CAAc;AAAA,KAChGJ,CACC,CACD,GACLW,gBAAAA,EAAAD,cAAA,OAAA;AAAA,IACEE,WAAW;AAAA,mBACAT,KAAY,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,UAK7BG,IAAS,8CAA8C,iCAAiC;AAAA,KAEzFL,CACE,GACJI,KAAiBM,gBAAAA,EAAAD,cAAA,OAAA;AAAA,IAAKE,WAAW,wBAAyBN,IAAmB,WAAV,OAAkB;AAAA,EAAA,CAAS,CAC5F;AAET;"}

package/dist/index6.js

@@ -1,32 +1,41 @@
-import r, { useState as s, useEffect as n } from "react";
-const g = ({
-  initialState: o,
-  onToggle: t,
-  disabled: a
+import e from "react";
+const m = ({
+  checked: a = !1,
+  onToggle: n = () => {
+  },
+  disabled: t,
+  label: r,
+  labelPosition: l = "left"
 }) => {
-  const [e, c] = s(o || !1);
-  n(() => {
-    c(o || !1);
-  }, [o]);
-  const l = () => {
-    t && t(!e);
+  const s = () => {
+    t || n(!a);
+  }, o = {
+    disabled: "text-[var(--color-gray-600)]",
+    enabled: "text-[var(--color-gray-700)]"
   };
-  return /* @__PURE__ */ r.createElement("label", {
+  return /* @__PURE__ */ e.createElement("div", {
+    className: "flex items-center gap-1 flex"
+  }, r && l === "left" && /* @__PURE__ */ e.createElement("label", {
+    className: `${o[t ? "disabled" : "enabled"]}`
+  }, r), /* @__PURE__ */ e.createElement("label", {
     className: `se-design-toggle block w-8 h-4 p-0.5 rounded-full cursor-pointer bg-[var(--color-gray-500)]
-        ${e ? " bg-[var(--color-green-500)]" : ""}
-        ${a ? " opacity-50 cursor-not-allowed" : ""}
+        ${a ? " bg-[var(--color-green-500)]" : ""}
+        ${t ? " opacity-50 cursor-not-allowed" : ""}
       `
-  }, /* @__PURE__ */ r.createElement("input", {
+  }, /* @__PURE__ */ e.createElement("input", {
     className: "opacity-0 hidden",
     type: "checkbox",
-    checked: e,
-    onChange: l,
-    disabled: a
-  }), /* @__PURE__ */ r.createElement("span", {
-    className: `block w-3 h-3 rounded-full bg-[var(--color-white)] transform transition-transform ${e ? "translate-x-4" : ""}`
-  }));
+    checked: a,
+    readOnly: !0,
+    disabled: t,
+    onClick: s
+  }), /* @__PURE__ */ e.createElement("span", {
+    className: `block w-3 h-3 rounded-full bg-[var(--color-white)] transform transition-transform ${a ? "translate-x-4" : ""}`
+  })), r && l === "right" && /* @__PURE__ */ e.createElement("label", {
+    className: `text-sm ${o[t ? "disabled" : "enabled"]}`
+  }, r));
 };
 export {
-  g as Toggle
+  m as Toggle
 };
 //# sourceMappingURL=index6.js.map

package/dist/index6.js.map

@@ -1 +1 @@
-{"version":3,"file":"index6.js","sources":["../src/components/Toggle/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { ToggleProps } from './Toggle.types';\n\nexport const Toggle: React.FC<ToggleProps> = ({ initialState, onToggle, disabled }) => {\n  const [checked, setChecked] = useState(initialState || false);\n\n  useEffect(() => {\n    setChecked(initialState || false);\n  }, [initialState]);\n\n  const handleToggle = () => {\n    if (onToggle) {\n      onToggle(!checked);\n    }\n  };\n\n  return (\n    <label\n      className={`se-design-toggle block w-8 h-4 p-0.5 rounded-full cursor-pointer bg-[var(--color-gray-500)]\n        ${checked ? ' bg-[var(--color-green-500)]' : ''}\n        ${disabled ? ' opacity-50 cursor-not-allowed' : ''}\n      `}\n    >\n      <input\n        className=\"opacity-0 hidden\"\n        type=\"checkbox\"\n        checked={checked}\n        onChange={handleToggle}\n        disabled={disabled}\n      />\n      <span\n        className={`block w-3 h-3 rounded-full bg-[var(--color-white)] transform transition-transform ${\n          checked ? 'translate-x-4' : ''\n        }`}\n      ></span>\n    </label>\n  );\n};\n"],"names":["Toggle","initialState","onToggle","disabled","checked","setChecked","useState","useEffect","handleToggle","React","createElement","className","type","onChange"],"mappings":";AAGO,MAAMA,IAAgCA,CAAC;AAAA,EAAEC,cAAAA;AAAAA,EAAcC,UAAAA;AAAAA,EAAUC,UAAAA;AAAS,MAAM;AACrF,QAAM,CAACC,GAASC,CAAU,IAAIC,EAASL,KAAgB,EAAK;AAE5DM,EAAAA,EAAU,MAAM;AACdF,IAAAA,EAAWJ,KAAgB,EAAK;AAAA,EAAA,GAC/B,CAACA,CAAY,CAAC;AAEjB,QAAMO,IAAeA,MAAM;AACzB,IAAIN,KACFA,EAAS,CAACE,CAAO;AAAA,EAErB;AAGEK,SAAAA,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACEC,WAAW;AAAA,UACPP,IAAU,iCAAiC,EAAE;AAAA,UAC7CD,IAAW,mCAAmC,EAAE;AAAA;AAAA,EAAA,GAGpDO,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IACEC,WAAU;AAAA,IACVC,MAAK;AAAA,IACLR,SAAAA;AAAAA,IACAS,UAAUL;AAAAA,IACVL,UAAAA;AAAAA,EAAAA,CACD,GACDO,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IACEC,WAAW,qFACTP,IAAU,kBAAkB,EAAE;AAAA,EAAA,CAE3B,CACF;AAEX;"}
+{"version":3,"file":"index6.js","sources":["../src/components/Toggle/index.tsx"],"sourcesContent":["import React from 'react';\n\nexport interface ToggleProps {\n  /**\n   * Callback when the toggle is toggled. The parent is responsible for updating the checked state.\n   */\n  onToggle?: (checked: boolean) => void;\n  /**\n   * The controlled state of the toggle.\n   */\n  checked: boolean;\n  /**\n   * Optional disabled state\n   */\n  disabled?: boolean;\n  /**\n   * Optional label\n   */\n  label?: string;\n  /**\n   * Position of the label\n   */\n  labelPosition?: 'left' | 'right';\n}\n\nexport const Toggle: React.FC<ToggleProps> = ({\n  checked = false,\n  onToggle = () => {},\n  disabled,\n  label,\n  labelPosition = 'left',\n}) => {\n\n  const handleToggle = () => {\n    if (disabled) return;\n\n    onToggle(!checked);\n  };\n\n  const labelClass = {\n    'disabled': 'text-[var(--color-gray-600)]',\n    'enabled': 'text-[var(--color-gray-700)]'\n  }\n\n  return (\n    <div className=\"flex items-center gap-1 flex\">\n      {label && labelPosition === 'left' && <label className={`${labelClass[disabled ? 'disabled' : 'enabled']}`}>{label}</label>}\n    <label\n      className={`se-design-toggle block w-8 h-4 p-0.5 rounded-full cursor-pointer bg-[var(--color-gray-500)]\n        ${checked ? ' bg-[var(--color-green-500)]' : ''}\n        ${disabled ? ' opacity-50 cursor-not-allowed' : ''}\n      `}\n    >\n      <input\n        className=\"opacity-0 hidden\"\n        type=\"checkbox\"\n        checked={checked}\n        readOnly\n        disabled={disabled}\n        onClick={handleToggle}\n      />\n      <span\n        className={`block w-3 h-3 rounded-full bg-[var(--color-white)] transform transition-transform ${\n          checked ? 'translate-x-4' : ''\n        }`}\n        ></span>\n      </label>\n      {label && labelPosition === 'right' && <label className={`text-sm ${labelClass[disabled ? 'disabled' : 'enabled']}`}>{label}</label>}\n    </div>\n  );\n};\n"],"names":["Toggle","checked","onToggle","disabled","label","labelPosition","handleToggle","labelClass","React","createElement","className","type","readOnly","onClick"],"mappings":";AAyBO,MAAMA,IAAgCA,CAAC;AAAA,EAC5CC,SAAAA,IAAU;AAAA,EACVC,UAAAA,IAAWA,MAAM;AAAA,EAAC;AAAA,EAClBC,UAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,eAAAA,IAAgB;AAClB,MAAM;AAEJ,QAAMC,IAAeA,MAAM;AACzB,IAAIH,KAEJD,EAAS,CAACD,CAAO;AAAA,EACnB,GAEMM,IAAa;AAAA,IACjB,UAAY;AAAA,IACZ,SAAW;AAAA,EACb;AAGEC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GACZN,KAASC,MAAkB,UAAUG,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IAAOC,WAAW,GAAGH,EAAWJ,IAAW,aAAa,SAAS,CAAC;AAAA,EAAKC,GAAAA,CAAa,GAC5HI,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACEC,WAAW;AAAA,UACPT,IAAU,iCAAiC,EAAE;AAAA,UAC7CE,IAAW,mCAAmC,EAAE;AAAA;AAAA,EAAA,GAGpDM,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IACEC,WAAU;AAAA,IACVC,MAAK;AAAA,IACLV,SAAAA;AAAAA,IACAW,UAAQ;AAAA,IACRT,UAAAA;AAAAA,IACAU,SAASP;AAAAA,EAAAA,CACV,GACDG,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IACEC,WAAW,qFACTT,IAAU,kBAAkB,EAAE;AAAA,EAAA,CAEzB,CACF,GACNG,KAASC,MAAkB,WAAWG,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IAAOC,WAAW,WAAWH,EAAWJ,IAAW,aAAa,SAAS,CAAC;AAAA,EAAG,GAAEC,CAAa,CAChI;AAET;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "se-design",
-  "version": "0.0.105",
+  "version": "0.0.106",
   "type": "module",
   "module": "dist/index.js",
   "exports": {

package/dist/components/Toggle/Toggle.types.d.ts

@@ -1,14 +0,0 @@
-export interface ToggleProps {
-    /**
-     * Callback when the toggle is toggled
-     */
-    onToggle?: (checked: boolean) => void;
-    /**
-     * Initial state of the toggle
-     */
-    initialState?: boolean;
-    /**
-     * Optional disabled state
-     */
-    disabled?: boolean;
-}