@accelint/design-toolkit 3.0.0 → 4.0.0
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/accordion/styles.d.ts +1 -1
- package/dist/components/avatar/styles.d.ts +1 -1
- package/dist/components/badge/styles.d.ts +1 -1
- package/dist/components/button/styles.d.ts +3 -3
- package/dist/components/checkbox/styles.d.ts +1 -1
- package/dist/components/chip/styles.d.ts +4 -4
- package/dist/components/color-picker/styles.d.ts +1 -1
- package/dist/components/combobox-field/styles.d.ts +3 -3
- package/dist/components/date-field/index.d.ts +1 -3
- package/dist/components/date-field/index.js +1 -1
- package/dist/components/date-field/index.js.map +1 -1
- package/dist/components/date-field/styles.d.ts +41 -51
- package/dist/components/date-field/styles.js +1 -1
- package/dist/components/date-field/styles.js.map +1 -1
- package/dist/components/date-field/types.d.ts +12 -15
- package/dist/components/details-list/styles.d.ts +1 -1
- package/dist/components/dialog/index.d.ts +28 -38
- package/dist/components/dialog/index.js +1 -1
- package/dist/components/dialog/index.js.map +1 -1
- package/dist/components/dialog/styles.d.ts +60 -0
- package/dist/components/dialog/styles.js +2 -0
- package/dist/components/dialog/styles.js.map +1 -0
- package/dist/components/dialog/types.d.ts +14 -0
- package/dist/components/dialog/types.js +2 -0
- package/dist/components/dialog/types.js.map +1 -0
- package/dist/components/hero/styles.d.ts +1 -1
- package/dist/components/hotkey/styles.d.ts +1 -1
- package/dist/components/icon/styles.d.ts +1 -1
- package/dist/components/input/styles.d.ts +1 -1
- package/dist/components/label/styles.d.ts +1 -1
- package/dist/components/menu/styles.d.ts +1 -1
- package/dist/components/options/styles.d.ts +3 -3
- package/dist/components/options/types.d.ts +1 -1
- package/dist/components/popover/styles.d.ts +1 -1
- package/dist/components/radio/styles.d.ts +1 -1
- package/dist/components/search-field/styles.d.ts +1 -1
- package/dist/components/select-field/styles.d.ts +4 -4
- package/dist/components/skeleton/styles.d.ts +1 -1
- package/dist/components/slider/index.d.ts +4 -43
- package/dist/components/slider/index.js +1 -1
- package/dist/components/slider/index.js.map +1 -1
- package/dist/components/slider/styles.d.ts +84 -0
- package/dist/components/slider/styles.js +2 -0
- package/dist/components/slider/styles.js.map +1 -0
- package/dist/components/slider/types.d.ts +22 -0
- package/dist/components/slider/types.js +2 -0
- package/dist/components/slider/types.js.map +1 -0
- package/dist/components/switch/styles.d.ts +1 -1
- package/dist/components/text-area-field/styles.d.ts +4 -4
- package/dist/components/text-field/styles.d.ts +4 -4
- package/dist/components/tooltip/index.js +1 -1
- package/dist/components/tooltip/index.js.map +1 -1
- package/dist/components/tooltip/styles.d.ts +1 -1
- package/dist/index.css +3 -3
- package/dist/index.d.ts +9 -5
- package/dist/index.js +1 -1
- package/dist/lib/utils.d.ts +15 -5
- package/dist/lib/utils.js +1 -1
- package/dist/lib/utils.js.map +1 -1
- package/dist/metafile-esm.json +1 -1
- package/dist/styles.css +503 -141
- package/dist/tokens/index.js.map +1 -1
- package/dist/tokens/themes.css +12 -0
- package/dist/tokens/tokens.css +12 -0
- package/dist/variants/variants.css +13 -0
- package/package.json +14 -7
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import * as tailwind_variants from 'tailwind-variants';
|
|
2
|
+
import * as tailwind_merge from 'tailwind-merge';
|
|
3
|
+
|
|
4
|
+
declare const DialogStyles: tailwind_variants.TVReturnType<{
|
|
5
|
+
[key: string]: {
|
|
6
|
+
[key: string]: tailwind_merge.ClassNameValue | {
|
|
7
|
+
content?: tailwind_merge.ClassNameValue;
|
|
8
|
+
dialog?: tailwind_merge.ClassNameValue;
|
|
9
|
+
footer?: tailwind_merge.ClassNameValue;
|
|
10
|
+
title?: tailwind_merge.ClassNameValue;
|
|
11
|
+
overlay?: tailwind_merge.ClassNameValue;
|
|
12
|
+
modal?: tailwind_merge.ClassNameValue;
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
} | {
|
|
16
|
+
[x: string]: {
|
|
17
|
+
[x: string]: tailwind_merge.ClassNameValue | {
|
|
18
|
+
content?: tailwind_merge.ClassNameValue;
|
|
19
|
+
dialog?: tailwind_merge.ClassNameValue;
|
|
20
|
+
footer?: tailwind_merge.ClassNameValue;
|
|
21
|
+
title?: tailwind_merge.ClassNameValue;
|
|
22
|
+
overlay?: tailwind_merge.ClassNameValue;
|
|
23
|
+
modal?: tailwind_merge.ClassNameValue;
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
} | {}, {
|
|
27
|
+
overlay: string;
|
|
28
|
+
modal: string[];
|
|
29
|
+
dialog: string[];
|
|
30
|
+
title: string[];
|
|
31
|
+
content: string[];
|
|
32
|
+
footer: string[];
|
|
33
|
+
}, undefined, {
|
|
34
|
+
[key: string]: {
|
|
35
|
+
[key: string]: tailwind_merge.ClassNameValue | {
|
|
36
|
+
content?: tailwind_merge.ClassNameValue;
|
|
37
|
+
dialog?: tailwind_merge.ClassNameValue;
|
|
38
|
+
footer?: tailwind_merge.ClassNameValue;
|
|
39
|
+
title?: tailwind_merge.ClassNameValue;
|
|
40
|
+
overlay?: tailwind_merge.ClassNameValue;
|
|
41
|
+
modal?: tailwind_merge.ClassNameValue;
|
|
42
|
+
};
|
|
43
|
+
};
|
|
44
|
+
} | {}, {
|
|
45
|
+
overlay: string;
|
|
46
|
+
modal: string[];
|
|
47
|
+
dialog: string[];
|
|
48
|
+
title: string[];
|
|
49
|
+
content: string[];
|
|
50
|
+
footer: string[];
|
|
51
|
+
}, tailwind_variants.TVReturnType<unknown, {
|
|
52
|
+
overlay: string;
|
|
53
|
+
modal: string[];
|
|
54
|
+
dialog: string[];
|
|
55
|
+
title: string[];
|
|
56
|
+
content: string[];
|
|
57
|
+
footer: string[];
|
|
58
|
+
}, undefined, unknown, unknown, undefined>>;
|
|
59
|
+
|
|
60
|
+
export { DialogStyles };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import {tv}from'tailwind-variants';const o=tv({slots:{overlay:"group/dialog absolute inset-0 flex items-center justify-center",modal:["flex flex-col justify-center bg-surface-overlay align-start","group-size-small/dialog:rounded-medium","group-size-large/dialog:rounded-large","shadow-elevation-overlay"],dialog:["focus-visible:outline-none","flex flex-col align-end font-light text-body-m text-default-dark","group-size-small/dialog:w-[280px] group-size-small/dialog:rounded-medium group-size-small/dialog:p-l","group-size-large/dialog:min-w-[320px] group-size-small/dialog:max-w-[720px] group-size-large/dialog:rounded-medium group-size-large/dialog:p-xl"],title:["text-default-light","group-size-small/dialog:mb-s group-size-small/dialog:text-header-m","group-size-large/dialog:mb-m group-size-large/dialog:text-header-l"],content:["flex flex-col","foreground-primary-muted","group-size-small/dialog:gap-xs","group-size-large/dialog:gap-l"],footer:["flex justify-end gap-xs","group-size-small/dialog:mt-l","group-size-large/dialog:mt-xl"]}});export{o as DialogStyles};//# sourceMappingURL=styles.js.map
|
|
2
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/dialog/styles.ts"],"names":["DialogStyles","tv"],"mappings":"mCAcO,MAAMA,EAAeC,EAAAA,CAAG,CAC7B,MAAO,CACL,OAAA,CAAS,iEACT,KAAA,CAAO,CACL,8DACA,wCAAA,CACA,uCAAA,CACA,0BACF,CAAA,CACA,MAAA,CAAQ,CACN,4BAAA,CACA,kEAAA,CACA,uGACA,iJACF,CAAA,CACA,MAAO,CACL,oBAAA,CACA,qEACA,oEACF,CAAA,CACA,QAAS,CACP,eAAA,CACA,2BACA,gCAAA,CACA,+BACF,EACA,MAAA,CAAQ,CACN,0BACA,8BAAA,CACA,+BACF,CACF,CACF,CAAC","file":"styles.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { tv } from 'tailwind-variants';\n\nexport const DialogStyles = tv({\n slots: {\n overlay: 'group/dialog absolute inset-0 flex items-center justify-center',\n modal: [\n 'flex flex-col justify-center bg-surface-overlay align-start',\n 'group-size-small/dialog:rounded-medium',\n 'group-size-large/dialog:rounded-large',\n 'shadow-elevation-overlay',\n ],\n dialog: [\n 'focus-visible:outline-none',\n 'flex flex-col align-end font-light text-body-m text-default-dark',\n 'group-size-small/dialog:w-[280px] group-size-small/dialog:rounded-medium group-size-small/dialog:p-l',\n 'group-size-large/dialog:min-w-[320px] group-size-small/dialog:max-w-[720px] group-size-large/dialog:rounded-medium group-size-large/dialog:p-xl',\n ],\n title: [\n 'text-default-light',\n 'group-size-small/dialog:mb-s group-size-small/dialog:text-header-m',\n 'group-size-large/dialog:mb-m group-size-large/dialog:text-header-l',\n ],\n content: [\n 'flex flex-col',\n 'foreground-primary-muted',\n 'group-size-small/dialog:gap-xs',\n 'group-size-large/dialog:gap-l',\n ],\n footer: [\n 'flex justify-end gap-xs',\n 'group-size-small/dialog:mt-l',\n 'group-size-large/dialog:mt-xl',\n ],\n },\n});\n"]}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { RefAttributes, RefObject } from 'react';
|
|
2
|
+
import { ModalOverlayProps, DialogProps as DialogProps$1 } from 'react-aria-components';
|
|
3
|
+
|
|
4
|
+
type DialogProps = Omit<ModalOverlayProps, 'children' | 'className'> & Pick<DialogProps$1, 'children'> & RefAttributes<HTMLDivElement> & {
|
|
5
|
+
classNames?: {
|
|
6
|
+
overlay?: ModalOverlayProps['className'];
|
|
7
|
+
modal?: ModalOverlayProps['className'];
|
|
8
|
+
dialog?: DialogProps$1['className'];
|
|
9
|
+
};
|
|
10
|
+
parentRef?: RefObject<HTMLElement | null>;
|
|
11
|
+
size?: 'small' | 'large';
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
export type { DialogProps };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"types.js"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as tailwind_variants from 'tailwind-variants';
|
|
2
2
|
|
|
3
|
-
declare const IconStyles: tailwind_variants.TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, string[], unknown, unknown
|
|
3
|
+
declare const IconStyles: tailwind_variants.TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, string[], unknown, unknown>>;
|
|
4
4
|
|
|
5
5
|
export { IconStyles };
|
|
@@ -137,6 +137,6 @@ declare const InputStyles: tailwind_variants.TVReturnType<{
|
|
|
137
137
|
sizer: string[];
|
|
138
138
|
input: string[];
|
|
139
139
|
clear: string[];
|
|
140
|
-
}, undefined, unknown, unknown
|
|
140
|
+
}, undefined, unknown, unknown>>;
|
|
141
141
|
|
|
142
142
|
export { InputStyles, InputStylesDefaults };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as tailwind_variants from 'tailwind-variants';
|
|
2
2
|
|
|
3
|
-
declare const LabelStyles: tailwind_variants.TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, string[], unknown, unknown
|
|
3
|
+
declare const LabelStyles: tailwind_variants.TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, string[], unknown, unknown>>;
|
|
4
4
|
|
|
5
5
|
export { LabelStyles };
|
|
@@ -6,11 +6,11 @@ declare const OptionsStyles: tailwind_variants.TVReturnType<{
|
|
|
6
6
|
[key: string]: tailwind_merge.ClassNameValue | {
|
|
7
7
|
icon?: tailwind_merge.ClassNameValue;
|
|
8
8
|
content?: tailwind_merge.ClassNameValue;
|
|
9
|
+
description?: tailwind_merge.ClassNameValue;
|
|
9
10
|
list?: tailwind_merge.ClassNameValue;
|
|
10
11
|
header?: tailwind_merge.ClassNameValue;
|
|
11
12
|
label?: tailwind_merge.ClassNameValue;
|
|
12
13
|
section?: tailwind_merge.ClassNameValue;
|
|
13
|
-
description?: tailwind_merge.ClassNameValue;
|
|
14
14
|
item?: tailwind_merge.ClassNameValue;
|
|
15
15
|
};
|
|
16
16
|
};
|
|
@@ -19,11 +19,11 @@ declare const OptionsStyles: tailwind_variants.TVReturnType<{
|
|
|
19
19
|
[x: string]: tailwind_merge.ClassNameValue | {
|
|
20
20
|
icon?: tailwind_merge.ClassNameValue;
|
|
21
21
|
content?: tailwind_merge.ClassNameValue;
|
|
22
|
+
description?: tailwind_merge.ClassNameValue;
|
|
22
23
|
list?: tailwind_merge.ClassNameValue;
|
|
23
24
|
header?: tailwind_merge.ClassNameValue;
|
|
24
25
|
label?: tailwind_merge.ClassNameValue;
|
|
25
26
|
section?: tailwind_merge.ClassNameValue;
|
|
26
|
-
description?: tailwind_merge.ClassNameValue;
|
|
27
27
|
item?: tailwind_merge.ClassNameValue;
|
|
28
28
|
};
|
|
29
29
|
};
|
|
@@ -41,11 +41,11 @@ declare const OptionsStyles: tailwind_variants.TVReturnType<{
|
|
|
41
41
|
[key: string]: tailwind_merge.ClassNameValue | {
|
|
42
42
|
icon?: tailwind_merge.ClassNameValue;
|
|
43
43
|
content?: tailwind_merge.ClassNameValue;
|
|
44
|
+
description?: tailwind_merge.ClassNameValue;
|
|
44
45
|
list?: tailwind_merge.ClassNameValue;
|
|
45
46
|
header?: tailwind_merge.ClassNameValue;
|
|
46
47
|
label?: tailwind_merge.ClassNameValue;
|
|
47
48
|
section?: tailwind_merge.ClassNameValue;
|
|
48
|
-
description?: tailwind_merge.ClassNameValue;
|
|
49
49
|
item?: tailwind_merge.ClassNameValue;
|
|
50
50
|
};
|
|
51
51
|
};
|
|
@@ -7,7 +7,7 @@ type OptionsDataItem = {
|
|
|
7
7
|
name: string;
|
|
8
8
|
children?: OptionsDataItem[];
|
|
9
9
|
};
|
|
10
|
-
type OptionsItemProps<T extends OptionsDataItem> = Omit<ListBoxItemProps<T>, 'className'> & RefAttributes<
|
|
10
|
+
type OptionsItemProps<T extends OptionsDataItem> = Omit<ListBoxItemProps<T>, 'className'> & RefAttributes<T> & {
|
|
11
11
|
classNames?: {
|
|
12
12
|
item?: ListBoxItemProps['className'];
|
|
13
13
|
icon?: IconProps['className'];
|
|
@@ -48,6 +48,6 @@ declare const SearchFieldStyles: tailwind_variants.TVReturnType<{
|
|
|
48
48
|
clear: string[];
|
|
49
49
|
loading: string;
|
|
50
50
|
search: string;
|
|
51
|
-
}, undefined, unknown, unknown
|
|
51
|
+
}, undefined, unknown, unknown>>;
|
|
52
52
|
|
|
53
53
|
export { SearchFieldStyles, SearchFieldStylesDefaults };
|
|
@@ -4,10 +4,10 @@ import * as tailwind_merge from 'tailwind-merge';
|
|
|
4
4
|
declare const SelectFieldStyles: tailwind_variants.TVReturnType<{
|
|
5
5
|
[key: string]: {
|
|
6
6
|
[key: string]: tailwind_merge.ClassNameValue | {
|
|
7
|
+
description?: tailwind_merge.ClassNameValue;
|
|
7
8
|
label?: tailwind_merge.ClassNameValue;
|
|
8
9
|
value?: tailwind_merge.ClassNameValue;
|
|
9
10
|
trigger?: tailwind_merge.ClassNameValue;
|
|
10
|
-
description?: tailwind_merge.ClassNameValue;
|
|
11
11
|
field?: tailwind_merge.ClassNameValue;
|
|
12
12
|
error?: tailwind_merge.ClassNameValue;
|
|
13
13
|
};
|
|
@@ -15,10 +15,10 @@ declare const SelectFieldStyles: tailwind_variants.TVReturnType<{
|
|
|
15
15
|
} | {
|
|
16
16
|
[x: string]: {
|
|
17
17
|
[x: string]: tailwind_merge.ClassNameValue | {
|
|
18
|
+
description?: tailwind_merge.ClassNameValue;
|
|
18
19
|
label?: tailwind_merge.ClassNameValue;
|
|
19
20
|
value?: tailwind_merge.ClassNameValue;
|
|
20
21
|
trigger?: tailwind_merge.ClassNameValue;
|
|
21
|
-
description?: tailwind_merge.ClassNameValue;
|
|
22
22
|
field?: tailwind_merge.ClassNameValue;
|
|
23
23
|
error?: tailwind_merge.ClassNameValue;
|
|
24
24
|
};
|
|
@@ -33,10 +33,10 @@ declare const SelectFieldStyles: tailwind_variants.TVReturnType<{
|
|
|
33
33
|
}, undefined, {
|
|
34
34
|
[key: string]: {
|
|
35
35
|
[key: string]: tailwind_merge.ClassNameValue | {
|
|
36
|
+
description?: tailwind_merge.ClassNameValue;
|
|
36
37
|
label?: tailwind_merge.ClassNameValue;
|
|
37
38
|
value?: tailwind_merge.ClassNameValue;
|
|
38
39
|
trigger?: tailwind_merge.ClassNameValue;
|
|
39
|
-
description?: tailwind_merge.ClassNameValue;
|
|
40
40
|
field?: tailwind_merge.ClassNameValue;
|
|
41
41
|
error?: tailwind_merge.ClassNameValue;
|
|
42
42
|
};
|
|
@@ -55,6 +55,6 @@ declare const SelectFieldStyles: tailwind_variants.TVReturnType<{
|
|
|
55
55
|
description: string;
|
|
56
56
|
error: string;
|
|
57
57
|
value: string[];
|
|
58
|
-
}, undefined, unknown, unknown
|
|
58
|
+
}, undefined, unknown, unknown>>;
|
|
59
59
|
|
|
60
60
|
export { SelectFieldStyles };
|
|
@@ -18,6 +18,6 @@ declare const SkeletonStyles: tailwind_variants.TVReturnType<{
|
|
|
18
18
|
circ: string;
|
|
19
19
|
rect: string;
|
|
20
20
|
};
|
|
21
|
-
}, undefined, "fg-default-light bg-transparent-light px-l py-s motion-safe:animate-pulse", unknown, unknown
|
|
21
|
+
}, undefined, "fg-default-light bg-transparent-light px-l py-s motion-safe:animate-pulse", unknown, unknown>>;
|
|
22
22
|
|
|
23
23
|
export { SkeletonStyles, SkeletonStylesDefaults };
|
|
@@ -1,18 +1,7 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { SliderProps
|
|
2
|
+
import { SliderProps } from './types.js';
|
|
3
|
+
import 'react-aria-components';
|
|
3
4
|
|
|
4
|
-
interface SliderProps extends Omit<SliderProps$1, 'value' | 'defaultValue' | 'showOutput' | 'slot' | 'style' | 'formatOptions'> {
|
|
5
|
-
className?: string;
|
|
6
|
-
showInput?: boolean;
|
|
7
|
-
showLabel?: boolean;
|
|
8
|
-
layout?: 'stacked' | 'inline';
|
|
9
|
-
value?: number;
|
|
10
|
-
defaultValue?: number;
|
|
11
|
-
rangeValue?: [number, number];
|
|
12
|
-
defaultRangeValue?: [number, number];
|
|
13
|
-
isRange?: boolean;
|
|
14
|
-
label: string;
|
|
15
|
-
}
|
|
16
5
|
/**
|
|
17
6
|
* Slider - An interactive range input component for numeric value selection
|
|
18
7
|
*
|
|
@@ -24,34 +13,6 @@ interface SliderProps extends Omit<SliderProps$1, 'value' | 'defaultValue' | 'sh
|
|
|
24
13
|
* // Basic slider
|
|
25
14
|
* <Slider label="Volume" defaultValue={50} />
|
|
26
15
|
*/
|
|
27
|
-
declare const Slider: ({
|
|
28
|
-
type RangeSliderProps = Omit<SliderProps, 'isRange' | 'defaultRangeValue' | 'rangeValue' | 'defaultValue' | 'value'> & {
|
|
29
|
-
defaultValue?: SliderProps['defaultRangeValue'];
|
|
30
|
-
value: SliderProps['rangeValue'];
|
|
31
|
-
};
|
|
32
|
-
/**
|
|
33
|
-
* RangeSlider - A dual-handle slider component for selecting a range of numeric values
|
|
34
|
-
*
|
|
35
|
-
* Extends the base Slider component to provide range selection functionality with two thumbs,
|
|
36
|
-
* allowing users to define both minimum and maximum values within a specified range.
|
|
37
|
-
* Maintains all accessibility features and layout options of the base slider while
|
|
38
|
-
* providing intuitive range selection controls.
|
|
39
|
-
*
|
|
40
|
-
* @example
|
|
41
|
-
* // Basic range slider
|
|
42
|
-
* <RangeSlider label="Price Range" defaultValue={[20, 80]} minValue={0} maxValue={100} />
|
|
43
|
-
*
|
|
44
|
-
* @example
|
|
45
|
-
* // Controlled range slider with input fields
|
|
46
|
-
* <RangeSlider
|
|
47
|
-
* label="Temperature Range"
|
|
48
|
-
* value={tempRange}
|
|
49
|
-
* onChange={setTempRange}
|
|
50
|
-
* showInput
|
|
51
|
-
* minValue={-10}
|
|
52
|
-
* maxValue={40}
|
|
53
|
-
* />
|
|
54
|
-
*/
|
|
55
|
-
declare const RangeSlider: ({ defaultValue, value, ...props }: RangeSliderProps) => react_jsx_runtime.JSX.Element;
|
|
16
|
+
declare const Slider: ({ classNames, label: labelProp, layout, maxValue: maxValueProp, minValue: minValueProp, orientation, showInput, showLabel, ...rest }: SliderProps) => react_jsx_runtime.JSX.Element;
|
|
56
17
|
|
|
57
|
-
export {
|
|
18
|
+
export { Slider };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {jsx,jsxs,Fragment}from'react/jsx-runtime';import
|
|
1
|
+
import {jsx,jsxs,Fragment}from'react/jsx-runtime';import'client-only';import {Fragment as Fragment$1}from'react';import {Slider,composeRenderProps,Label,Input,SliderTrack,SliderThumb,Text}from'react-aria-components';import {Tooltip}from'../tooltip/index.js';import {SliderStyles}from'./styles.js';const {slider:x,label:A,inputs:B,input:F,thumb:D,track:P,trackBackground:$,trackValue:z,minValue:C,maxValue:L}=SliderStyles(),I=({classNames:r,label:n,layout:T="grid",maxValue:d=100,minValue:c=0,orientation:b="horizontal",showInput:p,showLabel:s=true,...k})=>jsx(Slider,{...k,className:composeRenderProps(r?.slider,a=>x({className:a})),maxValue:d,minValue:c,orientation:b,"aria-label":s?void 0:n,"data-layout":T,children:({state:a})=>jsxs(Fragment,{children:[s&&jsx(Label,{className:A({className:r?.label}),children:n}),p&&jsx("div",{className:B({className:r?.inputs}),children:a.values.map((m,l)=>jsx(Input,{className:composeRenderProps(r?.input,i=>F({className:i})),value:m,onChange:i=>a.setThumbValue(l,Number.parseFloat(i.target.value))},`number-field-${l===0?"min":"max"}`))}),jsxs(SliderTrack,{className:composeRenderProps(r?.track,m=>P({className:m})),children:[jsx("div",{className:$({className:r?.trackBackground})}),a.values.map((m,l)=>jsxs(Fragment$1,{children:[jsx("div",{className:z({className:r?.trackValue}),"data-start":a.values.length===1?0:a.getThumbPercent(0),"data-end":a.getThumbPercent(a.values.length===1?0:1)}),jsxs(Tooltip,{isDisabled:!p||a.isThumbDragging(l),children:[jsx(Tooltip.Trigger,{children:jsx(SliderThumb,{index:l,className:composeRenderProps(r?.thumb,i=>D({className:i}))})}),jsx(Tooltip.Body,{placement:"top",children:a.getThumbValue(l)})]})]},`slider-${l===0?"min":"max"}`))]}),jsx(Text,{slot:"min",className:C({className:r?.minValue}),children:c}),jsx(Text,{slot:"max",className:L({className:r?.maxValue}),children:d})]})});export{I as Slider};//# sourceMappingURL=index.js.map
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/slider/index.tsx"],"names":["e","labelVariants","cva","value","defaultRangeValue","rangeValue","sliderDefaultValue","isRange","defaultValue","jsxs","RACSlider","c","x","maxValue","sliderValue","props","jsx","Label","a","A","label","inputVariants","O","layout","state","minValue","startPercent","h","sliderTrackBackgroundVariants","_","index","Fragment","sliderTrackValueVariants","sizeInPercent","SliderThumb","sliderThumbVariants","Tooltip","f","Text","V","RangeSlider","Slider","useSlottedContext","LabelContext","NumberField","j","labelProps","v","C"],"mappings":"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","file":"index.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\nimport { cn } from '@/lib/utils';\nimport 'client-only';\nimport { cva } from 'class-variance-authority';\nimport { useContext } from 'react';\nimport {\n Input,\n Label,\n LabelContext,\n NumberField,\n Slider as RACSlider,\n type SliderProps as RACSliderProps,\n SliderTrack as RACSliderTrack,\n SliderStateContext,\n SliderThumb,\n Text,\n useSlottedContext,\n} from 'react-aria-components';\nimport { Tooltip } from '../tooltip';\n\nconst sliderVariants = cva('grid gap-s', {\n variants: {\n layout: {\n stacked: '',\n inline: '',\n },\n orientation: {\n vertical: 'h-full w-fit',\n horizontal: 'h-xl w-full',\n },\n },\n compoundVariants: [\n {\n layout: 'stacked',\n orientation: 'horizontal',\n className: 'grid-cols-[auto_1fr_auto] grid-rows-[auto_auto_auto]',\n },\n {\n layout: 'inline',\n orientation: 'horizontal',\n className: 'grid-cols-[auto_auto_1fr_auto_auto] grid-rows-1 items-center',\n },\n {\n layout: 'stacked',\n orientation: 'vertical',\n className: 'grid-cols-[auto_auto_auto] grid-rows-[auto_auto_1fr_auto]',\n },\n {\n layout: 'inline',\n orientation: 'vertical',\n className: 'grid-cols-[auto_1fr_auto] grid-rows-[auto_auto_1fr_auto]',\n },\n ],\n});\n\nconst minValueVariants = cva('font-display text-body-m text-default-dark', {\n variants: {\n orientation: {\n horizontal: '',\n vertical: 'col-start-1 row-start-4',\n },\n layout: {\n inline: '',\n stacked: '',\n },\n },\n compoundVariants: [\n {\n layout: 'stacked',\n orientation: 'horizontal',\n className: 'col-start-1 row-start-3',\n },\n {\n layout: 'inline',\n orientation: 'horizontal',\n className: 'order-2',\n },\n {\n layout: 'stacked',\n orientation: 'vertical',\n className: 'self-end justify-self-end',\n },\n {\n layout: 'inline',\n orientation: 'vertical',\n className: 'justify-self-center',\n },\n ],\n});\n\nconst maxValueVariants = cva('font-display text-body-m text-default-dark', {\n variants: {\n orientation: {\n horizontal: '',\n vertical: 'col-start-1 row-start-2',\n },\n layout: {\n inline: '',\n stacked: '',\n },\n },\n compoundVariants: [\n {\n layout: 'stacked',\n orientation: 'horizontal',\n className: 'col-start-3 row-start-3 justify-self-end',\n },\n {\n layout: 'inline',\n orientation: 'horizontal',\n className: 'order-4',\n },\n {\n layout: 'stacked',\n orientation: 'vertical',\n className: 'justify-self-end',\n },\n ],\n});\n\nconst sliderTrackVariants = cva('relative', {\n variants: {\n orientation: {\n horizontal: 'h-s w-full',\n vertical: 'h-full w-s',\n },\n layout: {\n inline: '',\n stacked: '',\n },\n },\n compoundVariants: [\n {\n orientation: 'horizontal',\n layout: 'stacked',\n className: 'col-span-3 row-start-2',\n },\n {\n orientation: 'horizontal',\n layout: 'inline',\n className: 'order-3',\n },\n {\n orientation: 'vertical',\n layout: 'stacked',\n className: 'col-start-2 row-span-3 row-start-2',\n },\n {\n orientation: 'vertical',\n layout: 'inline',\n className: 'col-start-1 row-start-3 justify-self-center',\n },\n ],\n});\n\nconst inputVariants = cva('flex gap-s', {\n variants: {\n orientation: {\n horizontal: 'flex-row',\n vertical: 'flex-col-reverse',\n },\n layout: {\n inline: 'order-5',\n stacked: 'col-start-3 row-start-1',\n },\n },\n compoundVariants: [\n {\n layout: 'inline',\n orientation: 'horizontal',\n className: 'order-5',\n },\n {\n layout: 'inline',\n orientation: 'vertical',\n className: 'col-span-3 col-start-1',\n },\n {\n layout: 'stacked',\n orientation: 'vertical',\n className: 'row-start-4',\n },\n ],\n});\n\nconst labelVariants = cva('text-default-light', {\n variants: {\n orientation: {\n horizontal: '',\n vertical: '',\n },\n layout: {\n inline: 'order-1',\n stacked: 'col-start-1',\n },\n },\n compoundVariants: [\n {\n layout: 'stacked',\n orientation: 'vertical',\n className: 'col-span-2',\n },\n {\n layout: 'inline',\n orientation: 'vertical',\n className: 'col-span-3',\n },\n ],\n});\n\nconst sliderThumbVariants = cva(\n 'h-m w-m rounded-full bg-highlight-bold outline-highlight-bold/40 hover:outline-4 focus-visible:outline-4',\n {\n variants: {\n orientation: {\n horizontal: 'translate-y-[50%]',\n vertical: 'translate-x-[40%]',\n },\n },\n },\n);\n\nconst sliderTrackBackgroundVariants = cva(\n 'absolute rounded-full bg-default-light/40',\n {\n variants: {\n orientation: {\n horizontal: 'top-[50%] h-xxs w-full translate-y-[50%]',\n vertical: 'left-[50%] h-full w-xxs ',\n },\n },\n },\n);\n\nconst sliderTrackValueVariants = cva('absolute rounded-full bg-highlight', {\n variants: {\n orientation: {\n horizontal: 'top-1/2 h-xxs translate-y-1/2',\n vertical: 'left-1/2 w-xxs',\n },\n },\n});\n\nexport interface SliderProps\n extends Omit<\n RACSliderProps,\n 'value' | 'defaultValue' | 'showOutput' | 'slot' | 'style' | 'formatOptions'\n > {\n className?: string;\n showInput?: boolean;\n showLabel?: boolean;\n layout?: 'stacked' | 'inline';\n value?: number;\n defaultValue?: number;\n rangeValue?: [number, number];\n defaultRangeValue?: [number, number];\n isRange?: boolean;\n label: string;\n}\n\n/**\n * Slider - An interactive range input component for numeric value selection\n *\n * Provides accessible slider functionality with optional input field integration,\n * flexible layouts, and comprehensive keyboard and mouse interaction support.\n * Perfect for settings, filters, or any numeric input requiring visual feedback.\n *\n * @example\n * // Basic slider\n * <Slider label=\"Volume\" defaultValue={50} />\n */\nexport const Slider = ({\n children,\n className,\n showInput = false,\n showLabel = true,\n layout = 'stacked',\n value,\n defaultValue,\n label,\n defaultRangeValue,\n rangeValue,\n minValue = 0,\n maxValue = 100,\n isRange = false,\n orientation = 'horizontal',\n ...props\n}: SliderProps) => {\n const sliderValue = isRange ? rangeValue : value;\n const sliderDefaultValue = isRange ? defaultRangeValue : defaultValue;\n\n return (\n <RACSlider\n className={cn(sliderVariants({ orientation, layout }))}\n minValue={minValue}\n maxValue={maxValue}\n orientation={orientation}\n value={sliderValue}\n defaultValue={sliderDefaultValue}\n {...props}\n >\n {showLabel && (\n <Label className={labelVariants({ orientation, layout })}>\n {label}\n </Label>\n )}\n {showInput && (\n <div className={inputVariants({ orientation, layout })}>\n <SliderInput />\n </div>\n )}\n <RACSliderTrack className={sliderTrackVariants({ layout, orientation })}>\n {({ state }) => {\n const minValue = state.getThumbPercent(0);\n const maxValue = state.getThumbPercent(1) || minValue;\n const sizeInPercent = `${(state.values.length === 2 ? maxValue - minValue : minValue) * 100}%`;\n const startPercent =\n state.values.length === 2 ? `${Math.floor(minValue * 100)}%` : '0';\n return (\n <>\n <div className={sliderTrackBackgroundVariants({ orientation })} />\n {state.values.map((_, index) => {\n return (\n <>\n <div\n key={`slider-${index === 0 ? 'min' : 'max'}`}\n className={sliderTrackValueVariants({ orientation })}\n style={\n orientation === 'horizontal'\n ? {\n left: startPercent,\n width: sizeInPercent,\n }\n : {\n bottom: startPercent,\n height: sizeInPercent,\n }\n }\n />\n\n <SliderThumb\n key={`slider-thumb-${index === 0 ? 'min' : 'max'}`}\n index={index}\n className={sliderThumbVariants({ orientation })}\n >\n {!showInput && (\n <Tooltip>\n <Tooltip.Trigger>\n <div className='size-full outline-none' />\n </Tooltip.Trigger>\n <Tooltip.Body placement='top'>\n {state.getThumbValue(index)}\n </Tooltip.Body>\n </Tooltip>\n )}\n </SliderThumb>\n </>\n );\n })}\n </>\n );\n }}\n </RACSliderTrack>\n <Text slot='min' className={minValueVariants({ layout, orientation })}>\n {minValue}\n </Text>\n <Text slot='max' className={maxValueVariants({ layout, orientation })}>\n {maxValue}\n </Text>\n </RACSlider>\n );\n};\n\nexport type RangeSliderProps = Omit<\n SliderProps,\n 'isRange' | 'defaultRangeValue' | 'rangeValue' | 'defaultValue' | 'value'\n> & {\n defaultValue?: SliderProps['defaultRangeValue'];\n value: SliderProps['rangeValue'];\n};\n\n/**\n * RangeSlider - A dual-handle slider component for selecting a range of numeric values\n *\n * Extends the base Slider component to provide range selection functionality with two thumbs,\n * allowing users to define both minimum and maximum values within a specified range.\n * Maintains all accessibility features and layout options of the base slider while\n * providing intuitive range selection controls.\n *\n * @example\n * // Basic range slider\n * <RangeSlider label=\"Price Range\" defaultValue={[20, 80]} minValue={0} maxValue={100} />\n *\n * @example\n * // Controlled range slider with input fields\n * <RangeSlider\n * label=\"Temperature Range\"\n * value={tempRange}\n * onChange={setTempRange}\n * showInput\n * minValue={-10}\n * maxValue={40}\n * />\n */\nexport const RangeSlider = ({\n defaultValue,\n value,\n ...props\n}: RangeSliderProps) => {\n return (\n <Slider\n {...props}\n isRange\n defaultRangeValue={defaultValue}\n rangeValue={value}\n />\n );\n};\n\nfunction SliderInput({ className }: { className?: string }) {\n const state = useContext(SliderStateContext);\n const labelProps = useSlottedContext(LabelContext);\n return (\n <>\n {state?.values.map((value: number, index: number) => (\n <NumberField\n key={`number-field-${index === 0 ? 'min' : 'max'}`}\n aria-labelledby={labelProps?.id}\n value={value}\n onChange={(v) => state.setThumbValue(0, v)}\n >\n <Input\n className={cn(\n 'w-[50px] rounded-medium border border-interactive px-s py-xs font-display text-body-m text-default-light',\n className,\n )}\n />\n </NumberField>\n ))}\n </>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/slider/index.tsx"],"names":["thumb","track","trackValue","SliderStyles","f","classNames","minValueProp","orientation","showLabel","jsx","AriaSlider","e","h","className","slider","maxValueProp","layout","jsxs","Fragment","o","label","showInput","value","index","Input","composeRenderProps","input","event","state","AriaSliderTrack","_","Tooltip","u","N","g"],"mappings":"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","file":"index.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport 'client-only';\nimport { Fragment } from 'react';\nimport {\n Slider as AriaSlider,\n SliderTrack as AriaSliderTrack,\n Input,\n Label,\n SliderThumb,\n Text,\n composeRenderProps,\n} from 'react-aria-components';\nimport { Tooltip } from '../tooltip';\nimport { SliderStyles } from './styles';\nimport type { SliderProps } from './types';\n\nconst {\n slider,\n label,\n inputs,\n input,\n thumb,\n track,\n trackBackground,\n trackValue,\n minValue,\n maxValue,\n} = SliderStyles();\n\n/**\n * Slider - An interactive range input component for numeric value selection\n *\n * Provides accessible slider functionality with optional input field integration,\n * flexible layouts, and comprehensive keyboard and mouse interaction support.\n * Perfect for settings, filters, or any numeric input requiring visual feedback.\n *\n * @example\n * // Basic slider\n * <Slider label=\"Volume\" defaultValue={50} />\n */\nexport const Slider = ({\n classNames,\n label: labelProp,\n layout = 'grid',\n maxValue: maxValueProp = 100,\n minValue: minValueProp = 0,\n orientation = 'horizontal',\n showInput,\n showLabel = true,\n ...rest\n}: SliderProps) => {\n return (\n <AriaSlider\n {...rest}\n className={composeRenderProps(classNames?.slider, (className) =>\n slider({ className }),\n )}\n maxValue={maxValueProp}\n minValue={minValueProp}\n orientation={orientation}\n aria-label={showLabel ? undefined : labelProp}\n data-layout={layout}\n >\n {({ state }) => (\n <>\n {showLabel && (\n <Label className={label({ className: classNames?.label })}>\n {labelProp}\n </Label>\n )}\n {showInput && (\n <div\n className={inputs({\n className: classNames?.inputs,\n })}\n >\n {state.values.map((value, index) => (\n <Input\n key={`number-field-${index === 0 ? 'min' : 'max'}`}\n className={composeRenderProps(\n classNames?.input,\n (className) => input({ className }),\n )}\n value={value}\n onChange={(event) =>\n state.setThumbValue(\n index,\n Number.parseFloat(event.target.value),\n )\n }\n />\n ))}\n </div>\n )}\n <AriaSliderTrack\n className={composeRenderProps(classNames?.track, (className) =>\n track({ className }),\n )}\n >\n <div\n className={trackBackground({\n className: classNames?.trackBackground,\n })}\n />\n {state.values.map((_, index) => (\n <Fragment key={`slider-${index === 0 ? 'min' : 'max'}`}>\n <div\n className={trackValue({\n className: classNames?.trackValue,\n })}\n data-start={\n state.values.length === 1 ? 0 : state.getThumbPercent(0)\n }\n data-end={state.getThumbPercent(\n state.values.length === 1 ? 0 : 1,\n )}\n />\n <Tooltip\n isDisabled={!showInput || state.isThumbDragging(index)}\n >\n <Tooltip.Trigger>\n <SliderThumb\n index={index}\n className={composeRenderProps(\n classNames?.thumb,\n (className) => thumb({ className }),\n )}\n />\n </Tooltip.Trigger>\n <Tooltip.Body placement='top'>\n {state.getThumbValue(index)}\n </Tooltip.Body>\n </Tooltip>\n </Fragment>\n ))}\n </AriaSliderTrack>\n <Text\n slot='min'\n className={minValue({ className: classNames?.minValue })}\n >\n {minValueProp}\n </Text>\n <Text\n slot='max'\n className={maxValue({ className: classNames?.maxValue })}\n >\n {maxValueProp}\n </Text>\n </>\n )}\n </AriaSlider>\n );\n};\n"]}
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import * as tailwind_variants from 'tailwind-variants';
|
|
2
|
+
import * as tailwind_merge from 'tailwind-merge';
|
|
3
|
+
|
|
4
|
+
declare const SliderStyles: tailwind_variants.TVReturnType<{
|
|
5
|
+
[key: string]: {
|
|
6
|
+
[key: string]: tailwind_merge.ClassNameValue | {
|
|
7
|
+
slider?: tailwind_merge.ClassNameValue;
|
|
8
|
+
input?: tailwind_merge.ClassNameValue;
|
|
9
|
+
label?: tailwind_merge.ClassNameValue;
|
|
10
|
+
track?: tailwind_merge.ClassNameValue;
|
|
11
|
+
minValue?: tailwind_merge.ClassNameValue;
|
|
12
|
+
maxValue?: tailwind_merge.ClassNameValue;
|
|
13
|
+
inputs?: tailwind_merge.ClassNameValue;
|
|
14
|
+
trackBackground?: tailwind_merge.ClassNameValue;
|
|
15
|
+
trackValue?: tailwind_merge.ClassNameValue;
|
|
16
|
+
thumb?: tailwind_merge.ClassNameValue;
|
|
17
|
+
};
|
|
18
|
+
};
|
|
19
|
+
} | {
|
|
20
|
+
[x: string]: {
|
|
21
|
+
[x: string]: tailwind_merge.ClassNameValue | {
|
|
22
|
+
slider?: tailwind_merge.ClassNameValue;
|
|
23
|
+
input?: tailwind_merge.ClassNameValue;
|
|
24
|
+
label?: tailwind_merge.ClassNameValue;
|
|
25
|
+
track?: tailwind_merge.ClassNameValue;
|
|
26
|
+
minValue?: tailwind_merge.ClassNameValue;
|
|
27
|
+
maxValue?: tailwind_merge.ClassNameValue;
|
|
28
|
+
inputs?: tailwind_merge.ClassNameValue;
|
|
29
|
+
trackBackground?: tailwind_merge.ClassNameValue;
|
|
30
|
+
trackValue?: tailwind_merge.ClassNameValue;
|
|
31
|
+
thumb?: tailwind_merge.ClassNameValue;
|
|
32
|
+
};
|
|
33
|
+
};
|
|
34
|
+
} | {}, {
|
|
35
|
+
slider: string[];
|
|
36
|
+
label: string[];
|
|
37
|
+
inputs: string[];
|
|
38
|
+
input: string;
|
|
39
|
+
track: string[];
|
|
40
|
+
trackBackground: string[];
|
|
41
|
+
trackValue: string[];
|
|
42
|
+
thumb: string[];
|
|
43
|
+
minValue: string[];
|
|
44
|
+
maxValue: string[];
|
|
45
|
+
}, undefined, {
|
|
46
|
+
[key: string]: {
|
|
47
|
+
[key: string]: tailwind_merge.ClassNameValue | {
|
|
48
|
+
slider?: tailwind_merge.ClassNameValue;
|
|
49
|
+
input?: tailwind_merge.ClassNameValue;
|
|
50
|
+
label?: tailwind_merge.ClassNameValue;
|
|
51
|
+
track?: tailwind_merge.ClassNameValue;
|
|
52
|
+
minValue?: tailwind_merge.ClassNameValue;
|
|
53
|
+
maxValue?: tailwind_merge.ClassNameValue;
|
|
54
|
+
inputs?: tailwind_merge.ClassNameValue;
|
|
55
|
+
trackBackground?: tailwind_merge.ClassNameValue;
|
|
56
|
+
trackValue?: tailwind_merge.ClassNameValue;
|
|
57
|
+
thumb?: tailwind_merge.ClassNameValue;
|
|
58
|
+
};
|
|
59
|
+
};
|
|
60
|
+
} | {}, {
|
|
61
|
+
slider: string[];
|
|
62
|
+
label: string[];
|
|
63
|
+
inputs: string[];
|
|
64
|
+
input: string;
|
|
65
|
+
track: string[];
|
|
66
|
+
trackBackground: string[];
|
|
67
|
+
trackValue: string[];
|
|
68
|
+
thumb: string[];
|
|
69
|
+
minValue: string[];
|
|
70
|
+
maxValue: string[];
|
|
71
|
+
}, tailwind_variants.TVReturnType<unknown, {
|
|
72
|
+
slider: string[];
|
|
73
|
+
label: string[];
|
|
74
|
+
inputs: string[];
|
|
75
|
+
input: string;
|
|
76
|
+
track: string[];
|
|
77
|
+
trackBackground: string[];
|
|
78
|
+
trackValue: string[];
|
|
79
|
+
thumb: string[];
|
|
80
|
+
minValue: string[];
|
|
81
|
+
maxValue: string[];
|
|
82
|
+
}, undefined, unknown, unknown, undefined>>;
|
|
83
|
+
|
|
84
|
+
export { SliderStyles };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import {tv}from'tailwind-variants';const t=tv({slots:{slider:["group/slider flex gap-s","layout-grid:grid","layout-stack:flex","orientation-vertical:h-full orientation-vertical:w-fit","orientation-vertical:layout-grid:grid-cols-[auto_auto_auto] orientation-vertical:layout-grid:grid-rows-[auto_auto_1fr_auto]","orientation-vertical:layout-stack:flex-col","orientation-horizontal:h-xl","orientation-horizontal:layout-grid:grid-cols-[auto_1fr_auto] orientation-horizontal:layout-grid:grid-rows-[auto_auto_auto]","orientation-horizontal:layout-stack:w-full orientation-horizontal:layout-stack:items-center"],label:["order-1 text-default-light","group-layout-grid/slider:col-start-1","group-orientation-vertical/slider:group-layout-grid/slider:col-span-2"],inputs:["order-5 flex gap-s","group-layout-grid/slider:col-start-3 group-layout-grid/slider:row-start-1","group-orientation-horizontal/slider:flex-row","group-orientation-vertical/slider:flex-col-reverse","group-orientation-vertical/slider:group-layout-grid/slider:row-start-4"],input:"w-[50px] rounded-medium border border-interactive px-s py-xs font-display text-body-m text-default-light",track:["relative order-3 h-full","group-orientation-horizontal/slider:h-[20px] group-orientation-horizontal/slider:w-full","group-orientation-horizontal/slider:group-layout-grid/slider:col-span-3 group-orientation-horizontal/slider:group-layout-grid/slider:row-start-2","group-orientation-vertical/slider:h-full group-orientation-vertical/slider:w-[20px]","group-orientation-vertical/slider:group-layout-grid/slider:col-start-2 group-orientation-vertical/slider:group-layout-grid/slider:row-span-3 group-orientation-vertical/slider:group-layout-grid/slider:row-start-2"],trackBackground:["absolute rounded-full bg-default-light/40","group-orientation-horizontal/slider:-translate-y-1/2 group-orientation-horizontal/slider:top-1/2 group-orientation-horizontal/slider:h-xxs group-orientation-horizontal/slider:w-full","group-orientation-vertical/slider:-translate-x-1/2 group-orientation-vertical/slider:left-1/2 group-orientation-vertical/slider:h-full group-orientation-vertical/slider:w-xxs"],trackValue:["absolute rounded-full bg-highlight","group-orientation-horizontal/slider:-translate-y-1/2 group-orientation-horizontal/slider:top-1/2 group-orientation-horizontal/slider:right-[calc(100%-attr(data-end_%)*100)] group-orientation-horizontal/slider:left-[calc(attr(data-start_%)*100)] group-orientation-horizontal/slider:h-xxs","group-orientation-vertical/slider:-translate-x-1/2 group-orientation-vertical/slider:top-[calc(100%-attr(data-end_%)*100)] group-orientation-vertical/slider:bottom-[calc(attr(data-start_%)*100)] group-orientation-vertical/slider:left-1/2 group-orientation-vertical/slider:w-xxs"],thumb:["h-m w-m rounded-full bg-highlight-bold outline-highlight-bold/40","focus-visible:outline-4","hover:outline-4","group-orientation-horizontal/slider:top-1/2","group-orientation-vertical/slider:left-1/2"],minValue:["flex items-center font-display text-body-m text-default-dark","group-orientation-vertical/slider:col-start-1 group-orientation-vertical/slider:row-start-4","group-orientation-horizontal/slider:group-layout-grid/slider:col-start-1","group-orientation-horizontal/slider:group-layout-grid/slider:row-start-3","group-orientation-horizontal/slider:order-2","group-orientation-vertical/slider:group-layout-grid/slider:self-end","group-orientation-vertical/slider:group-layout-grid/slider:justify-self-end","group-orientation-vertical/slider:order-4"],maxValue:["order-4 flex items-center font-display text-body-m text-default-dark","group-orientation-vertical/slider:order-2","group-orientation-vertical/slider:group-layout-grid/slider:col-start-1 group-orientation-vertical/slider:group-layout-grid/slider:row-start-2","group-orientation-vertical/slider:group-layout-grid/slider:justify-self-end","group-orientation-horizontal/slider:group-layout-grid/slider:col-start-3","group-orientation-horizontal/slider:group-layout-grid/slider:row-start-3","group-orientation-horizontal/slider:group-layout-grid/slider:justify-self-end"]}});export{t as SliderStyles};//# sourceMappingURL=styles.js.map
|
|
2
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/slider/styles.ts"],"names":["SliderStyles","tv"],"mappings":"yCAcaA,CAAAA,CAAeC,EAAAA,CAAG,CAC7B,KAAA,CAAO,CACL,MAAA,CAAQ,CACN,0BACA,kBAAA,CACA,mBAAA,CACA,yDACA,6HAAA,CACA,4CAAA,CACA,8BACA,4HAAA,CACA,6FACF,CAAA,CACA,KAAA,CAAO,CACL,4BAAA,CACA,sCAAA,CACA,uEACF,CAAA,CACA,MAAA,CAAQ,CACN,oBAAA,CACA,2EAAA,CACA,+CACA,oDAAA,CACA,wEACF,EACA,KAAA,CACE,0GAAA,CACF,MAAO,CACL,yBAAA,CACA,0FACA,kJAAA,CACA,qFAAA,CACA,qNACF,CAAA,CACA,gBAAiB,CACf,2CAAA,CACA,wLACA,gLACF,CAAA,CACA,WAAY,CACV,oCAAA,CACA,iSACA,uRACF,CAAA,CACA,MAAO,CACL,kEAAA,CACA,0BACA,iBAAA,CACA,6CAAA,CACA,4CACF,CAAA,CACA,QAAA,CAAU,CACR,8DAAA,CACA,8FACA,0EAAA,CACA,0EAAA,CACA,8CACA,qEAAA,CACA,6EAAA,CACA,2CACF,CAAA,CACA,QAAA,CAAU,CACR,sEAAA,CACA,2CAAA,CACA,gJACA,6EAAA,CACA,0EAAA,CACA,2EACA,+EACF,CACF,CACF,CAAC","file":"styles.js","sourcesContent":["import { tv } from 'tailwind-variants';\n\n/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport const SliderStyles = tv({\n slots: {\n slider: [\n 'group/slider flex gap-s',\n 'layout-grid:grid',\n 'layout-stack:flex',\n 'orientation-vertical:h-full orientation-vertical:w-fit',\n 'orientation-vertical:layout-grid:grid-cols-[auto_auto_auto] orientation-vertical:layout-grid:grid-rows-[auto_auto_1fr_auto]',\n 'orientation-vertical:layout-stack:flex-col',\n 'orientation-horizontal:h-xl',\n 'orientation-horizontal:layout-grid:grid-cols-[auto_1fr_auto] orientation-horizontal:layout-grid:grid-rows-[auto_auto_auto]',\n 'orientation-horizontal:layout-stack:w-full orientation-horizontal:layout-stack:items-center',\n ],\n label: [\n 'order-1 text-default-light',\n 'group-layout-grid/slider:col-start-1',\n 'group-orientation-vertical/slider:group-layout-grid/slider:col-span-2',\n ],\n inputs: [\n 'order-5 flex gap-s',\n 'group-layout-grid/slider:col-start-3 group-layout-grid/slider:row-start-1',\n 'group-orientation-horizontal/slider:flex-row',\n 'group-orientation-vertical/slider:flex-col-reverse',\n 'group-orientation-vertical/slider:group-layout-grid/slider:row-start-4',\n ],\n input:\n 'w-[50px] rounded-medium border border-interactive px-s py-xs font-display text-body-m text-default-light',\n track: [\n 'relative order-3 h-full',\n 'group-orientation-horizontal/slider:h-[20px] group-orientation-horizontal/slider:w-full',\n 'group-orientation-horizontal/slider:group-layout-grid/slider:col-span-3 group-orientation-horizontal/slider:group-layout-grid/slider:row-start-2',\n 'group-orientation-vertical/slider:h-full group-orientation-vertical/slider:w-[20px]',\n 'group-orientation-vertical/slider:group-layout-grid/slider:col-start-2 group-orientation-vertical/slider:group-layout-grid/slider:row-span-3 group-orientation-vertical/slider:group-layout-grid/slider:row-start-2',\n ],\n trackBackground: [\n 'absolute rounded-full bg-default-light/40',\n 'group-orientation-horizontal/slider:-translate-y-1/2 group-orientation-horizontal/slider:top-1/2 group-orientation-horizontal/slider:h-xxs group-orientation-horizontal/slider:w-full',\n 'group-orientation-vertical/slider:-translate-x-1/2 group-orientation-vertical/slider:left-1/2 group-orientation-vertical/slider:h-full group-orientation-vertical/slider:w-xxs',\n ],\n trackValue: [\n 'absolute rounded-full bg-highlight',\n 'group-orientation-horizontal/slider:-translate-y-1/2 group-orientation-horizontal/slider:top-1/2 group-orientation-horizontal/slider:right-[calc(100%-attr(data-end_%)*100)] group-orientation-horizontal/slider:left-[calc(attr(data-start_%)*100)] group-orientation-horizontal/slider:h-xxs',\n 'group-orientation-vertical/slider:-translate-x-1/2 group-orientation-vertical/slider:top-[calc(100%-attr(data-end_%)*100)] group-orientation-vertical/slider:bottom-[calc(attr(data-start_%)*100)] group-orientation-vertical/slider:left-1/2 group-orientation-vertical/slider:w-xxs',\n ],\n thumb: [\n 'h-m w-m rounded-full bg-highlight-bold outline-highlight-bold/40',\n 'focus-visible:outline-4',\n 'hover:outline-4',\n 'group-orientation-horizontal/slider:top-1/2',\n 'group-orientation-vertical/slider:left-1/2',\n ],\n minValue: [\n 'flex items-center font-display text-body-m text-default-dark',\n 'group-orientation-vertical/slider:col-start-1 group-orientation-vertical/slider:row-start-4',\n 'group-orientation-horizontal/slider:group-layout-grid/slider:col-start-1',\n 'group-orientation-horizontal/slider:group-layout-grid/slider:row-start-3',\n 'group-orientation-horizontal/slider:order-2',\n 'group-orientation-vertical/slider:group-layout-grid/slider:self-end',\n 'group-orientation-vertical/slider:group-layout-grid/slider:justify-self-end',\n 'group-orientation-vertical/slider:order-4',\n ],\n maxValue: [\n 'order-4 flex items-center font-display text-body-m text-default-dark',\n 'group-orientation-vertical/slider:order-2',\n 'group-orientation-vertical/slider:group-layout-grid/slider:col-start-1 group-orientation-vertical/slider:group-layout-grid/slider:row-start-2',\n 'group-orientation-vertical/slider:group-layout-grid/slider:justify-self-end',\n 'group-orientation-horizontal/slider:group-layout-grid/slider:col-start-3',\n 'group-orientation-horizontal/slider:group-layout-grid/slider:row-start-3',\n 'group-orientation-horizontal/slider:group-layout-grid/slider:justify-self-end',\n ],\n },\n});\n"]}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { SliderProps as SliderProps$1, LabelProps, InputProps, SliderTrackProps, SliderThumbProps } from 'react-aria-components';
|
|
2
|
+
|
|
3
|
+
type SliderProps = Omit<SliderProps$1, 'children' | 'className'> & {
|
|
4
|
+
classNames?: {
|
|
5
|
+
slider?: SliderProps$1['className'];
|
|
6
|
+
label?: LabelProps['className'];
|
|
7
|
+
inputs?: string;
|
|
8
|
+
input?: InputProps['className'];
|
|
9
|
+
track?: SliderTrackProps['className'];
|
|
10
|
+
trackBackground?: string;
|
|
11
|
+
trackValue?: string;
|
|
12
|
+
thumb?: SliderThumbProps['className'];
|
|
13
|
+
minValue?: string;
|
|
14
|
+
maxValue?: string;
|
|
15
|
+
};
|
|
16
|
+
label: string;
|
|
17
|
+
layout?: 'grid' | 'stack';
|
|
18
|
+
showInput?: boolean;
|
|
19
|
+
showLabel?: boolean;
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
export type { SliderProps };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"types.js"}
|