@dgshahr/ui-kit 0.0.6 → 0.0.7

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.
Files changed (61) hide show
  1. package/dist/Accordion/index.cjs +1 -11
  2. package/dist/Accordion/index.js +5 -1
  3. package/dist/AccordionItem-eMnIUJ1V.cjs +1 -0
  4. package/dist/AccordionItem-tKSPLNKs.js +91 -0
  5. package/dist/Alert/index.cjs +1 -254
  6. package/dist/Alert/index.js +108 -123
  7. package/dist/ArrowLeft2-B76dkC-C.cjs +1 -0
  8. package/dist/{ArrowLeft2-BURhvXT2.js → ArrowLeft2-jP2w1vwt.js} +7 -7
  9. package/dist/ArrowRight2-CYowPzS8.cjs +1 -0
  10. package/dist/{ArrowRight2-DCxJPvNC.js → ArrowRight2-CcHdxGRE.js} +7 -7
  11. package/dist/Badge/index.cjs +1 -72
  12. package/dist/Badge/index.js +28 -34
  13. package/dist/Breadcrumb/index.cjs +1 -43
  14. package/dist/Breadcrumb/index.js +20 -20
  15. package/dist/Button/index.cjs +1 -119
  16. package/dist/Button/index.js +71 -78
  17. package/dist/Divider/index.cjs +1 -25
  18. package/dist/Divider/index.js +8 -12
  19. package/dist/Form/Checkbox/index.cjs +1 -72
  20. package/dist/Form/Checkbox/index.js +22 -26
  21. package/dist/Form/Input/index.cjs +1 -182
  22. package/dist/Form/Input/index.js +60 -68
  23. package/dist/Form/RadioButton/index.cjs +1 -22
  24. package/dist/Form/RadioButton/index.js +13 -13
  25. package/dist/Form/Textarea/index.cjs +1 -27
  26. package/dist/Form/Textarea/index.js +18 -18
  27. package/dist/Pagination/index.cjs +1 -128
  28. package/dist/Pagination/index.js +82 -102
  29. package/dist/{SelectableInputWrapper-BIBVazbq.js → SelectableInputWrapper-B3ylMTsl.js} +37 -38
  30. package/dist/SelectableInputWrapper-C9x3IShC.cjs +1 -0
  31. package/dist/Slide-C506y48c.js +233 -0
  32. package/dist/Slide-Zmb0vKbn.cjs +1 -0
  33. package/dist/Slider/Navigation.d.ts +9 -0
  34. package/dist/Slider/Navigation.d.ts.map +1 -0
  35. package/dist/Slider/NavigationDot.d.ts +0 -3
  36. package/dist/Slider/NavigationDot.d.ts.map +1 -1
  37. package/dist/Slider/Slider.d.ts.map +1 -1
  38. package/dist/Slider/context.d.ts +3 -7
  39. package/dist/Slider/context.d.ts.map +1 -1
  40. package/dist/Slider/index.cjs +1 -11
  41. package/dist/Slider/index.js +5 -1
  42. package/dist/TextFieldWrapper-Cg4f8_zY.js +151 -0
  43. package/dist/TextFieldWrapper-Ci0-vx4J.cjs +1 -0
  44. package/dist/assets/Button.css +1 -1713
  45. package/dist/assets/styles.css +1 -1649
  46. package/dist/clsx-C11secjj.cjs +1 -0
  47. package/dist/clsx-OuTLNxxd.js +16 -0
  48. package/dist/index.cjs +1 -34
  49. package/dist/index.js +28 -12
  50. package/package.json +1 -1
  51. package/dist/AccordionItem-BFDuboYi.js +0 -103
  52. package/dist/AccordionItem-C3MiOBH7.cjs +0 -106
  53. package/dist/ArrowLeft2-iZ0Au6Fn.cjs +0 -24
  54. package/dist/ArrowRight2-DTuru_sP.cjs +0 -27
  55. package/dist/SelectableInputWrapper-g7YtIiBW.cjs +0 -79
  56. package/dist/Slide-BhWFQV8r.js +0 -234
  57. package/dist/Slide-BzXDEkqH.cjs +0 -237
  58. package/dist/TextFieldWrapper-BkoKcbvs.js +0 -167
  59. package/dist/TextFieldWrapper-D-DH5_DG.cjs +0 -169
  60. package/dist/clsx-BtxeOLZW.cjs +0 -5
  61. package/dist/clsx-ChV9xqsO.js +0 -3
