@accelint/design-toolkit 2.5.0 → 3.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/index.d.ts +42 -0
- package/dist/components/accordion/index.js.map +1 -1
- package/dist/components/accordion/styles.js +1 -1
- package/dist/components/accordion/styles.js.map +1 -1
- package/dist/components/avatar/index.d.ts +29 -0
- package/dist/components/avatar/index.js.map +1 -1
- package/dist/components/badge/index.d.ts +24 -0
- package/dist/components/badge/index.js.map +1 -1
- package/dist/components/button/index.d.ts +104 -0
- package/dist/components/button/index.js +1 -1
- package/dist/components/button/index.js.map +1 -1
- package/dist/components/button/styles.d.ts +28 -106
- package/dist/components/button/styles.js +1 -1
- package/dist/components/button/styles.js.map +1 -1
- package/dist/components/button/types.d.ts +6 -4
- package/dist/components/checkbox/index.d.ts +33 -0
- package/dist/components/checkbox/index.js.map +1 -1
- package/dist/components/checkbox/styles.d.ts +3 -3
- package/dist/components/checkbox/styles.js +1 -1
- package/dist/components/checkbox/styles.js.map +1 -1
- package/dist/components/chip/index.d.ts +34 -0
- package/dist/components/chip/index.js.map +1 -1
- package/dist/components/chip/styles.js +1 -1
- package/dist/components/chip/styles.js.map +1 -1
- package/dist/components/classification-badge/index.d.ts +15 -0
- package/dist/components/classification-badge/index.js.map +1 -1
- package/dist/components/classification-banner/index.d.ts +11 -0
- package/dist/components/classification-banner/index.js.map +1 -1
- package/dist/components/color-picker/styles.js +1 -1
- package/dist/components/color-picker/styles.js.map +1 -1
- package/dist/components/combobox-field/index.d.ts +19 -0
- package/dist/components/combobox-field/index.js +2 -0
- package/dist/components/combobox-field/index.js.map +1 -0
- package/dist/components/combobox-field/styles.d.ts +72 -0
- package/dist/components/combobox-field/styles.js +2 -0
- package/dist/components/combobox-field/styles.js.map +1 -0
- package/dist/components/combobox-field/types.d.ts +29 -0
- package/dist/components/date-field/index.d.ts +44 -0
- package/dist/components/date-field/index.js.map +1 -1
- package/dist/components/date-field/styles.d.ts +3 -3
- package/dist/components/date-field/styles.js +1 -1
- package/dist/components/date-field/styles.js.map +1 -1
- package/dist/components/dialog/index.d.ts +26 -4
- package/dist/components/dialog/index.js +1 -1
- package/dist/components/dialog/index.js.map +1 -1
- package/dist/components/drawer/events.d.ts +8 -0
- package/dist/components/drawer/events.js +2 -0
- package/dist/components/drawer/events.js.map +1 -0
- package/dist/components/drawer/index.d.ts +89 -43
- package/dist/components/drawer/index.js +1 -1
- package/dist/components/drawer/index.js.map +1 -1
- package/dist/components/drawer/styles.d.ts +50 -16
- package/dist/components/drawer/styles.js +1 -1
- package/dist/components/drawer/styles.js.map +1 -1
- package/dist/components/drawer/types.d.ts +154 -238
- package/dist/components/drawer/types.js +1 -1
- package/dist/components/drawer/types.js.map +1 -1
- package/dist/components/hotkey/index.d.ts +56 -0
- package/dist/components/hotkey/index.js +2 -0
- package/dist/components/hotkey/index.js.map +1 -0
- package/dist/components/hotkey/styles.d.ts +53 -0
- package/dist/components/hotkey/styles.js +2 -0
- package/dist/components/hotkey/styles.js.map +1 -0
- package/dist/components/hotkey/types.d.ts +8 -0
- package/dist/components/hotkey/types.js +2 -0
- package/dist/components/hotkey/types.js.map +1 -0
- package/dist/components/icon/index.d.ts +29 -0
- package/dist/components/icon/index.js.map +1 -1
- package/dist/components/input/index.d.ts +19 -0
- package/dist/components/input/index.js +1 -1
- package/dist/components/input/index.js.map +1 -1
- package/dist/components/input/styles.d.ts +2 -24
- package/dist/components/input/styles.js +1 -1
- package/dist/components/input/styles.js.map +1 -1
- package/dist/components/input/types.d.ts +1 -0
- package/dist/components/label/index.d.ts +19 -0
- package/dist/components/label/index.js.map +1 -1
- package/dist/components/menu/index.d.ts +69 -7
- package/dist/components/menu/index.js +1 -1
- package/dist/components/menu/index.js.map +1 -1
- package/dist/components/menu/styles.d.ts +19 -43
- package/dist/components/menu/styles.js +1 -1
- package/dist/components/menu/styles.js.map +1 -1
- package/dist/components/menu/types.d.ts +17 -15
- package/dist/components/options/index.d.ts +41 -0
- package/dist/components/options/index.js.map +1 -1
- package/dist/components/options/styles.d.ts +3 -3
- package/dist/components/options/styles.js +1 -1
- package/dist/components/options/styles.js.map +1 -1
- package/dist/components/popover/index.d.ts +36 -2
- package/dist/components/popover/index.js +1 -1
- package/dist/components/popover/index.js.map +1 -1
- package/dist/components/query-builder/index.d.ts +24 -0
- package/dist/components/query-builder/index.js.map +1 -1
- package/dist/components/query-builder/value-selector.js +1 -1
- package/dist/components/query-builder/value-selector.js.map +1 -1
- package/dist/components/radio/index.d.ts +31 -0
- package/dist/components/radio/index.js.map +1 -1
- package/dist/components/radio/styles.d.ts +3 -3
- package/dist/components/radio/styles.js +1 -1
- package/dist/components/radio/styles.js.map +1 -1
- package/dist/components/search-field/styles.js +1 -1
- package/dist/components/search-field/styles.js.map +1 -1
- package/dist/components/search-field/types.d.ts +1 -0
- package/dist/components/select-field/index.d.ts +67 -0
- package/dist/components/select-field/index.js +2 -0
- package/dist/components/select-field/index.js.map +1 -0
- package/dist/components/select-field/styles.d.ts +60 -0
- package/dist/components/select-field/styles.js +2 -0
- package/dist/components/select-field/styles.js.map +1 -0
- package/dist/components/select-field/types.d.ts +27 -0
- package/dist/components/select-field/types.js +2 -0
- package/dist/components/select-field/types.js.map +1 -0
- package/dist/components/slider/index.d.ts +36 -2
- package/dist/components/slider/index.js +1 -1
- package/dist/components/slider/index.js.map +1 -1
- package/dist/components/switch/index.d.ts +36 -0
- package/dist/components/switch/index.js +1 -1
- package/dist/components/switch/index.js.map +1 -1
- package/dist/components/switch/styles.d.ts +23 -21
- package/dist/components/switch/styles.js +1 -1
- package/dist/components/switch/styles.js.map +1 -1
- package/dist/components/switch/types.d.ts +1 -0
- package/dist/components/tabs/index.d.ts +46 -0
- package/dist/components/tabs/index.js.map +1 -1
- package/dist/components/text-area-field/index.d.ts +20 -0
- package/dist/components/text-area-field/index.js.map +1 -1
- package/dist/components/text-area-field/styles.d.ts +3 -3
- package/dist/components/text-area-field/styles.js +1 -1
- package/dist/components/text-area-field/styles.js.map +1 -1
- package/dist/components/text-field/index.d.ts +62 -0
- package/dist/components/text-field/index.js.map +1 -1
- package/dist/components/text-field/styles.d.ts +3 -3
- package/dist/components/text-field/types.d.ts +1 -0
- package/dist/components/tooltip/index.d.ts +42 -0
- package/dist/components/tooltip/index.js.map +1 -1
- package/dist/components/view-stack/events.d.ts +9 -0
- package/dist/components/view-stack/events.js +2 -0
- package/dist/components/view-stack/events.js.map +1 -0
- package/dist/components/view-stack/index.d.ts +31 -0
- package/dist/components/view-stack/index.js +2 -0
- package/dist/components/view-stack/index.js.map +1 -0
- package/dist/components/view-stack/types.d.ts +62 -0
- package/dist/components/view-stack/types.js +2 -0
- package/dist/components/view-stack/types.js.map +1 -0
- package/dist/index.css +20 -0
- package/dist/index.d.ts +24 -17
- package/dist/index.js +1 -1
- package/dist/lib/types.d.ts +6 -2
- package/dist/metafile-esm.json +1 -1
- package/dist/styles.css +1081 -676
- package/dist/variants/variants.css +6 -5
- package/package.json +11 -6
- package/dist/components/box/index.d.ts +0 -19
- package/dist/components/box/index.js +0 -2
- package/dist/components/box/index.js.map +0 -1
- package/dist/components/combobox/index.d.ts +0 -27
- package/dist/components/combobox/index.js +0 -2
- package/dist/components/combobox/index.js.map +0 -1
- package/dist/components/drawer/context.d.ts +0 -13
- package/dist/components/drawer/context.js +0 -2
- package/dist/components/drawer/context.js.map +0 -1
- package/dist/components/drawer/state.d.ts +0 -26
- package/dist/components/drawer/state.js +0 -2
- package/dist/components/drawer/state.js.map +0 -1
- package/dist/components/navigation-stack/index.d.ts +0 -20
- package/dist/components/navigation-stack/index.js +0 -2
- package/dist/components/navigation-stack/index.js.map +0 -1
- package/dist/components/navigation-stack/types.d.ts +0 -31
- /package/dist/components/{navigation-stack → combobox-field}/types.js +0 -0
- /package/dist/components/{navigation-stack → combobox-field}/types.js.map +0 -0
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as react from 'react';
|
|
3
|
+
import { ProviderProps } from '../../lib/types.js';
|
|
4
|
+
import { ContextValue } from 'react-aria-components';
|
|
5
|
+
import { SelectFieldProps } from './types.js';
|
|
6
|
+
import '../button/types.js';
|
|
7
|
+
import 'tailwind-variants';
|
|
8
|
+
import '../button/styles.js';
|
|
9
|
+
import 'tailwind-merge';
|
|
10
|
+
import '../label/types.js';
|
|
11
|
+
|
|
12
|
+
declare const SelectFieldContext: react.Context<ContextValue<SelectFieldProps, HTMLDivElement>>;
|
|
13
|
+
declare function SelectFieldProvider({ children, ...props }: ProviderProps<SelectFieldProps>): react_jsx_runtime.JSX.Element;
|
|
14
|
+
declare namespace SelectFieldProvider {
|
|
15
|
+
var displayName: string;
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* SelectField - A dropdown selection component with comprehensive form field features
|
|
19
|
+
*
|
|
20
|
+
* Provides an accessible and feature-rich select dropdown with built-in validation,
|
|
21
|
+
* multiple sizing options, virtualization support for large datasets, and seamless
|
|
22
|
+
* integration with form libraries. Includes label, description, and error messaging
|
|
23
|
+
* capabilities with customizable styling through className props.
|
|
24
|
+
*
|
|
25
|
+
* @example
|
|
26
|
+
* // Basic select field
|
|
27
|
+
* <SelectField label='Country' placeholder='Select a country'>
|
|
28
|
+
* <Options.Item textValue='us'>United States</Options.Item>
|
|
29
|
+
* <Options.Item textValue='ca'>Canada</Options.Item>
|
|
30
|
+
* <Options.Item textValue='uk'>United Kingdom</Options.Item>
|
|
31
|
+
* </SelectField>
|
|
32
|
+
*
|
|
33
|
+
* @example
|
|
34
|
+
* // Select field with validation and description
|
|
35
|
+
* <SelectField
|
|
36
|
+
* label="Priority Level"
|
|
37
|
+
* description="Choose the urgency level for this task"
|
|
38
|
+
* errorMessage={errors.priority}
|
|
39
|
+
* isRequired
|
|
40
|
+
* isInvalid={!!errors.priority}
|
|
41
|
+
* >
|
|
42
|
+
* <Options.Item textValue="low">Low</Options.Item>
|
|
43
|
+
* <Options.Item textValue="medium">Medium</Options.Item>
|
|
44
|
+
* <Options.Item textValue="high">High</Options.Item>
|
|
45
|
+
* </SelectField>
|
|
46
|
+
*
|
|
47
|
+
* @example
|
|
48
|
+
* // Small size select field with custom styling
|
|
49
|
+
* <SelectField
|
|
50
|
+
* size="small"
|
|
51
|
+
* placeholder="Quick select"
|
|
52
|
+
* classNames={{
|
|
53
|
+
* field: "custom-field-styles",
|
|
54
|
+
* trigger: "custom-trigger-styles"
|
|
55
|
+
* }}
|
|
56
|
+
* >
|
|
57
|
+
* <Options.Item textValue="option1">Option 1</Options.Item>
|
|
58
|
+
* <Options.Item textValue="option2">Option 2</Options.Item>
|
|
59
|
+
* </SelectField>
|
|
60
|
+
*/
|
|
61
|
+
declare function SelectField({ ref, ...props }: SelectFieldProps): react_jsx_runtime.JSX.Element;
|
|
62
|
+
declare namespace SelectField {
|
|
63
|
+
var displayName: string;
|
|
64
|
+
var Provider: typeof SelectFieldProvider;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
export { SelectField, SelectFieldContext };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import {jsx,jsxs,Fragment}from'react/jsx-runtime';import'client-only';import V from'@accelint/icons/chevron-down';import {createContext}from'react';import {useContextProps,Select,composeRenderProps,SelectValue,Text,FieldError,Popover,Virtualizer,ListLayout}from'react-aria-components';import {Button}from'../button/index.js';import {Icon}from'../icon/index.js';import {Label}from'../label/index.js';import {Options}from'../options/index.js';import {SelectFieldStyles}from'./styles.js';const {description:k,error:G,trigger:J,label:p,field:K,value:Q}=SelectFieldStyles(),d=createContext(null);function u({children:o,...t}){return jsx(d.Provider,{value:t,children:o})}u.displayName="SelectField.Provider";function P({ref:o,...t}){[t,o]=useContextProps(t,o??null,d);const{size:i="medium",children:S,classNames:r,description:n,errorMessage:f,label:N,layoutOptions:F,isInvalid:y,...g}=t,c=f||null,m=i==="small",b=!m&&!!p;return jsx(Select,{...g,ref:o,className:composeRenderProps(r?.field,s=>K({className:s})),isInvalid:y||(c?true:void 0),"data-size":i,children:composeRenderProps(S,(s,{isRequired:x,isDisabled:C,isInvalid:L})=>jsxs(Fragment,{children:[b&&jsx(Label,{className:p({className:r?.label}),isRequired:x,isDisabled:C,children:N}),jsxs(Button,{className:composeRenderProps(r?.trigger,a=>J({className:a})),variant:"outline",size:i,children:[jsx(SelectValue,{className:Q({className:r?.value})}),jsx(Icon,{children:jsx(V,{className:"transform group-open/select-field:rotate-180"})})]}),!!n&&!(m||L)&&jsx(Text,{className:k({className:r?.description}),slot:"description",children:n}),jsx(FieldError,{className:composeRenderProps(r?.error,a=>G({className:a})),children:c}),jsx(Popover,{className:"min-w-(--trigger-width)",children:jsx(Virtualizer,{layout:ListLayout,layoutOptions:F,children:jsx(Options,{children:s})})})]}))})}P.displayName="SelectField",P.Provider=u;export{P as SelectField,d as SelectFieldContext};//# sourceMappingURL=index.js.map
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/select-field/index.tsx"],"names":["SelectFieldStyles","createContext","SelectFieldProvider","children","props","H","z","jsx","SelectField","SelectFieldContext","classNames","errorMessageProp","errorMessage","showLabel","label","AriaSelect","rest","ref","composeRenderProps","className","e","A","isInvalidProp","size","isRequired","isDisabled","isInvalid","jsxs","Fragment","v","R","labelProp","Button","trigger","T","l","AriaSelectValue","value","Icon","I","ChevronDown","B","M","descriptionProp","error","AriaPopover","E","O","w","q"],"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 type { ProviderProps } from '@/lib/types';\nimport ChevronDown from '@accelint/icons/chevron-down';\nimport { createContext } from 'react';\nimport {\n Select as AriaSelect,\n SelectValue as AriaSelectValue,\n type ContextValue,\n FieldError,\n ListLayout,\n Text,\n Virtualizer,\n composeRenderProps,\n useContextProps,\n} from 'react-aria-components';\nimport { Popover as AriaPopover } from 'react-aria-components';\nimport { Button } from '../button';\nimport { Icon } from '../icon';\nimport { Label } from '../label';\nimport { Options } from '../options';\nimport { SelectFieldStyles } from './styles';\nimport type { SelectFieldProps } from './types';\n\nconst { description, error, trigger, label, field, value } =\n SelectFieldStyles();\n\nexport const SelectFieldContext =\n createContext<ContextValue<SelectFieldProps, HTMLDivElement>>(null);\n\nfunction SelectFieldProvider({\n children,\n ...props\n}: ProviderProps<SelectFieldProps>) {\n return (\n <SelectFieldContext.Provider value={props}>\n {children}\n </SelectFieldContext.Provider>\n );\n}\nSelectFieldProvider.displayName = 'SelectField.Provider';\n\n/**\n * SelectField - A dropdown selection component with comprehensive form field features\n *\n * Provides an accessible and feature-rich select dropdown with built-in validation,\n * multiple sizing options, virtualization support for large datasets, and seamless\n * integration with form libraries. Includes label, description, and error messaging\n * capabilities with customizable styling through className props.\n *\n * @example\n * // Basic select field\n * <SelectField label='Country' placeholder='Select a country'>\n * <Options.Item textValue='us'>United States</Options.Item>\n * <Options.Item textValue='ca'>Canada</Options.Item>\n * <Options.Item textValue='uk'>United Kingdom</Options.Item>\n * </SelectField>\n *\n * @example\n * // Select field with validation and description\n * <SelectField\n * label=\"Priority Level\"\n * description=\"Choose the urgency level for this task\"\n * errorMessage={errors.priority}\n * isRequired\n * isInvalid={!!errors.priority}\n * >\n * <Options.Item textValue=\"low\">Low</Options.Item>\n * <Options.Item textValue=\"medium\">Medium</Options.Item>\n * <Options.Item textValue=\"high\">High</Options.Item>\n * </SelectField>\n *\n * @example\n * // Small size select field with custom styling\n * <SelectField\n * size=\"small\"\n * placeholder=\"Quick select\"\n * classNames={{\n * field: \"custom-field-styles\",\n * trigger: \"custom-trigger-styles\"\n * }}\n * >\n * <Options.Item textValue=\"option1\">Option 1</Options.Item>\n * <Options.Item textValue=\"option2\">Option 2</Options.Item>\n * </SelectField>\n */\nexport function SelectField({ ref, ...props }: SelectFieldProps) {\n [props, ref] = useContextProps(props, ref ?? null, SelectFieldContext);\n\n const {\n size = 'medium',\n children,\n classNames,\n description: descriptionProp,\n errorMessage: errorMessageProp,\n label: labelProp,\n layoutOptions,\n isInvalid: isInvalidProp,\n ...rest\n } = props;\n const errorMessage = errorMessageProp || null; // Protect against empty string\n const isSmall = size === 'small';\n const showLabel = !isSmall && !!label;\n\n return (\n <AriaSelect\n {...rest}\n ref={ref}\n className={composeRenderProps(classNames?.field, (className) =>\n field({ className }),\n )}\n isInvalid={isInvalidProp || (errorMessage ? true : undefined)}\n data-size={size}\n >\n {composeRenderProps(\n children,\n (children, { isRequired, isDisabled, isInvalid }) => (\n <>\n {showLabel && (\n <Label\n className={label({ className: classNames?.label })}\n isRequired={isRequired}\n isDisabled={isDisabled}\n >\n {labelProp}\n </Label>\n )}\n <Button\n className={composeRenderProps(classNames?.trigger, (className) =>\n trigger({ className }),\n )}\n variant='outline'\n size={size}\n >\n <AriaSelectValue\n className={value({ className: classNames?.value })}\n />\n <Icon>\n <ChevronDown className='transform group-open/select-field:rotate-180' />\n </Icon>\n </Button>\n {!!descriptionProp && !(isSmall || isInvalid) && (\n <Text\n className={description({ className: classNames?.description })}\n slot='description'\n >\n {descriptionProp}\n </Text>\n )}\n <FieldError\n className={composeRenderProps(classNames?.error, (className) =>\n error({ className }),\n )}\n >\n {errorMessage}\n </FieldError>\n <AriaPopover className='min-w-(--trigger-width)'>\n <Virtualizer layout={ListLayout} layoutOptions={layoutOptions}>\n <Options>{children}</Options>\n </Virtualizer>\n </AriaPopover>\n </>\n ),\n )}\n </AriaSelect>\n );\n}\nSelectField.displayName = 'SelectField';\nSelectField.Provider = SelectFieldProvider;\n"]}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import * as tailwind_variants from 'tailwind-variants';
|
|
2
|
+
import * as tailwind_merge from 'tailwind-merge';
|
|
3
|
+
|
|
4
|
+
declare const SelectFieldStyles: tailwind_variants.TVReturnType<{
|
|
5
|
+
[key: string]: {
|
|
6
|
+
[key: string]: tailwind_merge.ClassNameValue | {
|
|
7
|
+
label?: tailwind_merge.ClassNameValue;
|
|
8
|
+
value?: tailwind_merge.ClassNameValue;
|
|
9
|
+
trigger?: tailwind_merge.ClassNameValue;
|
|
10
|
+
description?: tailwind_merge.ClassNameValue;
|
|
11
|
+
field?: tailwind_merge.ClassNameValue;
|
|
12
|
+
error?: tailwind_merge.ClassNameValue;
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
} | {
|
|
16
|
+
[x: string]: {
|
|
17
|
+
[x: string]: tailwind_merge.ClassNameValue | {
|
|
18
|
+
label?: tailwind_merge.ClassNameValue;
|
|
19
|
+
value?: tailwind_merge.ClassNameValue;
|
|
20
|
+
trigger?: tailwind_merge.ClassNameValue;
|
|
21
|
+
description?: tailwind_merge.ClassNameValue;
|
|
22
|
+
field?: tailwind_merge.ClassNameValue;
|
|
23
|
+
error?: tailwind_merge.ClassNameValue;
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
} | {}, {
|
|
27
|
+
field: string;
|
|
28
|
+
trigger: string[];
|
|
29
|
+
label: string;
|
|
30
|
+
description: string;
|
|
31
|
+
error: string;
|
|
32
|
+
value: string[];
|
|
33
|
+
}, undefined, {
|
|
34
|
+
[key: string]: {
|
|
35
|
+
[key: string]: tailwind_merge.ClassNameValue | {
|
|
36
|
+
label?: tailwind_merge.ClassNameValue;
|
|
37
|
+
value?: tailwind_merge.ClassNameValue;
|
|
38
|
+
trigger?: tailwind_merge.ClassNameValue;
|
|
39
|
+
description?: tailwind_merge.ClassNameValue;
|
|
40
|
+
field?: tailwind_merge.ClassNameValue;
|
|
41
|
+
error?: tailwind_merge.ClassNameValue;
|
|
42
|
+
};
|
|
43
|
+
};
|
|
44
|
+
} | {}, {
|
|
45
|
+
field: string;
|
|
46
|
+
trigger: string[];
|
|
47
|
+
label: string;
|
|
48
|
+
description: string;
|
|
49
|
+
error: string;
|
|
50
|
+
value: string[];
|
|
51
|
+
}, tailwind_variants.TVReturnType<unknown, {
|
|
52
|
+
field: string;
|
|
53
|
+
trigger: string[];
|
|
54
|
+
label: string;
|
|
55
|
+
description: string;
|
|
56
|
+
error: string;
|
|
57
|
+
value: string[];
|
|
58
|
+
}, undefined, unknown, unknown, undefined>>;
|
|
59
|
+
|
|
60
|
+
export { SelectFieldStyles };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import {tv}from'./../../lib/utils.js';const s=tv({slots:{field:"group/select-field",trigger:["justify-between","size-medium:py-xs group-size-medium/select-field:min-w-[220px]","group-size-small/select-field:fit-content size-small:py-xxs","group-invalid/select-field:enabled:outline-serious","group-focus-visible/select-field:enabled:outline-highlight-bold"],label:"",description:"fg-default-dark group-disabled/select-field:fg-disabled text-body-xs",error:"fg-serious text-body-xs",value:["flex grow items-center font-display","group-size-small/select-field:gap-xs group-size-small/select-field:text-body-xs","group-size-medium/select-field:gap-s group-size-medium/select-field:text-body-s"]}});export{s as SelectFieldStyles};//# sourceMappingURL=styles.js.map
|
|
2
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/select-field/styles.ts"],"names":["e"],"mappings":"sCAeE,MAAA,CAAO,CACLA,EAAA,CAAA,CAAA,KAAO,CAAA,CAAA,KAAA,CAAA,oBAEL,2BACA,CAAA,gEACA,CAAA,6DACA,CAAA,oDACA,CAAA,iEAEK,CACP,CAAA,KAAA,CAAA,EAAA,CAAA,kFAEO,CAAA,KAAA,CAAA,yBAEL,CAAA,KAAA,CAAA,CAAA,qCACA,CAAA,iFACA,CAAA,iFAGL,CAAA,CAAA,CAAA","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 '@/lib/utils';\n\nexport const SelectFieldStyles = tv({\n slots: {\n field: 'group/select-field',\n trigger: [\n 'justify-between',\n 'size-medium:py-xs group-size-medium/select-field:min-w-[220px]',\n 'group-size-small/select-field:fit-content size-small:py-xxs',\n 'group-invalid/select-field:enabled:outline-serious',\n 'group-focus-visible/select-field:enabled:outline-highlight-bold',\n ],\n label: '',\n description:\n 'fg-default-dark group-disabled/select-field:fg-disabled text-body-xs',\n error: 'fg-serious text-body-xs',\n value: [\n 'flex grow items-center font-display',\n 'group-size-small/select-field:gap-xs group-size-small/select-field:text-body-xs',\n 'group-size-medium/select-field:gap-s group-size-medium/select-field:text-body-s',\n ],\n },\n});\n"]}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { RefAttributes } from 'react';
|
|
2
|
+
import { SelectProps, VirtualizerProps, ListLayoutOptions, FieldErrorProps } from 'react-aria-components';
|
|
3
|
+
import { ButtonProps } from '../button/types.js';
|
|
4
|
+
import { LabelProps } from '../label/types.js';
|
|
5
|
+
import '../../lib/types.js';
|
|
6
|
+
import 'tailwind-variants';
|
|
7
|
+
import '../button/styles.js';
|
|
8
|
+
import 'tailwind-merge';
|
|
9
|
+
|
|
10
|
+
type SelectFieldProps = Omit<SelectProps, 'className'> & Pick<VirtualizerProps<ListLayoutOptions>, 'layoutOptions'> & RefAttributes<HTMLDivElement> & {
|
|
11
|
+
classNames?: {
|
|
12
|
+
description?: string;
|
|
13
|
+
error?: FieldErrorProps['className'];
|
|
14
|
+
field?: string;
|
|
15
|
+
label?: LabelProps['className'];
|
|
16
|
+
trigger?: ButtonProps['className'];
|
|
17
|
+
value?: string;
|
|
18
|
+
};
|
|
19
|
+
} & {
|
|
20
|
+
label?: string;
|
|
21
|
+
description?: string;
|
|
22
|
+
errorMessage?: string;
|
|
23
|
+
size?: 'medium' | 'small';
|
|
24
|
+
isReadOnly?: boolean;
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
export type { SelectFieldProps };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"types.js"}
|
|
@@ -5,7 +5,7 @@ interface SliderProps extends Omit<SliderProps$1, 'value' | 'defaultValue' | 'sh
|
|
|
5
5
|
className?: string;
|
|
6
6
|
showInput?: boolean;
|
|
7
7
|
showLabel?: boolean;
|
|
8
|
-
layout
|
|
8
|
+
layout?: 'stacked' | 'inline';
|
|
9
9
|
value?: number;
|
|
10
10
|
defaultValue?: number;
|
|
11
11
|
rangeValue?: [number, number];
|
|
@@ -13,11 +13,45 @@ interface SliderProps extends Omit<SliderProps$1, 'value' | 'defaultValue' | 'sh
|
|
|
13
13
|
isRange?: boolean;
|
|
14
14
|
label: string;
|
|
15
15
|
}
|
|
16
|
+
/**
|
|
17
|
+
* Slider - An interactive range input component for numeric value selection
|
|
18
|
+
*
|
|
19
|
+
* Provides accessible slider functionality with optional input field integration,
|
|
20
|
+
* flexible layouts, and comprehensive keyboard and mouse interaction support.
|
|
21
|
+
* Perfect for settings, filters, or any numeric input requiring visual feedback.
|
|
22
|
+
*
|
|
23
|
+
* @example
|
|
24
|
+
* // Basic slider
|
|
25
|
+
* <Slider label="Volume" defaultValue={50} />
|
|
26
|
+
*/
|
|
16
27
|
declare const Slider: ({ children, className, showInput, showLabel, layout, value, defaultValue, label, defaultRangeValue, rangeValue, minValue, maxValue, isRange, orientation, ...props }: SliderProps) => react_jsx_runtime.JSX.Element;
|
|
17
28
|
type RangeSliderProps = Omit<SliderProps, 'isRange' | 'defaultRangeValue' | 'rangeValue' | 'defaultValue' | 'value'> & {
|
|
18
|
-
defaultValue
|
|
29
|
+
defaultValue?: SliderProps['defaultRangeValue'];
|
|
19
30
|
value: SliderProps['rangeValue'];
|
|
20
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
|
+
*/
|
|
21
55
|
declare const RangeSlider: ({ defaultValue, value, ...props }: RangeSliderProps) => react_jsx_runtime.JSX.Element;
|
|
22
56
|
|
|
23
57
|
export { RangeSlider, type RangeSliderProps, Slider, type SliderProps };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {cn}from'./../../lib/utils.js';import'client-only';import {cva}from'class-variance-authority';import {useContext}from'react';import {Slider,Label,SliderTrack,SliderThumb,Text,SliderStateContext,useSlottedContext,LabelContext,NumberField,Input}from'react-aria-components';import {Tooltip}from'../tooltip/index.js';const D=cva("grid gap-s",{variants:{layout:{stacked:"",inline:""},orientation:{vertical:"h-full w-fit",horizontal:"h-xl w-full"}},compoundVariants:[{layout:"stacked",orientation:"horizontal",className:"grid-cols-[auto_1fr_auto] grid-rows-[auto_auto_auto]"},{layout:"inline",orientation:"horizontal",className:"grid-cols-[auto_auto_1fr_auto_auto] grid-rows-1 items-center"},{layout:"stacked",orientation:"vertical",className:"grid-cols-[auto_auto_auto] grid-rows-[auto_auto_1fr_auto]"},{layout:"inline",orientation:"vertical",className:"grid-cols-[auto_1fr_auto] grid-rows-[auto_auto_1fr_auto]"}]}),M=cva("font-display text-body-m text-default-dark",{variants:{orientation:{horizontal:"",vertical:"col-start-1 row-start-4"},layout:{inline:"",stacked:""}},compoundVariants:[{layout:"stacked",orientation:"horizontal",className:"col-start-1 row-start-3"},{layout:"inline",orientation:"horizontal",className:"order-2"},{layout:"stacked",orientation:"vertical",className:"self-end justify-self-end"},{layout:"inline",orientation:"vertical",className:"justify-self-center"}]}),q=cva("font-display text-body-m text-default-dark",{variants:{orientation:{horizontal:"",vertical:"col-start-1 row-start-2"},layout:{inline:"",stacked:""}},compoundVariants:[{layout:"stacked",orientation:"horizontal",className:"col-start-3 row-start-3 justify-self-end"},{layout:"inline",orientation:"horizontal",className:"order-4"},{layout:"stacked",orientation:"vertical",className:"justify-self-end"}]}),E=cva("relative",{variants:{orientation:{horizontal:"h-s w-full",vertical:"h-full w-s"},layout:{inline:"",stacked:""}},compoundVariants:[{orientation:"horizontal",layout:"stacked",className:"col-span-3 row-start-2"},{orientation:"horizontal",layout:"inline",className:"order-3"},{orientation:"vertical",layout:"stacked",className:"col-start-2 row-span-3 row-start-2"},{orientation:"vertical",layout:"inline",className:"col-start-1 row-start-3 justify-self-center"}]}),G=cva("flex gap-s",{variants:{orientation:{horizontal:"flex-row",vertical:"flex-col-reverse"},layout:{inline:"order-5",stacked:"col-start-3 row-start-1"}},compoundVariants:[{layout:"inline",orientation:"horizontal",className:"order-5"},{layout:"inline",orientation:"vertical",className:"col-span-3 col-start-1"},{layout:"stacked",orientation:"vertical",className:"row-start-4"}]}),H=cva("text-default-light",{variants:{orientation:{horizontal:"",vertical:""},layout:{inline:"order-1",stacked:"col-start-1"}},compoundVariants:[{layout:"stacked",orientation:"vertical",className:"col-span-2"},{layout:"inline",orientation:"vertical",className:"col-span-3"}]}),J=cva("h-m w-m rounded-full bg-highlight-bold outline-highlight-bold/40 hover:outline-4 focus:outline-4",{variants:{orientation:{horizontal:"translate-y-[50%]",vertical:"translate-x-[40%]"}}}),K=cva("absolute rounded-full bg-default-light/40",{variants:{orientation:{horizontal:"top-[50%] h-xxs w-full translate-y-[50%]",vertical:"left-[50%] h-full w-xxs "}}}),Q=cva("absolute rounded-full bg-highlight",{variants:{orientation:{horizontal:"top-1/2 h-xxs translate-y-1/2",vertical:"left-1/2 w-xxs"}}}),U=({children:s,className:i,showInput:o=false,showLabel:d=true,layout:l="stacked",value:m,defaultValue:N,label:k,defaultRangeValue:w,rangeValue:S,minValue:p=0,maxValue:g=100,isRange:v=false,orientation:t="horizontal",...z})=>{const T=v?S:m,_=v?w:N;return jsxs(Slider,{className:cn(D({orientation:t,layout:l})),minValue:p,maxValue:g,orientation:t,value:T,defaultValue:_,...z,children:[d&&jsx(Label,{className:H({orientation:t,layout:l}),children:k}),o&&jsx("div",{className:G({orientation:t,layout:l}),children:jsx(W,{})}),jsx(SliderTrack,{className:E({layout:l,orientation:t}),children:({state:r})=>{const n=r.getThumbPercent(0),P=r.getThumbPercent(1)||n,y=`${(r.values.length===2?P-n:n)*100}%`,b=r.values.length===2?`${Math.floor(n*100)}%`:"0";return jsxs(Fragment,{children:[jsx("div",{className:K({orientation:t})}),r.values.map((X,u)=>jsxs(Fragment,{children:[jsx("div",{className:Q({orientation:t}),style:t==="horizontal"?{left:b,width:y}:{bottom:b,height:y}},`slider-${u===0?"min":"max"}`),jsx(SliderThumb,{index:u,className:J({orientation:t}),children:!o&&jsxs(Tooltip,{children:[jsx(Tooltip.Trigger,{children:jsx("div",{className:"size-full"})}),jsx(Tooltip.Body,{placement:"top",children:r.getThumbValue(u)})]})},`slider-thumb-${u===0?"min":"max"}`)]}))]})}}),jsx(Text,{slot:"min",className:M({layout:l,orientation:t}),children:p}),jsx(Text,{slot:"max",className:q({layout:l,orientation:t}),children:g})]})},oa=({defaultValue:s,value:i,...o})=>jsx(U,{...o,isRange:true,defaultRangeValue:s,rangeValue:i});function W({className:s}){const i=useContext(SliderStateContext),o=useSlottedContext(LabelContext);return jsx(Fragment,{children:i?.values.map((d,l)=>jsx(NumberField,{"aria-labelledby":o?.id,value:d,onChange:m=>i.setThumbValue(0,m),children:jsx(Input,{className:cn("w-[50px] rounded-medium border border-interactive px-s py-xs font-display text-body-m text-default-light",s)})},`number-field-${l===0?"min":"max"}`))})}export{oa as RangeSlider,U as Slider};//# sourceMappingURL=index.js.map
|
|
1
|
+
import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {cn}from'./../../lib/utils.js';import'client-only';import {cva}from'class-variance-authority';import {useContext}from'react';import {Slider,Label,SliderTrack,SliderThumb,Text,SliderStateContext,useSlottedContext,LabelContext,NumberField,Input}from'react-aria-components';import {Tooltip}from'../tooltip/index.js';const D=cva("grid gap-s",{variants:{layout:{stacked:"",inline:""},orientation:{vertical:"h-full w-fit",horizontal:"h-xl w-full"}},compoundVariants:[{layout:"stacked",orientation:"horizontal",className:"grid-cols-[auto_1fr_auto] grid-rows-[auto_auto_auto]"},{layout:"inline",orientation:"horizontal",className:"grid-cols-[auto_auto_1fr_auto_auto] grid-rows-1 items-center"},{layout:"stacked",orientation:"vertical",className:"grid-cols-[auto_auto_auto] grid-rows-[auto_auto_1fr_auto]"},{layout:"inline",orientation:"vertical",className:"grid-cols-[auto_1fr_auto] grid-rows-[auto_auto_1fr_auto]"}]}),M=cva("font-display text-body-m text-default-dark",{variants:{orientation:{horizontal:"",vertical:"col-start-1 row-start-4"},layout:{inline:"",stacked:""}},compoundVariants:[{layout:"stacked",orientation:"horizontal",className:"col-start-1 row-start-3"},{layout:"inline",orientation:"horizontal",className:"order-2"},{layout:"stacked",orientation:"vertical",className:"self-end justify-self-end"},{layout:"inline",orientation:"vertical",className:"justify-self-center"}]}),q=cva("font-display text-body-m text-default-dark",{variants:{orientation:{horizontal:"",vertical:"col-start-1 row-start-2"},layout:{inline:"",stacked:""}},compoundVariants:[{layout:"stacked",orientation:"horizontal",className:"col-start-3 row-start-3 justify-self-end"},{layout:"inline",orientation:"horizontal",className:"order-4"},{layout:"stacked",orientation:"vertical",className:"justify-self-end"}]}),E=cva("relative",{variants:{orientation:{horizontal:"h-s w-full",vertical:"h-full w-s"},layout:{inline:"",stacked:""}},compoundVariants:[{orientation:"horizontal",layout:"stacked",className:"col-span-3 row-start-2"},{orientation:"horizontal",layout:"inline",className:"order-3"},{orientation:"vertical",layout:"stacked",className:"col-start-2 row-span-3 row-start-2"},{orientation:"vertical",layout:"inline",className:"col-start-1 row-start-3 justify-self-center"}]}),G=cva("flex gap-s",{variants:{orientation:{horizontal:"flex-row",vertical:"flex-col-reverse"},layout:{inline:"order-5",stacked:"col-start-3 row-start-1"}},compoundVariants:[{layout:"inline",orientation:"horizontal",className:"order-5"},{layout:"inline",orientation:"vertical",className:"col-span-3 col-start-1"},{layout:"stacked",orientation:"vertical",className:"row-start-4"}]}),H=cva("text-default-light",{variants:{orientation:{horizontal:"",vertical:""},layout:{inline:"order-1",stacked:"col-start-1"}},compoundVariants:[{layout:"stacked",orientation:"vertical",className:"col-span-2"},{layout:"inline",orientation:"vertical",className:"col-span-3"}]}),J=cva("h-m w-m rounded-full bg-highlight-bold outline-highlight-bold/40 hover:outline-4 focus-visible:outline-4",{variants:{orientation:{horizontal:"translate-y-[50%]",vertical:"translate-x-[40%]"}}}),K=cva("absolute rounded-full bg-default-light/40",{variants:{orientation:{horizontal:"top-[50%] h-xxs w-full translate-y-[50%]",vertical:"left-[50%] h-full w-xxs "}}}),Q=cva("absolute rounded-full bg-highlight",{variants:{orientation:{horizontal:"top-1/2 h-xxs translate-y-1/2",vertical:"left-1/2 w-xxs"}}}),U=({children:s,className:i,showInput:o=false,showLabel:d=true,layout:l="stacked",value:m,defaultValue:N,label:k,defaultRangeValue:w,rangeValue:S,minValue:p=0,maxValue:g=100,isRange:v=false,orientation:t="horizontal",...z})=>{const T=v?S:m,_=v?w:N;return jsxs(Slider,{className:cn(D({orientation:t,layout:l})),minValue:p,maxValue:g,orientation:t,value:T,defaultValue:_,...z,children:[d&&jsx(Label,{className:H({orientation:t,layout:l}),children:k}),o&&jsx("div",{className:G({orientation:t,layout:l}),children:jsx(W,{})}),jsx(SliderTrack,{className:E({layout:l,orientation:t}),children:({state:r})=>{const n=r.getThumbPercent(0),P=r.getThumbPercent(1)||n,y=`${(r.values.length===2?P-n:n)*100}%`,b=r.values.length===2?`${Math.floor(n*100)}%`:"0";return jsxs(Fragment,{children:[jsx("div",{className:K({orientation:t})}),r.values.map((X,u)=>jsxs(Fragment,{children:[jsx("div",{className:Q({orientation:t}),style:t==="horizontal"?{left:b,width:y}:{bottom:b,height:y}},`slider-${u===0?"min":"max"}`),jsx(SliderThumb,{index:u,className:J({orientation:t}),children:!o&&jsxs(Tooltip,{children:[jsx(Tooltip.Trigger,{children:jsx("div",{className:"size-full outline-none"})}),jsx(Tooltip.Body,{placement:"top",children:r.getThumbValue(u)})]})},`slider-thumb-${u===0?"min":"max"}`)]}))]})}}),jsx(Text,{slot:"min",className:M({layout:l,orientation:t}),children:p}),jsx(Text,{slot:"max",className:q({layout:l,orientation:t}),children:g})]})},oa=({defaultValue:s,value:i,...o})=>jsx(U,{...o,isRange:true,defaultRangeValue:s,rangeValue:i});function W({className:s}){const i=useContext(SliderStateContext),o=useSlottedContext(LabelContext);return jsx(Fragment,{children:i?.values.map((d,l)=>jsx(NumberField,{"aria-labelledby":o?.id,value:d,onChange:m=>i.setThumbValue(0,m),children:jsx(Input,{className:cn("w-[50px] rounded-medium border border-interactive px-s py-xs font-display text-body-m text-default-light",s)})},`number-field-${l===0?"min":"max"}`))})}export{oa as RangeSlider,U 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: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\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' />\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\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":["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"]}
|
|
@@ -9,6 +9,42 @@ declare function SwitchProvider({ children, ...props }: ProviderProps<SwitchProp
|
|
|
9
9
|
declare namespace SwitchProvider {
|
|
10
10
|
var displayName: string;
|
|
11
11
|
}
|
|
12
|
+
/**
|
|
13
|
+
* Switch - A toggle control for binary state changes
|
|
14
|
+
*
|
|
15
|
+
* Provides an accessible toggle switch component for enabling/disabling features
|
|
16
|
+
* or settings. Offers clear visual feedback for on/off states with smooth transitions
|
|
17
|
+
* and proper keyboard and screen reader support.
|
|
18
|
+
*
|
|
19
|
+
* @example
|
|
20
|
+
* // Basic switch
|
|
21
|
+
* <Switch>Enable notifications</Switch>
|
|
22
|
+
*
|
|
23
|
+
* @example
|
|
24
|
+
* // Controlled switch
|
|
25
|
+
* <Switch
|
|
26
|
+
* isSelected={isEnabled}
|
|
27
|
+
* onChange={setIsEnabled}
|
|
28
|
+
* >
|
|
29
|
+
* Dark mode
|
|
30
|
+
* </Switch>
|
|
31
|
+
*
|
|
32
|
+
* @example
|
|
33
|
+
* // Switch with default state
|
|
34
|
+
* <Switch defaultSelected>
|
|
35
|
+
* Auto-save documents
|
|
36
|
+
* </Switch>
|
|
37
|
+
*
|
|
38
|
+
* @example
|
|
39
|
+
* // Disabled switch
|
|
40
|
+
* <Switch isDisabled>
|
|
41
|
+
* Premium feature (upgrade required)
|
|
42
|
+
* </Switch>
|
|
43
|
+
*
|
|
44
|
+
* @example
|
|
45
|
+
* // Switch without label (icon-only)
|
|
46
|
+
* <Switch aria-label="Toggle sidebar" />
|
|
47
|
+
*/
|
|
12
48
|
declare function Switch({ ref, ...props }: SwitchProps): react_jsx_runtime.JSX.Element;
|
|
13
49
|
declare namespace Switch {
|
|
14
50
|
var displayName: string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {jsx,jsxs,Fragment}from'react/jsx-runtime';import'client-only';import {createContext}from'react';import {useContextProps,Switch,composeRenderProps}from'react-aria-components';import {SwitchStyles}from'./styles.js';const {switch:
|
|
1
|
+
import {jsx,jsxs,Fragment}from'react/jsx-runtime';import'client-only';import {createContext}from'react';import {useContextProps,Switch,composeRenderProps}from'react-aria-components';import {SwitchStyles}from'./styles.js';const {switch:d,control:u,label:N}=SwitchStyles(),c=createContext(null);function a({children:t,...e}){return jsx(c.Provider,{value:e,children:t})}a.displayName="Switch.Provider";function l({ref:t,...e}){[e,t]=useContextProps(e,t??null,c);const{children:n,classNames:s,labelPosition:p="end",...m}=e;return jsx(Switch,{...m,ref:t,className:composeRenderProps(s?.switch,o=>d({className:o,labelPosition:p})),children:composeRenderProps(n,o=>jsxs(Fragment,{children:[jsx("span",{className:u({className:s?.control})}),o&&jsx("span",{className:N({className:s?.label}),children:o})]}))})}l.displayName="Switch",l.Provider=a;export{l as Switch,c as SwitchContext};//# sourceMappingURL=index.js.map
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/switch/index.tsx"],"names":["SwitchStyles","SwitchContext","createContext","
|
|
1
|
+
{"version":3,"sources":["../../../src/components/switch/index.tsx"],"names":["SwitchStyles","SwitchContext","createContext","h","props","r","SwitchProvider","ref","useContextProps","rest","w","classNames","switchClassNames","children","jsxs","Fragment","y","v","jsx","Switch"],"mappings":"6NA0BQ,MAAA,CAAA,MAA0B,CAAA,CAAA,CAAA,OAAS,CAAA,CAAA,CAAA,KAAUA,CAAAA,CAAa,EAErDC,YAAAA,EACXC,CAA2D,CAAA,CAAAC,aAAA,CAAI,eAEvC,CAAA,CAAA,CAAA,UAAaC,CAAM,GAC3C,CAAA,CAAA,CAAA,CAAA,OACiBC,GAAA,CAAA,CAAA,CAAA,QAAS,CAAA,CAAA,KAAe,CAAA,CAAA,CAAA,QAE3C,CACAC,EAAe,CAAA,CAAA,CAAA,CAAA,WAAc,CAAA,iBAsCtB,CAAA,SAAkB,CAAA,CAAA,CAAAC,GAAK,CAAA,CAAGH,CAAM,GACrC,CAACA,EAAOG,CAAG,CAAA,CAAIC,EAAgBJ,CAAAA,CAAOG,eAAAA,CAAAA,CAAO,CAAA,CAAA,EAAA,IAE7C,CAAA,CAAA,CAAA,CAAA,KAAQ,CAAA,qBAAsB,CAAA,CAAA,CAAA,aAAgB,CAAA,CAAA,CAAA,KAAUE,CAAK,GAAIL,CAEjE,CAAA,CAAA,CAAA,CAAA,OACGC,GACE,CAAAK,MAAA,CAAGD,CAAAA,KACCF,GACL,CAAA,CAAA,CAAA,SAA8BI,CAAAA,kBAAY,UACxCC,CAAAA,CAAiB,EAAE,CAAA,CAAA,CAAA,SAAW,CAAA,CAAA,CAAA,aAChC,EAEC,CAAA,CAAA,CAAA,CAAA,QAAmBC,CAAWA,kBAAAA,CAAAA,CAC7BC,EAAAC,EAAAC,IACE,CAAAC,QAAA,CAAA,CAAA,QAAC,YAAK,CAAA,CAAA,SAAqB,CAAA,CAAA,CAAA,CAAA,SAAuB,CAAA,CAAA,EAAA,OAAY,CAC7DJ,GACCK,CAAAA,CAAC,EAAAb,GAAA,CAAA,MAAK,CAAA,CAAA,SAAmB,CAAA,CAAA,CAAA,CAAA,SAAuB,CAAA,CAAA,EAAA,KAC7C,CAAA,CAAA,CAAA,QACH,CAAA,CAEJ,CACD,EACH,CAEJ,CACAc,EAAO,CAAA,CAAA,CAAA,CAAA,WAAc,CAAA,QACd,CAAA,CAAA,CAAA,QAAWb,CAAAA,CAAAA","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 type { ProviderProps } from '@/lib/types';\nimport { createContext } from 'react';\nimport {\n Switch as AriaSwitch,\n type ContextValue,\n composeRenderProps,\n useContextProps,\n} from 'react-aria-components';\nimport { SwitchStyles } from './styles';\nimport type { SwitchProps } from './types';\n\n// \"switch\" is a reserved term in JS\nconst { switch: switchClassNames, control, label } = SwitchStyles();\n\nexport const SwitchContext =\n createContext<ContextValue<SwitchProps, HTMLLabelElement>>(null);\n\nfunction SwitchProvider({ children, ...props }: ProviderProps<SwitchProps>) {\n return (\n <SwitchContext.Provider value={props}>{children}</SwitchContext.Provider>\n );\n}\nSwitchProvider.displayName = 'Switch.Provider';\n\n/**\n * Switch - A toggle control for binary state changes\n *\n * Provides an accessible toggle switch component for enabling/disabling features\n * or settings. Offers clear visual feedback for on/off states with smooth transitions\n * and proper keyboard and screen reader support.\n *\n * @example\n * // Basic switch\n * <Switch>Enable notifications</Switch>\n *\n * @example\n * // Controlled switch\n * <Switch\n * isSelected={isEnabled}\n * onChange={setIsEnabled}\n * >\n * Dark mode\n * </Switch>\n *\n * @example\n * // Switch with default state\n * <Switch defaultSelected>\n * Auto-save documents\n * </Switch>\n *\n * @example\n * // Disabled switch\n * <Switch isDisabled>\n * Premium feature (upgrade required)\n * </Switch>\n *\n * @example\n * // Switch without label (icon-only)\n * <Switch aria-label=\"Toggle sidebar\" />\n */\nexport function Switch({ ref, ...props }: SwitchProps) {\n [props, ref] = useContextProps(props, ref ?? null, SwitchContext);\n\n const { children, classNames, labelPosition = 'end', ...rest } = props;\n\n return (\n <AriaSwitch\n {...rest}\n ref={ref}\n className={composeRenderProps(classNames?.switch, (className) =>\n switchClassNames({ className, labelPosition }),\n )}\n >\n {composeRenderProps(children, (children) => (\n <>\n <span className={control({ className: classNames?.control })} />\n {children && (\n <span className={label({ className: classNames?.label })}>\n {children}\n </span>\n )}\n </>\n ))}\n </AriaSwitch>\n );\n}\nSwitch.displayName = 'Switch';\nSwitch.Provider = SwitchProvider;\n"]}
|
|
@@ -1,39 +1,41 @@
|
|
|
1
1
|
import * as tailwind_variants from 'tailwind-variants';
|
|
2
|
-
import * as tailwind_merge from 'tailwind-merge';
|
|
3
2
|
|
|
4
3
|
declare const SwitchStyles: tailwind_variants.TVReturnType<{
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
switch?: tailwind_merge.ClassNameValue;
|
|
9
|
-
control?: tailwind_merge.ClassNameValue;
|
|
4
|
+
labelPosition: {
|
|
5
|
+
start: {
|
|
6
|
+
switch: string;
|
|
10
7
|
};
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
[x: string]: {
|
|
14
|
-
[x: string]: tailwind_merge.ClassNameValue | {
|
|
15
|
-
label?: tailwind_merge.ClassNameValue;
|
|
16
|
-
switch?: tailwind_merge.ClassNameValue;
|
|
17
|
-
control?: tailwind_merge.ClassNameValue;
|
|
8
|
+
end: {
|
|
9
|
+
switch: string;
|
|
18
10
|
};
|
|
19
11
|
};
|
|
20
|
-
}
|
|
12
|
+
}, {
|
|
21
13
|
switch: string;
|
|
22
14
|
control: string[];
|
|
23
15
|
label: string[];
|
|
24
16
|
}, undefined, {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
17
|
+
labelPosition: {
|
|
18
|
+
start: {
|
|
19
|
+
switch: string;
|
|
20
|
+
};
|
|
21
|
+
end: {
|
|
22
|
+
switch: string;
|
|
30
23
|
};
|
|
31
24
|
};
|
|
32
|
-
}
|
|
25
|
+
}, {
|
|
33
26
|
switch: string;
|
|
34
27
|
control: string[];
|
|
35
28
|
label: string[];
|
|
36
|
-
}, tailwind_variants.TVReturnType<
|
|
29
|
+
}, tailwind_variants.TVReturnType<{
|
|
30
|
+
labelPosition: {
|
|
31
|
+
start: {
|
|
32
|
+
switch: string;
|
|
33
|
+
};
|
|
34
|
+
end: {
|
|
35
|
+
switch: string;
|
|
36
|
+
};
|
|
37
|
+
};
|
|
38
|
+
}, {
|
|
37
39
|
switch: string;
|
|
38
40
|
control: string[];
|
|
39
41
|
label: string[];
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {tv}from'./../../lib/utils.js';const i=tv({slots:{switch:"group/switch flex cursor-pointer items-center gap-s disabled:cursor-not-allowed",control:["flex rounded-round bg-transparent p-xxs outline outline-interactive before:mr-l before:block before:size-m before:rounded-full before:bg-default-dark","group-enabled/switch:group-focus/switch:bg-interactive-hover-dark group-enabled/switch:group-focus/switch:outline-interactive-hover group-enabled/switch:group-focus/switch:before:bg-interactive-hover","group-enabled/switch:group-hover/switch:bg-interactive-hover-dark group-enabled/switch:group-hover/switch:outline-interactive-hover group-enabled/switch:group-hover/switch:before:bg-interactive-hover","group-enabled/switch:group-selected/switch:outline-highlight group-selected/switch:before:mr-0 group-selected/switch:before:ml-l group-enabled/switch:group-selected/switch:before:bg-highlight","group-enabled/switch:group-selected/switch:group-focus/switch:bg-highlight-subtle group-enabled/switch:group-selected/switch:group-focus/switch:outline-interactive-hover group-enabled/switch:group-selected/switch:group-focus/switch:before:bg-highlight","group-enabled/switch:group-selected/switch:group-hover/switch:bg-highlight-subtle group-enabled/switch:group-selected/switch:group-hover/switch:outline-highlight group-enabled/switch:group-selected/switch:group-hover/switch:before:bg-highlight","group-disabled/switch:bg-interactive-disabled group-disabled/switch:outline-interactive-disabled group-disabled/switch:before:bg-disabled"],label:["text-body-s text-interactive-default","group-disabled/switch:text-interactive-disabled"]}});export{i as SwitchStyles};//# sourceMappingURL=styles.js.map
|
|
1
|
+
import {tv}from'./../../lib/utils.js';const i=tv({slots:{switch:"group/switch flex cursor-pointer items-center gap-s disabled:cursor-not-allowed",control:["flex rounded-round bg-transparent p-xxs outline outline-interactive before:mr-l before:block before:size-m before:rounded-full before:bg-default-dark","group-enabled/switch:group-focus-visible/switch:bg-interactive-hover-dark group-enabled/switch:group-focus-visible/switch:outline-interactive-hover group-enabled/switch:group-focus-visible/switch:before:bg-interactive-hover","group-enabled/switch:group-hover/switch:bg-interactive-hover-dark group-enabled/switch:group-hover/switch:outline-interactive-hover group-enabled/switch:group-hover/switch:before:bg-interactive-hover","group-enabled/switch:group-selected/switch:outline-highlight group-selected/switch:before:mr-0 group-selected/switch:before:ml-l group-enabled/switch:group-selected/switch:before:bg-highlight","group-enabled/switch:group-selected/switch:group-focus-visible/switch:bg-highlight-subtle group-enabled/switch:group-selected/switch:group-focus-visible/switch:outline-interactive-hover group-enabled/switch:group-selected/switch:group-focus-visible/switch:before:bg-highlight","group-enabled/switch:group-selected/switch:group-hover/switch:bg-highlight-subtle group-enabled/switch:group-selected/switch:group-hover/switch:outline-highlight group-enabled/switch:group-selected/switch:group-hover/switch:before:bg-highlight","group-disabled/switch:bg-interactive-disabled group-disabled/switch:outline-interactive-disabled group-disabled/switch:before:bg-disabled"],label:["text-body-s text-interactive-default","group-disabled/switch:text-interactive-disabled"]},variants:{labelPosition:{start:{switch:"flex-row-reverse"},end:{switch:"flex-row"}}}});export{i as SwitchStyles};//# sourceMappingURL=styles.js.map
|
|
2
2
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/switch/styles.ts"],"names":["e"],"mappings":"sCAeE,MAAA,CAAO,CACLA,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/switch/styles.ts"],"names":["e"],"mappings":"sCAeE,MAAA,CAAO,CACLA,SACE,CAAA,CAAA,MAAA,CAAA,iFAEA,CAAA,OAAA,CAAA,CAAA,uJACA,CAAA,2aAEA,CAAA,iMACA,CAAA,2gBAEA,CAAA,2IAGA,CAAA,CAAA,KAAA,CAAA,CAAA,0FAIM,CACR,QAAA,CAAA,CAAA,oBAEY,CAAA,CAAA,MAAA,CAAA,kBAGR,CAAA,CAAA,YACF,UAGL,CAAA,CAAA,CAAA,CAAA","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 '@/lib/utils';\n\nexport const SwitchStyles = tv({\n slots: {\n switch:\n 'group/switch flex cursor-pointer items-center gap-s disabled:cursor-not-allowed',\n control: [\n 'flex rounded-round bg-transparent p-xxs outline outline-interactive before:mr-l before:block before:size-m before:rounded-full before:bg-default-dark',\n 'group-enabled/switch:group-focus-visible/switch:bg-interactive-hover-dark group-enabled/switch:group-focus-visible/switch:outline-interactive-hover group-enabled/switch:group-focus-visible/switch:before:bg-interactive-hover',\n 'group-enabled/switch:group-hover/switch:bg-interactive-hover-dark group-enabled/switch:group-hover/switch:outline-interactive-hover group-enabled/switch:group-hover/switch:before:bg-interactive-hover',\n 'group-enabled/switch:group-selected/switch:outline-highlight group-selected/switch:before:mr-0 group-selected/switch:before:ml-l group-enabled/switch:group-selected/switch:before:bg-highlight',\n 'group-enabled/switch:group-selected/switch:group-focus-visible/switch:bg-highlight-subtle group-enabled/switch:group-selected/switch:group-focus-visible/switch:outline-interactive-hover group-enabled/switch:group-selected/switch:group-focus-visible/switch:before:bg-highlight',\n 'group-enabled/switch:group-selected/switch:group-hover/switch:bg-highlight-subtle group-enabled/switch:group-selected/switch:group-hover/switch:outline-highlight group-enabled/switch:group-selected/switch:group-hover/switch:before:bg-highlight',\n 'group-disabled/switch:bg-interactive-disabled group-disabled/switch:outline-interactive-disabled group-disabled/switch:before:bg-disabled',\n ],\n label: [\n 'text-body-s text-interactive-default',\n 'group-disabled/switch:text-interactive-disabled',\n ],\n },\n variants: {\n labelPosition: {\n start: {\n switch: 'flex-row-reverse',\n },\n end: {\n switch: 'flex-row',\n },\n },\n },\n});\n"]}
|