@customafk/lunas-ui 0.0.2-m → 0.0.2-o

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.
@@ -4,7 +4,7 @@ import * as class_variance_authority_dist_types from 'class-variance-authority/d
4
4
  import { VariantProps } from 'class-variance-authority';
5
5
 
6
6
  declare const buttonVariants: (props?: ({
7
- variant?: "normal" | "default" | "outline" | "secondary" | "destructive" | "destructive-secondary" | "destructive-outline" | "sort-outline" | null | undefined;
7
+ variant?: "default" | "secondary" | "outline" | "destructive" | "destructive-secondary" | "destructive-outline" | "sort-outline" | "normal" | null | undefined;
8
8
  size?: "small" | "default" | "base" | "large" | null | undefined;
9
9
  } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
10
10
 
@@ -8,7 +8,7 @@ declare const Command: React.ForwardRefExoticComponent<Omit<{
8
8
  ref?: React.Ref<HTMLDivElement>;
9
9
  } & {
10
10
  asChild?: boolean;
11
- }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
11
+ }, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
12
12
  label?: string;
13
13
  shouldFilter?: boolean;
14
14
  filter?: (value: string, search: string, keywords?: string[]) => number;
@@ -26,7 +26,7 @@ declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<
26
26
  ref?: React.Ref<HTMLInputElement>;
27
27
  } & {
28
28
  asChild?: boolean;
29
- }, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
29
+ }, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "value" | "onChange" | "type"> & {
30
30
  value?: string;
31
31
  onValueChange?: (search: string) => void;
32
32
  } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
@@ -36,7 +36,7 @@ declare const CommandList: React.ForwardRefExoticComponent<Omit<{
36
36
  ref?: React.Ref<HTMLDivElement>;
37
37
  } & {
38
38
  asChild?: boolean;
39
- }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
39
+ }, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
40
40
  label?: string;
41
41
  } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
42
42
  declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
@@ -45,14 +45,14 @@ declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
45
45
  ref?: React.Ref<HTMLDivElement>;
46
46
  } & {
47
47
  asChild?: boolean;
48
- }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
48
+ }, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
49
49
  declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
50
50
  children?: React.ReactNode;
51
51
  } & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
52
52
  ref?: React.Ref<HTMLDivElement>;
53
53
  } & {
54
54
  asChild?: boolean;
55
- }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "heading"> & {
55
+ }, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>>, "heading" | "value"> & {
56
56
  heading?: React.ReactNode;
57
57
  value?: string;
58
58
  forceMount?: boolean;
@@ -61,7 +61,7 @@ declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<R
61
61
  ref?: React.Ref<HTMLDivElement>;
62
62
  } & {
63
63
  asChild?: boolean;
64
- }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
64
+ }, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
65
65
  alwaysRender?: boolean;
66
66
  } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
67
67
  declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
@@ -70,7 +70,7 @@ declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
70
70
  ref?: React.Ref<HTMLDivElement>;