@@ -1,234 +0,0 @@
1
- import { jsx, jsxs } from 'react/jsx-runtime';
2
- import { c as clsx } from './clsx-ChV9xqsO.js';
3
- import { createContext, useContext, useState, useEffect, useRef, Children } from 'react';
4
- import { A as ArrowLeft2Icon } from './ArrowLeft2-BURhvXT2.js';
5
- import { A as ArrowRight2Icon } from './ArrowRight2-DCxJPvNC.js';
6
- import Button from './Button/index.js';
7
-
8
- const sliderContext = createContext({
9
- slidesPerView: 1,
10
- spaceBetween: 0
11
- });
12
- const useSliderContext = () => useContext(sliderContext);
13
-
14
- function styleNavigationDot({ active, autoplay, variant }) {
15
- const variantClassName = {
16
- inside: "dgs-ui-kit-bg-gray-500/50 hover:dgs-ui-kit-bg-gray-500/80",
17
- outside: "dgs-ui-kit-bg-gray-200 hover:dgs-ui-kit-bg-gray-300"
18
- };
19
- return [
20
- variantClassName[variant],
21
- active ? "dgs-ui-kit-w-[22px]" : "dgs-ui-kit-w-[6px]",
22
- autoplay ? "dgs-ui-kit-p-[1px]" : ""
23
- ];
24
- }
25
- const NavigationDot = (props) => {
26
- const { active, autoplay, variant, onClick, onNavigateToNext } = props;
27
- const [fillPercentage, setFillPercentage] = useState(0);
28
- useEffect(() => {
29
- if (!active || !autoplay) return;
30
- const autoplayTime = typeof autoplay === "boolean" ? 7e3 : autoplay?.delay ?? 7e3;
31
- let startTime = Date.now();
32
- const autoplayInterval = setInterval(() => {
33
- const elapsed = Date.now() - startTime;
34
- const percentage = elapsed / autoplayTime * 100;
35
- setFillPercentage(Math.min(percentage, 100));
36
- if (elapsed >= autoplayTime && typeof onNavigateToNext === "function") {
37
- onNavigateToNext();
38
- }
39
- }, 100);
40
- return function cleanup() {
41
- setFillPercentage(0);
42
- startTime = Date.now();
43
- return clearInterval(autoplayInterval);
44
- };
45
- }, [active, autoplay, onNavigateToNext]);
46
- return /* @__PURE__ */ jsx(
47
- "button",
48
- {
49
- className: clsx(
50
- "dgs-ui-kit-rounded-full dgs-ui-kit-overflow-hidden dgs-ui-kit-transition-all dgs-ui-kit-h-[6px]",
51
- styleNavigationDot({ active, autoplay, variant })
52
- ),
53
- onClick,
54
- children: active && /* @__PURE__ */ jsx(
55
- "div",
56
- {
57
- className: clsx("dgs-ui-kit-h-full dgs-ui-kit-rounded-full", {
58
- "dgs-ui-kit-bg-white": variant === "inside",
59
- "dgs-ui-kit-bg-gray-700": variant === "outside"
60
- }),
61
- style: { width: autoplay ? `${fillPercentage}%` : "100%" }
62
- }
63
- )
64
- }
65
- );
66
- };
67
-
68
- const Slider = (props) => {
69
- const {
70
- className = "",
71
- containerClassName = "",
72
- showNavigationDots = true,
73
- dotsClassName = "",
74
- slidesPerView = 1,
75
- autoplay,
76
- navigationButtonsShowType = "hide",
77
- spaceBetween = 0,
78
- navigationVariant = "outside",
79
- showPaginationText = false,
80
- navigationContainerClassName = ""
81
- } = props;
82
- const [slideIndex, setSlideIndex] = useState(0);
83
- const containerRef = useRef(null);
84
- const childsCount = Children.count(props.children);
85
- const slidesCount = Math.ceil(childsCount / slidesPerView);
86
- const haveNavigation = (showNavigationDots || navigationButtonsShowType && navigationButtonsShowType !== "hide" || showPaginationText) && slidesCount > 1;
87
- function detectCarouselPosition(e) {
88
- const itemsWidth = e.currentTarget.scrollWidth / slidesCount;
89
- const position = (e.currentTarget.scrollWidth - e.currentTarget.scrollLeft) / itemsWidth;
90
- setSlideIndex(Math.round(position % slidesCount));
91
- }
92
- function navigate(target) {
93
- if (!containerRef.current) return;
94
- const slideWidth = containerRef.current.offsetWidth;
95
- let nextSlideScroll = -(slideWidth * target);
96
- if (target < 0) nextSlideScroll = -(slideWidth * slidesCount);
97
- else if (target >= slidesCount) nextSlideScroll = 0;
98
- containerRef.current.scrollTo({
99
- left: nextSlideScroll,
100
- behavior: "smooth"
101
- });
102
- }
103
- return /* @__PURE__ */ jsxs(
104
- "div",
105
- {
106
- className: clsx("dgs-ui-kit-overflow-hidden dgs-ui-kit-relative dgs-ui-kit-group", className),
107
- style: { direction: "rtl" },
108
- children: [
109
- /* @__PURE__ */ jsx(
110
- "div",
111
- {
112
- className: clsx(
113
- "dgs-ui-kit-flex dgs-ui-kit-snap-x dgs-ui-kit-snap-mandatory dgs-ui-kit-overflow-x-auto no-scrollbar",
114
- containerClassName
115
- ),
116
- style: { marginLeft: -spaceBetween },
117
- onScroll: detectCarouselPosition,
118
- ref: containerRef,
119
- children: /* @__PURE__ */ jsx(sliderContext.Provider, { value: { slidesPerView, spaceBetween }, children: props.children })
120
- }
121
- ),
122
- haveNavigation && /* @__PURE__ */ jsxs(
123
- "div",
124
- {
125
- className: clsx(
126
- "dgs-ui-kit-flex",
127
- {
128
- "dgs-ui-kit-items-center dgs-ui-kit-mt-2": navigationVariant === "outside",
129
- "dgs-ui-kit-absolute dgs-ui-kit-bottom-4 dgs-ui-kit-w-full dgs-ui-kit-justify-center": navigationVariant === "inside",
130
- "dgs-ui-kit-justify-between": navigationVariant === "outside" && navigationButtonsShowType !== "hide",
131
- "dgs-ui-kit-justify-center": navigationVariant === "outside" && navigationButtonsShowType === "hide"
132
- },
133
- navigationContainerClassName
134
- ),
135
- children: [
136
- navigationButtonsShowType && navigationButtonsShowType !== "hide" && /* @__PURE__ */ jsxs(
137
- "div",
138
- {
139
- className: clsx("dgs-ui-kit-flex dgs-ui-kit-gap-2", {
140
- "dgs-ui-kit-absolute dgs-ui-kit-bottom-0 dgs-ui-kit-left-[5.5%]": navigationVariant === "inside" && navigationButtonsShowType !== "onSides",
141
- "dgs-ui-kit-opacity-0 group-hover:dgs-ui-kit-opacity-100 dgs-ui-kit-transition": navigationButtonsShowType === "hover" || navigationButtonsShowType === "onSides",
142
- "dgs-ui-kit-fixed dgs-ui-kit-justify-between dgs-ui-kit-top-1/2 -dgs-ui-kit-translate-y-1/2 dgs-ui-kit-w-full dgs-ui-kit-px-[5.5%]": navigationVariant === "inside" && navigationButtonsShowType === "onSides"
143
- }),
144
- children: [
145
- /* @__PURE__ */ jsx(
146
- Button,
147
- {
148
- type: "button",
149
- variant: "secondary",
150
- onClick: () => navigate(slideIndex - 1),
151
- rightIcon: /* @__PURE__ */ jsx(ArrowRight2Icon, {})
152
- }
153
- ),
154
- /* @__PURE__ */ jsx(
155
- Button,
156
- {
157
- type: "button",
158
- variant: "secondary",
159
- onClick: () => navigate(slideIndex + 1),
160
- rightIcon: /* @__PURE__ */ jsx(ArrowLeft2Icon, {})
161
- }
162
- )
163
- ]
164
- }
165
- ),
166
- (showNavigationDots || showPaginationText) && /* @__PURE__ */ jsxs("div", { className: "dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-gap-3", children: [
167
- showPaginationText && /* @__PURE__ */ jsxs("div", { className: "dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-gap-1 dgs-ui-kit-font-caption-regular dgs-ui-kit-text-gray-400 ss02", children: [
168
- /* @__PURE__ */ jsx(
169
- "span",
170
- {
171
- className: clsx("dgs-ui-kit-font-bold", {
172
- "dgs-ui-kit-text-gray-600": navigationVariant === "outside",
173
- "dgs-ui-kit-text-white": navigationVariant === "inside"
174
- }),
175
- children: slideIndex + 1
176
- }
177
- ),
178
- /* @__PURE__ */ jsx("span", { children: "از" }),
179
- /* @__PURE__ */ jsx("span", { children: slidesCount })
180
- ] }),
181
- showNavigationDots && /* @__PURE__ */ jsx(
182
- "div",
183
- {
184
- className: clsx(
185
- "dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-justify-center dgs-ui-kit-gap-2",
186
- dotsClassName
187
- ),
188
- children: Array.from(Array(slidesCount).keys()).map((item, index) => /* @__PURE__ */ jsx(
189
- NavigationDot,
190
- {
191
- active: slideIndex === index,
192
- autoplay: autoplay ?? false,
193
- variant: navigationVariant,
194
- onClick: () => navigate(index),
195
- onNavigateToNext: () => navigate(slideIndex + 1)
196
- },
197
- item + slidesCount
198
- ))
199
- }
200
- )
201
- ] })
202
- ]
203
- }
204
- )
205
- ]
206
- }
207
- );
208
- };
209
-
210
- const Slide = (props) => {
211
- const { children, className } = props;
212
- const { slidesPerView, spaceBetween } = useSliderContext();
213
- const ref = useRef(null);
214
- const [childIndex, setChildIndex] = useState(0);
215
- useEffect(() => {
216
- if (!ref.current) return;
217
- setChildIndex(Array.prototype.indexOf.call(ref.current.parentNode?.children, ref.current));
218
- }, [ref]);
219
- return /* @__PURE__ */ jsx(
220
- "div",
221
- {
222
- ref,
223
- className: clsx("dgs-ui-kit-shrink-0 dgs-ui-kit-snap-always", className),
224
- style: {
225
- width: 100 / (slidesPerView ?? 1) + "%",
226
- paddingLeft: spaceBetween,
227
- scrollSnapAlign: childIndex % slidesPerView === 0 ? "start" : "none"
228
- },
229
- children
230
- }
231
- );
232
- };
233
-
234
- export { Slider as S, Slide as a };
@@ -1,237 +0,0 @@
1
- 'use strict';
2
-
3
- const jsxRuntime = require('react/jsx-runtime');
4
- const clsx = require('./clsx-BtxeOLZW.cjs');
5
- const react = require('react');
6
- const ArrowLeft2 = require('./ArrowLeft2-iZ0Au6Fn.cjs');
7
- const ArrowRight2 = require('./ArrowRight2-DTuru_sP.cjs');
8
- const Button = require('./Button/index.cjs');
9
-
10
- const sliderContext = react.createContext({
11
- slidesPerView: 1,
12
- spaceBetween: 0
13
- });
14
- const useSliderContext = () => react.useContext(sliderContext);
15
-
16
- function styleNavigationDot({ active, autoplay, variant }) {
17
- const variantClassName = {
18
- inside: "dgs-ui-kit-bg-gray-500/50 hover:dgs-ui-kit-bg-gray-500/80",
19
- outside: "dgs-ui-kit-bg-gray-200 hover:dgs-ui-kit-bg-gray-300"
20
- };
21
- return [
22
- variantClassName[variant],
23
- active ? "dgs-ui-kit-w-[22px]" : "dgs-ui-kit-w-[6px]",
24
- autoplay ? "dgs-ui-kit-p-[1px]" : ""
25
- ];
26
- }
27
- const NavigationDot = (props) => {
28
- const { active, autoplay, variant, onClick, onNavigateToNext } = props;
29
- const [fillPercentage, setFillPercentage] = react.useState(0);
30
- react.useEffect(() => {
31
- if (!active || !autoplay) return;
32
- const autoplayTime = typeof autoplay === "boolean" ? 7e3 : autoplay?.delay ?? 7e3;
33
- let startTime = Date.now();
34
- const autoplayInterval = setInterval(() => {
35
- const elapsed = Date.now() - startTime;
36
- const percentage = elapsed / autoplayTime * 100;
37
- setFillPercentage(Math.min(percentage, 100));
38
- if (elapsed >= autoplayTime && typeof onNavigateToNext === "function") {
39
- onNavigateToNext();
40
- }
41
- }, 100);
42
- return function cleanup() {
43
- setFillPercentage(0);
44
- startTime = Date.now();
45
- return clearInterval(autoplayInterval);
46
- };
47
- }, [active, autoplay, onNavigateToNext]);
48
- return /* @__PURE__ */ jsxRuntime.jsx(
49
- "button",
50
- {
51
- className: clsx.clsx(
52
- "dgs-ui-kit-rounded-full dgs-ui-kit-overflow-hidden dgs-ui-kit-transition-all dgs-ui-kit-h-[6px]",
53
- styleNavigationDot({ active, autoplay, variant })
54
- ),
55
- onClick,
56
- children: active && /* @__PURE__ */ jsxRuntime.jsx(
57
- "div",
58
- {
59
- className: clsx.clsx("dgs-ui-kit-h-full dgs-ui-kit-rounded-full", {
60
- "dgs-ui-kit-bg-white": variant === "inside",
61
- "dgs-ui-kit-bg-gray-700": variant === "outside"
62
- }),
63
- style: { width: autoplay ? `${fillPercentage}%` : "100%" }
64
- }
65
- )
66
- }
67
- );
68
- };
69
-
70
- const Slider = (props) => {
71
- const {
72
- className = "",
73
- containerClassName = "",
74
- showNavigationDots = true,
75
- dotsClassName = "",
76
- slidesPerView = 1,
77
- autoplay,
78
- navigationButtonsShowType = "hide",
79
- spaceBetween = 0,
80
- navigationVariant = "outside",
81
- showPaginationText = false,
82
- navigationContainerClassName = ""
83
- } = props;
84
- const [slideIndex, setSlideIndex] = react.useState(0);
85
- const containerRef = react.useRef(null);
86
- const childsCount = react.Children.count(props.children);
87
- const slidesCount = Math.ceil(childsCount / slidesPerView);
88
- const haveNavigation = (showNavigationDots || navigationButtonsShowType && navigationButtonsShowType !== "hide" || showPaginationText) && slidesCount > 1;
89
- function detectCarouselPosition(e) {
90
- const itemsWidth = e.currentTarget.scrollWidth / slidesCount;
91
- const position = (e.currentTarget.scrollWidth - e.currentTarget.scrollLeft) / itemsWidth;
92
- setSlideIndex(Math.round(position % slidesCount));
93
- }
94
- function navigate(target) {
95
- if (!containerRef.current) return;
96
- const slideWidth = containerRef.current.offsetWidth;
97
- let nextSlideScroll = -(slideWidth * target);
98
- if (target < 0) nextSlideScroll = -(slideWidth * slidesCount);
99
- else if (target >= slidesCount) nextSlideScroll = 0;
100
- containerRef.current.scrollTo({
101
- left: nextSlideScroll,
102
- behavior: "smooth"
103
- });
104
- }
105
- return /* @__PURE__ */ jsxRuntime.jsxs(
106
- "div",
107
- {
108
- className: clsx.clsx("dgs-ui-kit-overflow-hidden dgs-ui-kit-relative dgs-ui-kit-group", className),
109
- style: { direction: "rtl" },
110
- children: [
111
- /* @__PURE__ */ jsxRuntime.jsx(
112
- "div",
113
- {
114
- className: clsx.clsx(
115
- "dgs-ui-kit-flex dgs-ui-kit-snap-x dgs-ui-kit-snap-mandatory dgs-ui-kit-overflow-x-auto no-scrollbar",
116
- containerClassName
117
- ),
118
- style: { marginLeft: -spaceBetween },
119
- onScroll: detectCarouselPosition,
120
- ref: containerRef,
121
- children: /* @__PURE__ */ jsxRuntime.jsx(sliderContext.Provider, { value: { slidesPerView, spaceBetween }, children: props.children })
122
- }
123
- ),
124
- haveNavigation && /* @__PURE__ */ jsxRuntime.jsxs(
125
- "div",
126
- {
127
- className: clsx.clsx(
128
- "dgs-ui-kit-flex",
129
- {
130
- "dgs-ui-kit-items-center dgs-ui-kit-mt-2": navigationVariant === "outside",
131
- "dgs-ui-kit-absolute dgs-ui-kit-bottom-4 dgs-ui-kit-w-full dgs-ui-kit-justify-center": navigationVariant === "inside",
132
- "dgs-ui-kit-justify-between": navigationVariant === "outside" && navigationButtonsShowType !== "hide",
133
- "dgs-ui-kit-justify-center": navigationVariant === "outside" && navigationButtonsShowType === "hide"
134
- },
135
- navigationContainerClassName
136
- ),
137
- children: [
138
- navigationButtonsShowType && navigationButtonsShowType !== "hide" && /* @__PURE__ */ jsxRuntime.jsxs(
139
- "div",
140
- {
141
- className: clsx.clsx("dgs-ui-kit-flex dgs-ui-kit-gap-2", {
142
- "dgs-ui-kit-absolute dgs-ui-kit-bottom-0 dgs-ui-kit-left-[5.5%]": navigationVariant === "inside" && navigationButtonsShowType !== "onSides",
143
- "dgs-ui-kit-opacity-0 group-hover:dgs-ui-kit-opacity-100 dgs-ui-kit-transition": navigationButtonsShowType === "hover" || navigationButtonsShowType === "onSides",
144
- "dgs-ui-kit-fixed dgs-ui-kit-justify-between dgs-ui-kit-top-1/2 -dgs-ui-kit-translate-y-1/2 dgs-ui-kit-w-full dgs-ui-kit-px-[5.5%]": navigationVariant === "inside" && navigationButtonsShowType === "onSides"
145
- }),
146
- children: [
147
- /* @__PURE__ */ jsxRuntime.jsx(
148
- Button,
149
- {
150
- type: "button",
151
- variant: "secondary",
152
- onClick: () => navigate(slideIndex - 1),
153
- rightIcon: /* @__PURE__ */ jsxRuntime.jsx(ArrowRight2.ArrowRight2Icon, {})
154
- }
155
- ),
156
- /* @__PURE__ */ jsxRuntime.jsx(
157
- Button,
158
- {
159
- type: "button",
160
- variant: "secondary",
161
- onClick: () => navigate(slideIndex + 1),
162
- rightIcon: /* @__PURE__ */ jsxRuntime.jsx(ArrowLeft2.ArrowLeft2Icon, {})
163
- }
164
- )
165
- ]
166
- }
167
- ),
168
- (showNavigationDots || showPaginationText) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-gap-3", children: [
169
- showPaginationText && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-gap-1 dgs-ui-kit-font-caption-regular dgs-ui-kit-text-gray-400 ss02", children: [
170
- /* @__PURE__ */ jsxRuntime.jsx(
171
- "span",
172
- {
173
- className: clsx.clsx("dgs-ui-kit-font-bold", {
174
- "dgs-ui-kit-text-gray-600": navigationVariant === "outside",
175
- "dgs-ui-kit-text-white": navigationVariant === "inside"
176
- }),
177
- children: slideIndex + 1
178
- }
179
- ),
180
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: "از" }),
181
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: slidesCount })
182
- ] }),
183
- showNavigationDots && /* @__PURE__ */ jsxRuntime.jsx(
184
- "div",
185
- {
186
- className: clsx.clsx(
187
- "dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-justify-center dgs-ui-kit-gap-2",
188
- dotsClassName
189
- ),
190
- children: Array.from(Array(slidesCount).keys()).map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
191
- NavigationDot,
192
- {
193
- active: slideIndex === index,
194
- autoplay: autoplay ?? false,
195
- variant: navigationVariant,
196
- onClick: () => navigate(index),
197
- onNavigateToNext: () => navigate(slideIndex + 1)
198
- },
199
- item + slidesCount
200
- ))
201
- }
202
- )
203
- ] })
204
- ]
205
- }
206
- )
207
- ]
208
- }
209
- );
210
- };
211
-
212
- const Slide = (props) => {
213
- const { children, className } = props;
214
- const { slidesPerView, spaceBetween } = useSliderContext();
215
- const ref = react.useRef(null);
216
- const [childIndex, setChildIndex] = react.useState(0);
217
- react.useEffect(() => {
218
- if (!ref.current) return;
219
- setChildIndex(Array.prototype.indexOf.call(ref.current.parentNode?.children, ref.current));
220
- }, [ref]);
221
- return /* @__PURE__ */ jsxRuntime.jsx(
222
- "div",
223
- {
224
- ref,
225
- className: clsx.clsx("dgs-ui-kit-shrink-0 dgs-ui-kit-snap-always", className),
226
- style: {
227
- width: 100 / (slidesPerView ?? 1) + "%",
228
- paddingLeft: spaceBetween,
229
- scrollSnapAlign: childIndex % slidesPerView === 0 ? "start" : "none"
230
- },
231
- children
232
- }
233
- );
234
- };
235
-
236
- exports.Slide = Slide;
237
- exports.Slider = Slider;
@@ -1,167 +0,0 @@
1
- import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
2
- import { c as clsx } from './clsx-ChV9xqsO.js';
3
- import { useState, useEffect } from 'react';
4
- import './assets/styles.css';/* empty css */
5
-
6
- const InfoCircleOutlineIcon = (props) => /* @__PURE__ */ jsxs(
7
- "svg",
8
- {
9
- xmlns: "http://www.w3.org/2000/svg",
10
- width: "1em",
11
- height: "1em",
12
- fill: "none",
13
- viewBox: "0 0 24 24",
14
- ...props,
15
- children: [
16
- /* @__PURE__ */ jsx(
17
- "path",
18
- {
19
- fill: "currentColor",
20
- fillRule: "evenodd",
21
- d: "M12.25 3.75a8.25 8.25 0 1 0 0 16.5 8.25 8.25 0 0 0 0-16.5M2.5 12a9.75 9.75 0 0 1 9.75-9.75A9.75 9.75 0 0 1 22 12c0 5.384-4.365 9.75-9.75 9.75S2.5 17.384 2.5 12",
22
- clipRule: "evenodd"
23
- }
24
- ),
25
- /* @__PURE__ */ jsx(
26
- "path",
27
- {
28
- fill: "currentColor",
29
- fillRule: "evenodd",
30
- d: "M12.25 7.541a.75.75 0 0 1 .75.75v.063a.75.75 0 0 1-1.5 0v-.063a.75.75 0 0 1 .75-.75m.006 3.103a.75.75 0 0 1 .75.75v4.3a.75.75 0 0 1-1.5 0v-4.3a.75.75 0 0 1 .75-.75",
31
- clipRule: "evenodd"
32
- }
33
- )
34
- ]
35
- }
36
- );
37
-
38
- const FieldBottomInfo = (props) => {
39
- const { errorMessage, hintMessage, maxLength, value } = props;
40
- const showInfo = Boolean(errorMessage || hintMessage || maxLength);
41
- if (showInfo)
42
- return /* @__PURE__ */ jsxs(
43
- "div",
44
- {
45
- className: clsx(
46
- "dgs-ui-kit-flex dgs-ui-kit-font-p3-regular",
47
- {
48
- "dgs-ui-kit-justify-between": (errorMessage || hintMessage) && maxLength,
49
- "dgs-ui-kit-justify-start": (errorMessage || hintMessage) && !maxLength,
50
- "dgs-ui-kit-justify-end": !(errorMessage || hintMessage) && maxLength
51
- },
52
- errorMessage ? "dgs-ui-kit-text-error-500" : "dgs-ui-kit-text-gray-500"
53
- ),
54
- children: [
55
- (errorMessage || hintMessage) && /* @__PURE__ */ jsxs("div", { className: "dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-gap-2", children: [
56
- /* @__PURE__ */ jsx(
57
- InfoCircleOutlineIcon,
58
- {
59
- width: 16,
60
- height: 16
61
- }
62
- ),
63
- /* @__PURE__ */ jsx("span", { children: errorMessage || hintMessage })
64
- ] }),
65
- maxLength && /* @__PURE__ */ jsxs("span", { className: "ss02", children: [
66
- value?.length ?? 0,
67
- "/",
68
- maxLength
69
- ] })
70
- ]
71
- }
72
- );
73
- return null;
74
- };
75
-
76
- const FieldLabel = (props) => {
77
- const { link, labelContent, required } = props;
78
- const showLabel = Boolean(labelContent || link?.href);
79
- if (showLabel)
80
- return /* @__PURE__ */ jsxs(
81
- "div",
82
- {
83
- className: clsx("dgs-ui-kit-flex dgs-ui-kit-mb-2", {
84
- "dgs-ui-kit-justify-between": labelContent && link?.href,
85
- "dgs-ui-kit-justify-start": labelContent && !link?.href,
86
- "dgs-ui-kit-justify-end": !labelContent && link?.href
87
- }),
88
- children: [
89
- labelContent && /* @__PURE__ */ jsxs("label", { className: "dgs-ui-kit-px-0 dgs-ui-kit-text-sm dgs-ui-kit-font-bold dgs-ui-kit-text-right md:dgs-ui-kit-mx-0", children: [
90
- labelContent,
91
- required && /* @__PURE__ */ jsx("span", { className: "dgs-ui-kit-ms-2 dgs-ui-kit-text-error-500", children: "*" })
92
- ] }),
93
- link?.href && /* @__PURE__ */ jsx(
94
- "a",
95
- {
96
- href: link.href,
97
- className: "dgs-ui-kit-font-button-small dgs-ui-kit-text-primary-400",
98
- children: link.cnotent
99
- }
100
- )
101
- ]
102
- }
103
- );
104
- return null;
105
- };
106
-
107
- const TextFieldWrapper = (props) => {
108
- const {
109
- labelContent,
110
- link,
111
- containerClassName,
112
- rightIcon,
113
- isError,
114
- errorMessage,
115
- hintMessage,
116
- required,
117
- maxLength,
118
- value: initialValue,
119
- onChange,
120
- children
121
- } = props;
122
- const [value, setValue] = useState(initialValue?.toString());
123
- useEffect(() => {
124
- setValue(initialValue?.toString());
125
- }, [initialValue]);
126
- const handleChangeField = (e) => {
127
- setValue(e.currentTarget.value);
128
- if (onChange) {
129
- onChange(e);
130
- }
131
- };
132
- return /* @__PURE__ */ jsxs(Fragment, { children: [
133
- /* @__PURE__ */ jsx(
134
- FieldLabel,
135
- {
136
- labelContent,
137
- link,
138
- required
139
- }
140
- ),
141
- /* @__PURE__ */ jsxs(
142
- "div",
143
- {
144
- className: clsx(
145
- "dgs-ui-kit-relative dgs-ui-kit-cursor-text dgs-ui-kit-border dgs-ui-kit-border-solid dgs-ui-kit-rounded-lg dgs-ui-kit-ring-4 dgs-ui-kit-flex dgs-ui-kit-justify-between dgs-ui-kit-gap-x-3 dgs-ui-kit-p-3 dgs-ui-kit-bg-gray-100 dgs-ui-kit-transition-all dgs-ui-kit-ring-transparent hover:dgs-ui-kit-ring-gray-50 has-[:focus]:dgs-ui-kit-bg-white",
146
- isError || errorMessage ? "dgs-ui-kit-border-error-500 has-[:focus]:dgs-ui-kit-ring-error-50" : "dgs-ui-kit-border-transparent hover:dgs-ui-kit-border-gray-300 has-[:focus]:dgs-ui-kit-border-primary-500 has-[:focus]:dgs-ui-kit-ring-primary-50",
147
- containerClassName
148
- ),
149
- children: [
150
- rightIcon && /* @__PURE__ */ jsx("div", { className: "dgs-ui-kit-text-gray-600", children: rightIcon }),
151
- children({ handleChangeField, setValue, value })
152
- ]
153
- }
154
- ),
155
- /* @__PURE__ */ jsx(
156
- FieldBottomInfo,
157
- {
158
- errorMessage,
159
- hintMessage,
160
- maxLength,
161
- value
162
- }
163
- )
164
- ] });
165
- };
166
-
167
- export { TextFieldWrapper as T };