se-design 0.0.105 → 0.0.106

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,3 +1,24 @@
1
1
  import { default as React } from 'react';
2
- import { ToggleProps } from './Toggle.types';
2
+ export interface ToggleProps {
3
+ /**
4
+ * Callback when the toggle is toggled. The parent is responsible for updating the checked state.
5
+ */
6
+ onToggle?: (checked: boolean) => void;
7
+ /**
8
+ * The controlled state of the toggle.
9
+ */
10
+ checked: boolean;
11
+ /**
12
+ * Optional disabled state
13
+ */
14
+ disabled?: boolean;
15
+ /**
16
+ * Optional label
17
+ */
18
+ label?: string;
19
+ /**
20
+ * Position of the label
21
+ */
22
+ labelPosition?: 'left' | 'right';
23
+ }
3
24
  export declare const Toggle: React.FC<ToggleProps>;
package/dist/index29.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import e, { useState as m, useEffect as c } from "react";
2
2
  import { Icon as d } from "./index4.js";
3
- const h = ({
4
- title: r,
5
- content: i,
3
+ const E = ({
4
+ title: i,
5
+ content: r,
6
6
  defaultOpen: a,
7
7
  overflow: o,
8
8
  titleClassName: s = "",
@@ -11,7 +11,7 @@ const h = ({
11
11
  const [t, n] = m(!1);
12
12
  return c(() => {
13
13
  n(a || !1);
14
- }, [a]), /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", {
14
+ }, [a]), /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement("div", {
15
15
  className: "flex items-center cursor-pointer max-w-[50vw]",
16
16
  onClick: () => n(!t)
17
17
  }, /* @__PURE__ */ e.createElement("div", {
@@ -20,7 +20,7 @@ const h = ({
20
20
  name: "rightSide"
21
21
  })), /* @__PURE__ */ e.createElement("h4", {
22
22
  className: `text-[#1B2636] font-inter text-[18px] font-semibold leading-[24px] ${s}`
23
- }, r)), /* @__PURE__ */ e.createElement("div", {
23
+ }, i)), /* @__PURE__ */ e.createElement("div", {
24
24
  className: `
25
25
  overflow-${o || "hidden"}
26
26
  transition-all
@@ -28,11 +28,11 @@ const h = ({
28
28
  ml-1
29
29
  mt-[1vw]
30
30
  ${t ? "max-h-[1000vh] opacity-100 visible h-auto" : "max-h-0 opacity-0 invisible h-0"}`
31
- }, i), l && /* @__PURE__ */ e.createElement("div", {
31
+ }, r), l && /* @__PURE__ */ e.createElement("div", {
32
32
  className: `h-[1px] bg-[#E5E7EB] ${t ? "hidden" : "block"}`
33
33
  }));
34
34
  };
35
35
  export {
36
- h as Accordion
36
+ E as Accordion
37
37
  };
38
38
  //# sourceMappingURL=index29.js.map
@@ -1 +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;"}
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 <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 CHANGED
@@ -1,32 +1,41 @@
1
- import r, { useState as s, useEffect as n } from "react";
2
- const g = ({
3
- initialState: o,
4
- onToggle: t,
5
- disabled: a
1
+ import e from "react";
2
+ const m = ({
3
+ checked: a = !1,
4
+ onToggle: n = () => {
5
+ },
6
+ disabled: t,
7
+ label: r,
8
+ labelPosition: l = "left"
6
9
  }) => {
7
- const [e, c] = s(o || !1);
8
- n(() => {
9
- c(o || !1);
10
- }, [o]);
11
- const l = () => {
12
- t && t(!e);
10
+ const s = () => {
11
+ t || n(!a);
12
+ }, o = {
13
+ disabled: "text-[var(--color-gray-600)]",
14
+ enabled: "text-[var(--color-gray-700)]"
13
15
  };
14
- return /* @__PURE__ */ r.createElement("label", {
16
+ return /* @__PURE__ */ e.createElement("div", {
17
+ className: "flex items-center gap-1 flex"
18
+ }, r && l === "left" && /* @__PURE__ */ e.createElement("label", {
19
+ className: `${o[t ? "disabled" : "enabled"]}`
20
+ }, r), /* @__PURE__ */ e.createElement("label", {
15
21
  className: `se-design-toggle block w-8 h-4 p-0.5 rounded-full cursor-pointer bg-[var(--color-gray-500)]
16
- ${e ? " bg-[var(--color-green-500)]" : ""}
17
- ${a ? " opacity-50 cursor-not-allowed" : ""}
22
+ ${a ? " bg-[var(--color-green-500)]" : ""}
23
+ ${t ? " opacity-50 cursor-not-allowed" : ""}
18
24
  `
19
- }, /* @__PURE__ */ r.createElement("input", {
25
+ }, /* @__PURE__ */ e.createElement("input", {
20
26
  className: "opacity-0 hidden",
21
27
  type: "checkbox",
22
- checked: e,
23
- onChange: l,
24
- disabled: a
25
- }), /* @__PURE__ */ r.createElement("span", {
26
- className: `block w-3 h-3 rounded-full bg-[var(--color-white)] transform transition-transform ${e ? "translate-x-4" : ""}`
27
- }));
28
+ checked: a,
29
+ readOnly: !0,
30
+ disabled: t,
31
+ onClick: s
32
+ }), /* @__PURE__ */ e.createElement("span", {
33
+ className: `block w-3 h-3 rounded-full bg-[var(--color-white)] transform transition-transform ${a ? "translate-x-4" : ""}`
34
+ })), r && l === "right" && /* @__PURE__ */ e.createElement("label", {
35
+ className: `text-sm ${o[t ? "disabled" : "enabled"]}`
36
+ }, r));
28
37
  };
29
38
  export {
30
- g as Toggle
39
+ m as Toggle
31
40
  };
32
41
  //# sourceMappingURL=index6.js.map
@@ -1 +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;"}
1
+ {"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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "se-design",
3
- "version": "0.0.105",
3
+ "version": "0.0.106",
4
4
  "type": "module",
5
5
  "module": "dist/index.js",
6
6
  "exports": {
@@ -1,14 +0,0 @@
1
- export interface ToggleProps {
2
- /**
3
- * Callback when the toggle is toggled
4
- */
5
- onToggle?: (checked: boolean) => void;
6
- /**
7
- * Initial state of the toggle
8
- */
9
- initialState?: boolean;
10
- /**
11
- * Optional disabled state
12
- */
13
- disabled?: boolean;
14
- }