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.
- package/dist/components/Toggle/index.d.ts +22 -1
- package/dist/index29.js +7 -7
- package/dist/index29.js.map +1 -1
- package/dist/index6.js +31 -22
- package/dist/index6.js.map +1 -1
- package/package.json +1 -1
- package/dist/components/Toggle/Toggle.types.d.ts +0 -14
@@ -1,3 +1,24 @@
|
|
1
1
|
import { default as React } from 'react';
|
2
|
-
|
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
|
4
|
-
title:
|
5
|
-
content:
|
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(
|
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
|
-
},
|
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
|
-
},
|
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
|
-
|
36
|
+
E as Accordion
|
37
37
|
};
|
38
38
|
//# sourceMappingURL=index29.js.map
|
package/dist/index29.js.map
CHANGED
@@ -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
|
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
|
2
|
-
const
|
3
|
-
|
4
|
-
onToggle:
|
5
|
-
|
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
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
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__ */
|
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
|
-
${
|
17
|
-
${
|
22
|
+
${a ? " bg-[var(--color-green-500)]" : ""}
|
23
|
+
${t ? " opacity-50 cursor-not-allowed" : ""}
|
18
24
|
`
|
19
|
-
}, /* @__PURE__ */
|
25
|
+
}, /* @__PURE__ */ e.createElement("input", {
|
20
26
|
className: "opacity-0 hidden",
|
21
27
|
type: "checkbox",
|
22
|
-
checked:
|
23
|
-
|
24
|
-
disabled:
|
25
|
-
|
26
|
-
|
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
|
-
|
39
|
+
m as Toggle
|
31
40
|
};
|
32
41
|
//# sourceMappingURL=index6.js.map
|
package/dist/index6.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index6.js","sources":["../src/components/Toggle/index.tsx"],"sourcesContent":["import React
|
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,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
|
-
}
|