71
71
  } & {
72
72
  asChild?: boolean;
73
- }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
73
+ }, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>>, "value" | "onSelect" | "disabled"> & {
74
74
  disabled?: boolean;
75
75
  onSelect?: (value: string) => void;
76
76
  value?: string;
@@ -354,6 +354,7 @@ var DialogDescription = React.forwardRef(({ className, ...props }, reference) =>
354
354
  DialogDescription.displayName = DialogPrimitive.Description.displayName;
355
355
 
356
356
  // packages/Atoms/Command/index.tsx
357
+ import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
357
358
  import { Command as CommandPrimitive } from "cmdk";
358
359
  import { Search } from "lucide-react";
359
360
  import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -370,25 +371,28 @@ var Command = React2.forwardRef(({ className, ...props }, reference) => /* @__PU
370
371
  ));
371
372
  Command.displayName = CommandPrimitive.displayName;
372
373
  var CommandDialog = ({ children, ...props }) => {
373
- return /* @__PURE__ */ jsx2(Dialog, { ...props, children: /* @__PURE__ */ jsx2(DialogContent, { className: "p-0 shadow-lg", children: /* @__PURE__ */ jsx2(
374
- Command,
375
- {
376
- className: cn(
377
- "bg-neutral-50",
378
- "[&_[cmdk-group-heading]]:px-0",
379
- "[&_[cmdk-group-heading]]:font-medium",
380
- "[&_[cmdk-group-heading]]:text-ui-text-800",
381
- "[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0",
382
- "[&_[cmdk-group]]:px-2",
383
- "[&_[cmdk-input-wrapper]_svg]:size-5",
384
- "[&_[cmdk-input]]:h-12",
385
- "[&_[cmdk-item]]:px-2",
386
- "[&_[cmdk-item]]:py-3",
387
- "[&_[cmdk-item]_svg]:size-5"
388
- ),
389
- children
390
- }
391
- ) }) });
374
+ return /* @__PURE__ */ jsxs2(Dialog, { ...props, children: [
375
+ /* @__PURE__ */ jsx2(DialogContent, { className: "p-0 shadow-lg", children: /* @__PURE__ */ jsx2(
376
+ Command,
377
+ {
378
+ className: cn(
379
+ "bg-neutral-50",
380
+ "[&_[cmdk-group-heading]]:px-0",
381
+ "[&_[cmdk-group-heading]]:font-medium",
382
+ "[&_[cmdk-group-heading]]:text-ui-text-800",
383
+ "[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0",
384
+ "[&_[cmdk-group]]:px-2",
385
+ "[&_[cmdk-input-wrapper]_svg]:size-5",
386
+ "[&_[cmdk-input]]:h-12",
387
+ "[&_[cmdk-item]]:px-2",
388
+ "[&_[cmdk-item]]:py-3",
389
+ "[&_[cmdk-item]_svg]:size-5"
390
+ ),
391
+ children
392
+ }
393
+ ) }),
394
+ /* @__PURE__ */ jsx2(VisuallyHidden, { children: /* @__PURE__ */ jsx2(DialogTitle, {}) })
395
+ ] });
392
396
  };
393
397
  var CommandInput = React2.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsxs2("div", { className: "flex items-center border-b px-3", children: [
394
398
  /* @__PURE__ */ jsx2(Search, { className: "mr-2 size-4 shrink-0 opacity-50" }),
@@ -0,0 +1,8 @@
1
+ import * as React from 'react';
2
+ import * as PopoverPrimitive from '@radix-ui/react-popover';
3
+
4
+ declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
5
+ declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
6
+ declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
7
+
8
+ export { Popover, PopoverContent, PopoverTrigger };
@@ -0,0 +1,286 @@
1
+ "use client";
2
+
3
+ // packages/Atoms/Popover/index.tsx
4
+ import { forwardRef } from "react";
5
+
6
+ // packages/tailwindTheme.ts
7
+ var themes = {
8
+ spacing: {
9
+ 30: "7.5rem",
10
+ // 120px
11
+ 33: "8.25rem"
12
+ // 132px
13
+ },
14
+ colors: {
15
+ ui: {
16
+ white: "#ffffff",
17
+ "white-primary": "#ffffff",
18
+ "black-primary": "#111315",
19
+ "bg-white": "#FAFAFA",
20
+ primary: {
21
+ default: "#6C70F0",
22
+ 50: "#EEF2FF",
23
+ 100: "#E0E7FF",
24
+ 200: "#C8D2FD",
25
+ 300: "#A6B6FB",
26
+ 400: "#828EF7",
27
+ 500: "#6C70F0",
28
+ 600: "#5048E3",
29
+ 700: "#443AC8",
30
+ 800: "#3731A2",
31
+ 900: "#312F80",
32
+ 950: "#1F1C4A"
33
+ },
34
+ secondary: {
35
+ default: "#C170FF",
36
+ 50: "#F9F1FF",
37
+ 100: "#F3E2FF",
38
+ 200: "#ECD4FF",
39
+ 300: "#E0B8FF",
40
+ 400: "#D49BFF",
41
+ 500: "#C170FF",
42
+ 600: "#AE65E6",
43
+ 700: "#9A5ACC",
44
+ 800: "#874EB3",
45
+ 900: "#613880",
46
+ 950: "#3A224C"
47
+ },
48
+ tertiary: {
49
+ default: "#5B8CFF",
50
+ 50: "#EFF4FF",
51
+ 100: "#DEE8FF",
52
+ 200: "#CEDDFF",
53
+ 300: "#BDD1FF",
54
+ 400: "#7CA3FF",
55
+ 500: "#5B8CFF",
56
+ 600: "#527EE6",
57
+ 700: "#4062B3",
58
+ 800: "#2E4680",
59
+ 900: "#243866",
60
+ 950: "#1B2A4C"
61
+ },
62
+ destructive: {
63
+ default: "#EF4444",
64
+ 50: "#FEF2F2",
65
+ 100: "#FEE2E2",
66
+ 200: "#FECACA",
67
+ 300: "#FCA5A5",
68
+ 400: "#F87171",
69
+ 500: "#EF4444",
70
+ 600: "#DC2626",
71
+ 700: "#B91C1C",
72
+ 800: "#991B1B",
73
+ 900: "#7F1D1D",
74
+ 950: "#450A0A"
75
+ },
76
+ success: {
77
+ default: "#22c55e",
78
+ 50: "#f0fdf4",
79
+ 100: "#dcfce7",
80
+ 200: "#bbf7d0",
81
+ 300: "#86efac",
82
+ 400: "#4ade80",
83
+ 500: "#22c55e",
84
+ 600: "#16a34a",
85
+ 700: "#15803d",
86
+ 800: "#166534",
87
+ 900: "#14532d",
88
+ 950: "#052e16"
89
+ },
90
+ warn: {
91
+ default: "#f59e0b",
92
+ 50: "#fffbeb",
93
+ 100: "#fef3c7",
94
+ 200: "#fde68a",
95
+ 300: "#fcd34d",
96
+ 400: "#fbbf24",
97
+ 500: "#f59e0b",
98
+ 600: "#d97706",
99
+ 700: "#b45309",
100
+ 800: "#92400e",
101
+ 900: "#78350f",
102
+ 950: "#451a03"
103
+ },
104
+ text: {
105
+ black: "#09090b",
106
+ white: "#fafafa",
107
+ 50: "#fafafa",
108
+ 100: "#f4f4f5",
109
+ 200: "#e4e4e7",
110
+ 300: "#d4d4d8",
111
+ 400: "#a1a1aa",
112
+ 500: "#71717a",
113
+ 600: "#52525b",
114
+ 700: "#3f3f46",
115
+ 800: "#27272a",
116
+ 900: "#18181b",
117
+ 950: "#09090b"
118
+ },
119
+ surface: {
120
+ default: "#ffffff",
121
+ 50: "#ffffff",
122
+ 100: "#f5f5f5",
123
+ 200: "#e5e5e5",
124
+ 300: "#d4d4d4",
125
+ 400: "#a3a3a3",
126
+ 500: "#737373",
127
+ 600: "#525252",
128
+ 700: "#404040",
129
+ 800: "#262626",
130
+ 900: "#171717",
131
+ 950: "#0a0a0a"
132
+ },
133
+ border: {
134
+ default: "#64748B",
135
+ 50: "#f9fafb",
136
+ 100: "#f3f4f6",
137
+ 200: "#e5e7eb",
138
+ 300: "#d1d5db",
139
+ 400: "#9ca3af",
140
+ 500: "#64748B",
141
+ 600: "#475569",
142
+ 700: "#334155",
143
+ 800: "#1E293B",
144
+ 900: "#0F172A",
145
+ 950: "#020817"
146
+ },
147
+ // TEXT COLOR
148
+ "text-primary": "#111315",
149
+ "text-secondary": "#30353C",
150
+ "text-third": "#30353CCC",
151
+ "text-placeholder": "#11131566",
152
+ "text-white-placeholder": "#FDFDFD99",
153
+ "text-black": {
154
+ primary: "#19191B",
155
+ secondary: "#222325",
156
+ third: "#292A2E",
157
+ fourth: "#5F606A",
158
+ placeholder: "#B2B3BD"
159
+ },
160
+ "text-white": {
161
+ primary: "#FCFCFC",
162
+ secondary: "#F9F9F9",
163
+ third: "#D9D9D9"
164
+ },
165
+ // COLOR SPECIAL
166
+ "positive-flat": "#4ADE80",
167
+ "destruction-flat": "#EF4444",
168
+ "neutral-flat": "#BFDBFE",
169
+ rating: "#FDE047",
170
+ input: {
171
+ border: {
172
+ active: "#71717A",
173
+ disabled: "#D4D4D8"
174
+ },
175
+ bg: {
176
+ default: "#FDFDFD",
177
+ error: "#FEF2F2"
178
+ }
179
+ }
180
+ }
181
+ },
182
+ backgroundImage: {
183
+ "ui-bg-color": "linear-gradient(110deg, #9CD5F5 3.09%, #B1B8E6 33.47%, rgba(185, 155, 215, 0.90) 62.82%, #A293DF 84.45%, #878AEA 106.08%)",
184
+ "ui-bg-page": "radial-gradient(70.47% 70.47% at 50% 50%, #FDFDFD 0%, #F3F1FF 50%, #F1FCFF 100%)",
185
+ "ui-btn-primary": "linear-gradient(180deg, #828EF7 0%, #6C70F0 100%)",
186
+ "ui-btn-secondary": "linear-gradient(180deg, #4277EF 0%, #669BF4 100%)",
187
+ "ui-btn-accept": "linear-gradient(282deg, #30C36D 6.81%, #6BCD8A 93.19%)",
188
+ "ui-btn-destructive": "linear-gradient(282deg, #FF384A 7.07%, #FF5463 92.93%)",
189
+ "ui-status-bg-positive": "linear-gradient(0deg, #C4FFD8 0%, #68FF9D 100%)",
190
+ "ui-status-bg-negative": "linear-gradient(0deg, #FECACA 0%, #FF8F8F 100%)",
191
+ "ui-status-bg-neutral": "linear-gradient(0deg, #E1EBFF 0%, #C7E8FF 100%)",
192
+ "ui-status-order": "linear-gradient(282deg, #30C36D 6.81%, #6BCD8A 93.19%)",
193
+ "ui-status-out-of-stock": "linear-gradient(282deg, #FF384A 7.07%, #FF5463 92.93%)",
194
+ "ui-status-in-stock": "linear-gradient(282deg, #30A8FF 6.81%, #73BAED 93.19%)",
195
+ "ui-line": "linear-gradient(90deg, #D3D4FF 0%, #7587EA 50%, #AEC0FF 100%)"
196
+ },
197
+ boxShadow: {
198
+ "ui-sd-primary": "0 4px 20px 0 rgba(104, 109, 224, 0.5)",
199
+ "ui-sd-base": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
200
+ "ui-sd-destructive": "0 10px 10px 0 rgba(255, 56, 74, 0.15)",
201
+ "ui-sd-accept": "0 10px 10px 0 rgba(46, 213, 115, 0.15)",
202
+ "ui-xl": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
203
+ "ui-soft": "0px 5px 12px 0px rgba(0, 67, 101, 0.08)",
204
+ "ui-muli": "0px 5px 50px 0px rgba(0, 67, 101, 0.08), 0px 2px 6px 0px rgba(130, 169, 188, 0.08)",
205
+ "ui-category-effect": "0px 4px 50px 0px rgba(0, 67, 101, 0.08)",
206
+ "ui-flat": "0px 0.25rem 0.625rem 0px rgba(99, 102, 241, 0.07)",
207
+ "ui-overlay": "0px 4px 4px 1px rgba(99, 102, 241, 0.04)",
208
+ "ui-sticky-nav": "0px 3px 12px -1px rgba(151, 71, 255, 0.07)",
209
+ "ui-dialog": "0px 8px 12px 0px rgba(99, 102, 241, 0.15)"
210
+ },
211
+ fontSize: {
212
+ "ui-h1": ["1.5rem", "2rem"],
213
+ "ui-h2": ["1.25rem", "1.75rem"],
214
+ "ui-h3": ["1.125rem", "1.75rem"],
215
+ "ui-p": ["1rem", "1.5rem"],
216
+ "ui-note": ["0.875rem", "1.25rem"],
217
+ "ui-small-note": ["0.75rem", "1rem"]
218
+ },
219
+ keyframes: {
220
+ "accordion-down": {
221
+ from: { height: "0" },
222
+ to: { height: "var(--radix-accordion-content-height)" }
223
+ },
224
+ "accordion-up": {
225
+ from: { height: "var(--radix-accordion-content-height)" },
226
+ to: { height: "0" }
227
+ }
228
+ },
229
+ animation: {
230
+ "accordion-down": "accordion-down 0.2s ease-out",
231
+ "accordion-up": "accordion-up 0.2s ease-out"
232
+ }
233
+ };
234
+ var tailwindTheme_default = themes;
235
+
236
+ // packages/libs/utils.ts
237
+ import clsx from "clsx";
238
+ import { extendTailwindMerge } from "tailwind-merge";
239
+ var customTailwindMerge = () => {
240
+ return extendTailwindMerge({
241
+ ...tailwindTheme_default,
242
+ prefix: ""
243
+ });
244
+ };
245
+ var cn = (...inputs) => {
246
+ const customTwMerge = customTailwindMerge();
247
+ return customTwMerge(clsx(inputs));
248
+ };
249
+
250
+ // packages/Atoms/Popover/index.tsx
251
+ import * as PopoverPrimitive from "@radix-ui/react-popover";
252
+ import { jsx } from "react/jsx-runtime";
253
+ var Popover = PopoverPrimitive.Root;
254
+ var PopoverTrigger = PopoverPrimitive.Trigger;
255
+ var PopoverContent = forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
256
+ PopoverPrimitive.Content,
257
+ {
258
+ ref,
259
+ align,
260
+ sideOffset,
261
+ className: cn(
262
+ "z-50 w-72",
263
+ "rounded-md border",
264
+ "bg-ui-surface-50 p-4 text-ui-text-800",
265
+ "shadow-md outline-none",
266
+ "data-[state=open]:animate-in",
267
+ "data-[state=open]:fade-in-0",
268
+ "data-[state=open]:zoom-in-95",
269
+ "data-[state=closed]:animate-out",
270
+ "data-[state=closed]:fade-out-0",
271
+ "data-[state=closed]:zoom-out-95",
272
+ "data-[side=bottom]:slide-in-from-top-2",
273
+ "data-[side=left]:slide-in-from-right-2",
274
+ "data-[side=right]:slide-in-from-left-2",
275
+ "data-[side=top]:slide-in-from-bottom-2",
276
+ className
277
+ ),
278
+ ...props
279
+ }
280
+ ) }));
281
+ PopoverContent.displayName = PopoverPrimitive.Content.displayName;
282
+ export {
283
+ Popover,
284
+ PopoverContent,
285
+ PopoverTrigger
286
+ };
@@ -0,0 +1,32 @@
1
+ import { FC, ReactNode } from 'react';
2
+
3
+ type TBrand = {
4
+ uuid: string;
5
+ name: string;
6
+ };
7
+
8
+ type TPrice = {
9
+ value: string;
10
+ label: string;
11
+ option: {
12
+ from: number;
13
+ to: number;
14
+ };
15
+ };
16
+
17
+ interface IProps {
18
+ initialLayout: 'GRID' | 'LIST';
19
+ brandData: {
20
+ uuid: string;
21
+ name: string;
22
+ }[];
23
+ onFilterConfirm?: (data?: {
24
+ brand?: TBrand[];
25
+ price?: TPrice;
26
+ sort?: 'price-asc' | 'price-desc' | 'date-asc' | 'date-desc';
27
+ }) => void;
28
+ children?: ReactNode;
29
+ }
30
+ declare const CategoriesPage: FC<IProps>;
31
+
32
+ export { CategoriesPage as default };