@cryptlex/web-components 6.6.6-alpha10 → 6.6.6-alpha11
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/calendar.d.ts +39 -0
- package/dist/components/calendar.js.map +1 -1
- package/dist/components/date-picker.d.ts +40 -0
- package/dist/components/date-picker.js.map +1 -1
- package/dist/components/datefield.d.ts +17 -0
- package/dist/components/datefield.js.map +1 -1
- package/dist/components/disclosure.js +1 -1
- package/dist/components/disclosure.js.map +1 -1
- package/package.json +2 -2
|
@@ -1,16 +1,55 @@
|
|
|
1
1
|
import { CalendarCellProps as AriaCalendarCellProps, CalendarGridBodyProps as AriaCalendarGridBodyProps, CalendarGridProps as AriaCalendarGridProps, CalendarHeaderCellProps as AriaCalendarHeaderCellProps, CalendarProps as AriaCalendarProps, DateValue as AriaDateValue, RangeCalendarProps as AriaRangeCalendarProps } from 'react-aria-components';
|
|
2
|
+
/**
|
|
3
|
+
* Calendar header with navigation buttons and month/year display.
|
|
4
|
+
*/
|
|
2
5
|
export declare function CalendarHeading(props: React.HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
/**
|
|
7
|
+
* Grid container for calendar cells with proper spacing.
|
|
8
|
+
*/
|
|
3
9
|
export declare function CalendarGrid({ className, ...props }: AriaCalendarGridProps): import("react/jsx-runtime").JSX.Element;
|
|
4
10
|
export declare const CalendarGridHeader: (props: import('react-aria-components').CalendarGridHeaderProps & React.RefAttributes<HTMLTableSectionElement>) => import('react').ReactElement | null;
|
|
11
|
+
/**
|
|
12
|
+
* Header cell displaying day of week abbreviation.
|
|
13
|
+
*/
|
|
5
14
|
export declare function CalendarHeaderCell({ className, ...props }: AriaCalendarHeaderCellProps): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
/**
|
|
16
|
+
* Body container for calendar date cells.
|
|
17
|
+
*/
|
|
6
18
|
export declare function CalendarGridBody({ className, ...props }: AriaCalendarGridBodyProps): import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
/**
|
|
20
|
+
* Individual calendar date cell with selection, hover, and availability states.
|
|
21
|
+
* Automatically adapts styling for range selection contexts.
|
|
22
|
+
*/
|
|
7
23
|
export declare function CalendarCell({ className, ...props }: AriaCalendarCellProps): import("react/jsx-runtime").JSX.Element;
|
|
8
24
|
interface CalendarProps<T extends AriaDateValue> extends AriaCalendarProps<T> {
|
|
25
|
+
/** Error message to display below the calendar */
|
|
9
26
|
errorMessage?: string;
|
|
10
27
|
}
|
|
28
|
+
/**
|
|
29
|
+
* Calendar component for single date selection.
|
|
30
|
+
*
|
|
31
|
+
* @example Basic usage
|
|
32
|
+
* ```tsx
|
|
33
|
+
* <Calendar defaultValue={today(getLocalTimeZone())} />
|
|
34
|
+
* ```
|
|
35
|
+
*/
|
|
11
36
|
export declare function Calendar<T extends AriaDateValue>({ errorMessage, className, ...props }: CalendarProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
12
37
|
interface RangeCalendarProps<T extends AriaDateValue> extends AriaRangeCalendarProps<T> {
|
|
38
|
+
/** Error message to display below the calendar */
|
|
13
39
|
errorMessage?: string;
|
|
14
40
|
}
|
|
41
|
+
/**
|
|
42
|
+
* Calendar component for date range selection.
|
|
43
|
+
*
|
|
44
|
+
* @example Basic range selection
|
|
45
|
+
* ```tsx
|
|
46
|
+
* <RangeCalendar
|
|
47
|
+
* defaultValue={{
|
|
48
|
+
* start: today(getLocalTimeZone()),
|
|
49
|
+
* end: today(getLocalTimeZone()).add({ days: 7 })
|
|
50
|
+
* }}
|
|
51
|
+
* />
|
|
52
|
+
* ```
|
|
53
|
+
*/
|
|
15
54
|
export declare function RangeCalendar<T extends AriaDateValue>({ errorMessage, className, ...props }: RangeCalendarProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
16
55
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"calendar.js","sources":["../../lib/components/calendar.tsx"],"sourcesContent":["import { getLocalTimeZone, today } from '@internationalized/date';\nimport {\n Calendar as AriaCalendar,\n CalendarCell as AriaCalendarCell,\n CalendarCellProps as AriaCalendarCellProps,\n CalendarGrid as AriaCalendarGrid,\n CalendarGridBody as AriaCalendarGridBody,\n CalendarGridBodyProps as AriaCalendarGridBodyProps,\n CalendarGridHeader as AriaCalendarGridHeader,\n CalendarGridProps as AriaCalendarGridProps,\n CalendarHeaderCell as AriaCalendarHeaderCell,\n CalendarHeaderCellProps as AriaCalendarHeaderCellProps,\n CalendarProps as AriaCalendarProps,\n DateValue as AriaDateValue,\n Heading as AriaHeading,\n RangeCalendar as AriaRangeCalendar,\n RangeCalendarProps as AriaRangeCalendarProps,\n RangeCalendarStateContext as AriaRangeCalendarStateContext,\n composeRenderProps,\n useLocale,\n} from 'react-aria-components';\n\nimport { use } from 'react';\nimport { Button, buttonVariants } from '../components/button';\nimport { FieldError } from '../components/field';\nimport { classNames } from '../utilities/theme';\nimport { IcLeft, IcRight } from './icons';\n\nexport function CalendarHeading(props: React.HTMLAttributes<HTMLElement>) {\n let { direction } = useLocale();\n\n return (\n <header className=\"flex w-full items-center gap-1 px-1 pb-icon\" {...props}>\n <Button\n slot=\"previous\"\n size=\"none\"\n className={classNames(\n 'size-7 bg-transparent p-0 opacity-50',\n /* Hover */\n 'data-[hovered]:opacity-100'\n )}\n >\n {direction === 'rtl' ? <IcRight aria-hidden /> : <IcLeft aria-hidden />}\n </Button>\n <AriaHeading className=\"grow text-center body font-medium\" />\n <Button\n slot=\"next\"\n className={classNames(\n 'size-7 bg-transparent p-0 opacity-50',\n /* Hover */\n 'data-[hovered]:opacity-100'\n )}\n >\n {direction === 'rtl' ? <IcLeft aria-hidden /> : <IcRight aria-hidden />}\n </Button>\n </header>\n );\n}\n\nexport function CalendarGrid({ className, ...props }: AriaCalendarGridProps) {\n return (\n <AriaCalendarGrid\n className={classNames(' border-separate border-spacing-x-0 border-spacing-y-1 ', className)}\n {...props}\n />\n );\n}\n\nexport const CalendarGridHeader = AriaCalendarGridHeader;\n\nexport function CalendarHeaderCell({ className, ...props }: AriaCalendarHeaderCellProps) {\n return (\n <AriaCalendarHeaderCell\n className={classNames('w-9 body-sm font-normal text-muted-foreground', className)}\n {...props}\n />\n );\n}\n\nexport function CalendarGridBody({ className, ...props }: AriaCalendarGridBodyProps) {\n return <AriaCalendarGridBody className={classNames('[&>tr>td]:p-0', className)} {...props} />;\n}\n\nexport function CalendarCell({ className, ...props }: AriaCalendarCellProps) {\n const isRange = Boolean(use(AriaRangeCalendarStateContext));\n return (\n <AriaCalendarCell\n className={composeRenderProps(className, (className, renderProps) =>\n classNames(\n buttonVariants({ variant: 'ghost', size: 'none' }),\n 'relative flex size-9 items-center justify-center p-0 body-sm font-normal',\n /* Disabled */\n renderProps.isDisabled && 'text-muted-foreground opacity-50',\n /* Selected */\n renderProps.isSelected &&\n 'bg-primary text-primary-foreground data-[focused]:bg-primary data-[focused]:text-primary-foreground',\n /* Hover */\n renderProps.isHovered &&\n renderProps.isSelected &&\n (renderProps.isSelectionStart || renderProps.isSelectionEnd || !isRange) &&\n 'data-[hovered]:bg-primary data-[hovered]:text-primary-foreground',\n /* Selection Start/End */\n renderProps.isSelected &&\n isRange &&\n !renderProps.isSelectionStart &&\n !renderProps.isSelectionEnd &&\n 'rounded-none bg-accent text-accent-foreground',\n /* Outside Month */\n renderProps.isOutsideMonth &&\n 'text-muted-foreground opacity-50 data-[selected]:bg-accent/50 data-[selected]:text-muted-foreground data-[selected]:opacity-30',\n /* Current Date */\n renderProps.date.compare(today(getLocalTimeZone())) === 0 &&\n !renderProps.isSelected &&\n 'bg-accent text-accent-foreground',\n /* Unavailable Date */\n renderProps.isUnavailable && 'cursor-default text-destructive ',\n renderProps.isInvalid &&\n 'bg-destructive text-destructive-foreground data-[focused]:bg-destructive data-[hovered]:bg-destructive data-[focused]:text-destructive-foreground data-[hovered]:text-destructive-foreground',\n className\n )\n )}\n {...props}\n />\n );\n}\n\ninterface CalendarProps<T extends AriaDateValue> extends AriaCalendarProps<T> {\n errorMessage?: string;\n}\n\nexport function Calendar<T extends AriaDateValue>({ errorMessage, className, ...props }: CalendarProps<T>) {\n return (\n <AriaCalendar className={composeRenderProps(className, className => classNames('w-fit', className))} {...props}>\n <CalendarHeading />\n <CalendarGrid>\n <CalendarGridHeader>{day => <CalendarHeaderCell>{day}</CalendarHeaderCell>}</CalendarGridHeader>\n <CalendarGridBody>{date => <CalendarCell date={date} />}</CalendarGridBody>\n </CalendarGrid>\n {errorMessage && <FieldError>{errorMessage}</FieldError>}\n </AriaCalendar>\n );\n}\n\ninterface RangeCalendarProps<T extends AriaDateValue> extends AriaRangeCalendarProps<T> {\n errorMessage?: string;\n}\n\nexport function RangeCalendar<T extends AriaDateValue>({ errorMessage, className, ...props }: RangeCalendarProps<T>) {\n return (\n <AriaRangeCalendar\n className={composeRenderProps(className, className => classNames('w-fit', className))}\n {...props}\n >\n <CalendarHeading />\n <CalendarGrid>\n <CalendarGridHeader>{day => <CalendarHeaderCell>{day}</CalendarHeaderCell>}</CalendarGridHeader>\n <CalendarGridBody>{date => <CalendarCell date={date} />}</CalendarGridBody>\n </CalendarGrid>\n {errorMessage && <FieldError slot=\"errorMessage\">{errorMessage}</FieldError>}\n </AriaRangeCalendar>\n );\n}\n"],"names":["CalendarHeading","props","direction","useLocale","jsxs","jsx","Button","classNames","IcRight","IcLeft","AriaHeading","CalendarGrid","className","AriaCalendarGrid","CalendarGridHeader","AriaCalendarGridHeader","CalendarHeaderCell","AriaCalendarHeaderCell","CalendarGridBody","AriaCalendarGridBody","CalendarCell","isRange","use","AriaRangeCalendarStateContext","AriaCalendarCell","composeRenderProps","renderProps","buttonVariants","today","getLocalTimeZone","Calendar","errorMessage","AriaCalendar","day","date","FieldError","RangeCalendar","AriaRangeCalendar"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"calendar.js","sources":["../../lib/components/calendar.tsx"],"sourcesContent":["import { getLocalTimeZone, today } from '@internationalized/date';\nimport {\n Calendar as AriaCalendar,\n CalendarCell as AriaCalendarCell,\n CalendarCellProps as AriaCalendarCellProps,\n CalendarGrid as AriaCalendarGrid,\n CalendarGridBody as AriaCalendarGridBody,\n CalendarGridBodyProps as AriaCalendarGridBodyProps,\n CalendarGridHeader as AriaCalendarGridHeader,\n CalendarGridProps as AriaCalendarGridProps,\n CalendarHeaderCell as AriaCalendarHeaderCell,\n CalendarHeaderCellProps as AriaCalendarHeaderCellProps,\n CalendarProps as AriaCalendarProps,\n DateValue as AriaDateValue,\n Heading as AriaHeading,\n RangeCalendar as AriaRangeCalendar,\n RangeCalendarProps as AriaRangeCalendarProps,\n RangeCalendarStateContext as AriaRangeCalendarStateContext,\n composeRenderProps,\n useLocale,\n} from 'react-aria-components';\n\nimport { use } from 'react';\nimport { Button, buttonVariants } from '../components/button';\nimport { FieldError } from '../components/field';\nimport { classNames } from '../utilities/theme';\nimport { IcLeft, IcRight } from './icons';\n\n/**\n * Calendar header with navigation buttons and month/year display.\n */\nexport function CalendarHeading(props: React.HTMLAttributes<HTMLElement>) {\n let { direction } = useLocale();\n\n return (\n <header className=\"flex w-full items-center gap-1 px-1 pb-icon\" {...props}>\n <Button\n slot=\"previous\"\n size=\"none\"\n className={classNames(\n 'size-7 bg-transparent p-0 opacity-50',\n /* Hover */\n 'data-[hovered]:opacity-100'\n )}\n >\n {direction === 'rtl' ? <IcRight aria-hidden /> : <IcLeft aria-hidden />}\n </Button>\n <AriaHeading className=\"grow text-center body font-medium\" />\n <Button\n slot=\"next\"\n className={classNames(\n 'size-7 bg-transparent p-0 opacity-50',\n /* Hover */\n 'data-[hovered]:opacity-100'\n )}\n >\n {direction === 'rtl' ? <IcLeft aria-hidden /> : <IcRight aria-hidden />}\n </Button>\n </header>\n );\n}\n\n/**\n * Grid container for calendar cells with proper spacing.\n */\nexport function CalendarGrid({ className, ...props }: AriaCalendarGridProps) {\n return (\n <AriaCalendarGrid\n className={classNames(' border-separate border-spacing-x-0 border-spacing-y-1 ', className)}\n {...props}\n />\n );\n}\n\nexport const CalendarGridHeader = AriaCalendarGridHeader;\n\n/**\n * Header cell displaying day of week abbreviation.\n */\nexport function CalendarHeaderCell({ className, ...props }: AriaCalendarHeaderCellProps) {\n return (\n <AriaCalendarHeaderCell\n className={classNames('w-9 body-sm font-normal text-muted-foreground', className)}\n {...props}\n />\n );\n}\n\n/**\n * Body container for calendar date cells.\n */\nexport function CalendarGridBody({ className, ...props }: AriaCalendarGridBodyProps) {\n return <AriaCalendarGridBody className={classNames('[&>tr>td]:p-0', className)} {...props} />;\n}\n\n/**\n * Individual calendar date cell with selection, hover, and availability states.\n * Automatically adapts styling for range selection contexts.\n */\nexport function CalendarCell({ className, ...props }: AriaCalendarCellProps) {\n const isRange = Boolean(use(AriaRangeCalendarStateContext));\n return (\n <AriaCalendarCell\n className={composeRenderProps(className, (className, renderProps) =>\n classNames(\n buttonVariants({ variant: 'ghost', size: 'none' }),\n 'relative flex size-9 items-center justify-center p-0 body-sm font-normal',\n /* Disabled */\n renderProps.isDisabled && 'text-muted-foreground opacity-50',\n /* Selected */\n renderProps.isSelected &&\n 'bg-primary text-primary-foreground data-[focused]:bg-primary data-[focused]:text-primary-foreground',\n /* Hover */\n renderProps.isHovered &&\n renderProps.isSelected &&\n (renderProps.isSelectionStart || renderProps.isSelectionEnd || !isRange) &&\n 'data-[hovered]:bg-primary data-[hovered]:text-primary-foreground',\n /* Selection Start/End */\n renderProps.isSelected &&\n isRange &&\n !renderProps.isSelectionStart &&\n !renderProps.isSelectionEnd &&\n 'rounded-none bg-accent text-accent-foreground',\n /* Outside Month */\n renderProps.isOutsideMonth &&\n 'text-muted-foreground opacity-50 data-[selected]:bg-accent/50 data-[selected]:text-muted-foreground data-[selected]:opacity-30',\n /* Current Date */\n renderProps.date.compare(today(getLocalTimeZone())) === 0 &&\n !renderProps.isSelected &&\n 'bg-accent text-accent-foreground',\n /* Unavailable Date */\n renderProps.isUnavailable && 'cursor-default text-destructive ',\n renderProps.isInvalid &&\n 'bg-destructive text-destructive-foreground data-[focused]:bg-destructive data-[hovered]:bg-destructive data-[focused]:text-destructive-foreground data-[hovered]:text-destructive-foreground',\n className\n )\n )}\n {...props}\n />\n );\n}\n\ninterface CalendarProps<T extends AriaDateValue> extends AriaCalendarProps<T> {\n /** Error message to display below the calendar */\n errorMessage?: string;\n}\n\n/**\n * Calendar component for single date selection.\n *\n * @example Basic usage\n * ```tsx\n * <Calendar defaultValue={today(getLocalTimeZone())} />\n * ```\n */\nexport function Calendar<T extends AriaDateValue>({ errorMessage, className, ...props }: CalendarProps<T>) {\n return (\n <AriaCalendar className={composeRenderProps(className, className => classNames('w-fit', className))} {...props}>\n <CalendarHeading />\n <CalendarGrid>\n <CalendarGridHeader>{day => <CalendarHeaderCell>{day}</CalendarHeaderCell>}</CalendarGridHeader>\n <CalendarGridBody>{date => <CalendarCell date={date} />}</CalendarGridBody>\n </CalendarGrid>\n {errorMessage && <FieldError>{errorMessage}</FieldError>}\n </AriaCalendar>\n );\n}\n\ninterface RangeCalendarProps<T extends AriaDateValue> extends AriaRangeCalendarProps<T> {\n /** Error message to display below the calendar */\n errorMessage?: string;\n}\n\n/**\n * Calendar component for date range selection.\n *\n * @example Basic range selection\n * ```tsx\n * <RangeCalendar\n * defaultValue={{\n * start: today(getLocalTimeZone()),\n * end: today(getLocalTimeZone()).add({ days: 7 })\n * }}\n * />\n * ```\n */\nexport function RangeCalendar<T extends AriaDateValue>({ errorMessage, className, ...props }: RangeCalendarProps<T>) {\n return (\n <AriaRangeCalendar\n className={composeRenderProps(className, className => classNames('w-fit', className))}\n {...props}\n >\n <CalendarHeading />\n <CalendarGrid>\n <CalendarGridHeader>{day => <CalendarHeaderCell>{day}</CalendarHeaderCell>}</CalendarGridHeader>\n <CalendarGridBody>{date => <CalendarCell date={date} />}</CalendarGridBody>\n </CalendarGrid>\n {errorMessage && <FieldError slot=\"errorMessage\">{errorMessage}</FieldError>}\n </AriaRangeCalendar>\n );\n}\n"],"names":["CalendarHeading","props","direction","useLocale","jsxs","jsx","Button","classNames","IcRight","IcLeft","AriaHeading","CalendarGrid","className","AriaCalendarGrid","CalendarGridHeader","AriaCalendarGridHeader","CalendarHeaderCell","AriaCalendarHeaderCell","CalendarGridBody","AriaCalendarGridBody","CalendarCell","isRange","use","AriaRangeCalendarStateContext","AriaCalendarCell","composeRenderProps","renderProps","buttonVariants","today","getLocalTimeZone","Calendar","errorMessage","AriaCalendar","day","date","FieldError","RangeCalendar","AriaRangeCalendar"],"mappings":"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"}
|
|
@@ -3,9 +3,49 @@ import { ZonedDateTime } from '@internationalized/date';
|
|
|
3
3
|
import { FormFieldProps } from '../components/field';
|
|
4
4
|
interface DatePickerProps<T extends AriaDateValue> extends AriaDatePickerProps<T>, FormFieldProps {
|
|
5
5
|
}
|
|
6
|
+
/**
|
|
7
|
+
* Date picker component for selecting single dates.
|
|
8
|
+
*
|
|
9
|
+
* @remarks
|
|
10
|
+
* Built with React Aria for accessibility and internationalization support.
|
|
11
|
+
* Supports date validation, min/max values, and custom date formatting.
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* ```tsx
|
|
15
|
+
* <DatePicker
|
|
16
|
+
* label="Event Date"
|
|
17
|
+
* isRequired
|
|
18
|
+
* minValue={today(getLocalTimeZone())}
|
|
19
|
+
* />
|
|
20
|
+
* ```
|
|
21
|
+
*/
|
|
6
22
|
export declare function DatePicker<T extends AriaDateValue>({ label, description, errorMessage, className, ...props }: DatePickerProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
/**
|
|
24
|
+
* Form-integrated date picker that works with TanStack Form.
|
|
25
|
+
*
|
|
26
|
+
* @remarks
|
|
27
|
+
* Automatically handles form state, validation, and error messages.
|
|
28
|
+
* Uses the field context to connect with the form's validation system.
|
|
29
|
+
*/
|
|
7
30
|
export declare function TfDatePicker({ ...props }: Omit<DatePickerProps<ZonedDateTime>, 'value' | 'onChange' | 'onBlur' | 'isInvalid' | 'errorMessage'>): import("react/jsx-runtime").JSX.Element;
|
|
8
31
|
interface DateRangePickerProps<T extends AriaDateValue> extends AriaDateRangePickerProps<T>, FormFieldProps {
|
|
9
32
|
}
|
|
33
|
+
/**
|
|
34
|
+
* Date range picker component for selecting start and end dates.
|
|
35
|
+
*
|
|
36
|
+
* @remarks
|
|
37
|
+
* Allows users to select a date range with start and end values.
|
|
38
|
+
* Built with React Aria for accessibility and internationalization support.
|
|
39
|
+
* Features separate input fields for start and end dates with range validation.
|
|
40
|
+
*
|
|
41
|
+
* @example
|
|
42
|
+
* ```tsx
|
|
43
|
+
* <DateRangePicker
|
|
44
|
+
* label="Booking Period"
|
|
45
|
+
* description="Select your stay dates"
|
|
46
|
+
* isRequired
|
|
47
|
+
* />
|
|
48
|
+
* ```
|
|
49
|
+
*/
|
|
10
50
|
export declare function DateRangePicker<T extends AriaDateValue>({ label, description, errorMessage, className, ...props }: DateRangePickerProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
11
51
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"date-picker.js","sources":["../../lib/components/date-picker.tsx"],"sourcesContent":["import {\n DatePicker as AriaDatePicker,\n DatePickerProps as AriaDatePickerProps,\n DateRangePicker as AriaDateRangePicker,\n DateRangePickerProps as AriaDateRangePickerProps,\n DateValue as AriaDateValue,\n Dialog as AriaDialog,\n DialogProps as AriaDialogProps,\n PopoverProps as AriaPopoverProps,\n composeRenderProps,\n Popover,\n} from 'react-aria-components';\n\nimport { getLocalTimeZone, parseAbsolute, type ZonedDateTime } from '@internationalized/date';\nimport { Button } from '../components/button';\nimport { Calendar, RangeCalendar } from '../components/calendar';\nimport { DateInput } from '../components/datefield';\nimport { FieldGroup, FormField, type FormFieldProps } from '../components/field';\nimport { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\nimport { classNames } from '../utilities/theme';\nimport { IcDate } from './icons';\n\nconst DatePickerContent = ({\n className,\n popoverClassName,\n ...props\n}: AriaDialogProps & { popoverClassName?: AriaPopoverProps['className'] }) => (\n <Popover\n className={composeRenderProps(popoverClassName, className =>\n classNames('w-auto p-3 bg-popover border', className)\n )}\n >\n <AriaDialog\n className={classNames(\n 'flex w-full flex-col gap-y-2 outline-none sm:flex-row sm:gap-x-icon sm:gap-y-0',\n className\n )}\n {...props}\n />\n </Popover>\n);\n\ninterface DatePickerProps<T extends AriaDateValue> extends AriaDatePickerProps<T>, FormFieldProps {}\n\nexport function DatePicker<T extends AriaDateValue>({\n label,\n description,\n errorMessage,\n className,\n ...props\n}: DatePickerProps<T>) {\n return (\n <AriaDatePicker\n className={composeRenderProps(className, className => classNames('group flex flex-col gap-2', className))}\n {...props}\n >\n <FormField label={label} description={description} errorMessage={errorMessage}>\n <FieldGroup aria-label={label}>\n <DateInput className=\"flex-1\" variant=\"ghost\" />\n <Button variant=\"ghost\" size=\"icon\" className={'-me-2 ms-2'}>\n <IcDate aria-hidden />\n </Button>\n </FieldGroup>\n </FormField>\n <DatePickerContent>\n <Calendar />\n </DatePickerContent>\n </AriaDatePicker>\n );\n}\n\nexport function TfDatePicker({\n ...props\n}: Omit<DatePickerProps<ZonedDateTime>, 'value' | 'onChange' | 'onBlur' | 'isInvalid' | 'errorMessage'>) {\n const field = useFieldContext<string | null>({ disabled: props.isDisabled });\n return (\n <DatePicker\n hideTimeZone\n isDisabled={props.isDisabled || field.form.state.isSubmitting}\n value={field.state.value ? parseAbsolute(field.state.value, getLocalTimeZone()) : null}\n onChange={v => (v ? field.handleChange(v.toAbsoluteString()) : field.handleChange(null))}\n onBlur={field.handleBlur}\n isInvalid={!!getFieldErrorMessage(field)}\n errorMessage={getFieldErrorMessage(field)}\n {...props}\n />\n );\n}\n\ninterface DateRangePickerProps<T extends AriaDateValue> extends AriaDateRangePickerProps<T>, FormFieldProps {}\nexport function DateRangePicker<T extends AriaDateValue>({\n label,\n description,\n errorMessage,\n className,\n ...props\n}: DateRangePickerProps<T>) {\n return (\n <AriaDateRangePicker\n className={composeRenderProps(className, className => classNames('group flex flex-col gap-2', className))}\n {...props}\n >\n <FormField label={label} errorMessage={errorMessage} description={description}>\n <FieldGroup>\n <DateInput variant=\"ghost\" slot={'start'} />\n <span aria-hidden className=\"px-2 body-sm text-muted-foreground\">\n -\n </span>\n <DateInput className=\"flex-1\" variant=\"ghost\" slot={'end'} />\n <Button variant=\"ghost\" size=\"icon\" className=\"mr-1 data-[focus-visible]:ring-offset-0\">\n <IcDate aria-hidden />\n </Button>\n </FieldGroup>\n </FormField>\n <DatePickerContent>\n <RangeCalendar />\n </DatePickerContent>\n </AriaDateRangePicker>\n );\n}\n"],"names":["DatePickerContent","className","popoverClassName","props","jsx","Popover","composeRenderProps","classNames","AriaDialog","DatePicker","label","description","errorMessage","jsxs","AriaDatePicker","FormField","FieldGroup","DateInput","Button","IcDate","Calendar","TfDatePicker","field","useFieldContext","parseAbsolute","getLocalTimeZone","v","getFieldErrorMessage","DateRangePicker","AriaDateRangePicker","RangeCalendar"],"mappings":"
|
|
1
|
+
{"version":3,"file":"date-picker.js","sources":["../../lib/components/date-picker.tsx"],"sourcesContent":["import {\n DatePicker as AriaDatePicker,\n DatePickerProps as AriaDatePickerProps,\n DateRangePicker as AriaDateRangePicker,\n DateRangePickerProps as AriaDateRangePickerProps,\n DateValue as AriaDateValue,\n Dialog as AriaDialog,\n DialogProps as AriaDialogProps,\n PopoverProps as AriaPopoverProps,\n composeRenderProps,\n Popover,\n} from 'react-aria-components';\n\nimport { getLocalTimeZone, parseAbsolute, type ZonedDateTime } from '@internationalized/date';\nimport { Button } from '../components/button';\nimport { Calendar, RangeCalendar } from '../components/calendar';\nimport { DateInput } from '../components/datefield';\nimport { FieldGroup, FormField, type FormFieldProps } from '../components/field';\nimport { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\nimport { classNames } from '../utilities/theme';\nimport { IcDate } from './icons';\n\n/**\n * Popover container for date picker content.\n *\n * @remarks\n * Provides consistent styling and positioning for the calendar popup.\n */\nconst DatePickerContent = ({\n className,\n popoverClassName,\n ...props\n}: AriaDialogProps & { popoverClassName?: AriaPopoverProps['className'] }) => (\n <Popover\n className={composeRenderProps(popoverClassName, className =>\n classNames('w-auto p-3 bg-popover border', className)\n )}\n >\n <AriaDialog\n className={classNames(\n 'flex w-full flex-col gap-y-2 outline-none sm:flex-row sm:gap-x-icon sm:gap-y-0',\n className\n )}\n {...props}\n />\n </Popover>\n);\n\ninterface DatePickerProps<T extends AriaDateValue> extends AriaDatePickerProps<T>, FormFieldProps {}\n\n/**\n * Date picker component for selecting single dates.\n *\n * @remarks\n * Built with React Aria for accessibility and internationalization support.\n * Supports date validation, min/max values, and custom date formatting.\n *\n * @example\n * ```tsx\n * <DatePicker\n * label=\"Event Date\"\n * isRequired\n * minValue={today(getLocalTimeZone())}\n * />\n * ```\n */\nexport function DatePicker<T extends AriaDateValue>({\n label,\n description,\n errorMessage,\n className,\n ...props\n}: DatePickerProps<T>) {\n return (\n <AriaDatePicker\n className={composeRenderProps(className, className => classNames('group flex flex-col gap-2', className))}\n {...props}\n >\n <FormField label={label} description={description} errorMessage={errorMessage}>\n <FieldGroup aria-label={label}>\n <DateInput className=\"flex-1\" variant=\"ghost\" />\n <Button variant=\"ghost\" size=\"icon\" className={'-me-2 ms-2'}>\n <IcDate aria-hidden />\n </Button>\n </FieldGroup>\n </FormField>\n <DatePickerContent>\n <Calendar />\n </DatePickerContent>\n </AriaDatePicker>\n );\n}\n\n/**\n * Form-integrated date picker that works with TanStack Form.\n *\n * @remarks\n * Automatically handles form state, validation, and error messages.\n * Uses the field context to connect with the form's validation system.\n */\nexport function TfDatePicker({\n ...props\n}: Omit<DatePickerProps<ZonedDateTime>, 'value' | 'onChange' | 'onBlur' | 'isInvalid' | 'errorMessage'>) {\n const field = useFieldContext<string | null>({ disabled: props.isDisabled });\n return (\n <DatePicker\n hideTimeZone\n isDisabled={props.isDisabled || field.form.state.isSubmitting}\n value={field.state.value ? parseAbsolute(field.state.value, getLocalTimeZone()) : null}\n onChange={v => (v ? field.handleChange(v.toAbsoluteString()) : field.handleChange(null))}\n onBlur={field.handleBlur}\n isInvalid={!!getFieldErrorMessage(field)}\n errorMessage={getFieldErrorMessage(field)}\n {...props}\n />\n );\n}\n\ninterface DateRangePickerProps<T extends AriaDateValue> extends AriaDateRangePickerProps<T>, FormFieldProps {}\n\n/**\n * Date range picker component for selecting start and end dates.\n *\n * @remarks\n * Allows users to select a date range with start and end values.\n * Built with React Aria for accessibility and internationalization support.\n * Features separate input fields for start and end dates with range validation.\n *\n * @example\n * ```tsx\n * <DateRangePicker\n * label=\"Booking Period\"\n * description=\"Select your stay dates\"\n * isRequired\n * />\n * ```\n */\nexport function DateRangePicker<T extends AriaDateValue>({\n label,\n description,\n errorMessage,\n className,\n ...props\n}: DateRangePickerProps<T>) {\n return (\n <AriaDateRangePicker\n className={composeRenderProps(className, className => classNames('group flex flex-col gap-2', className))}\n {...props}\n >\n <FormField label={label} errorMessage={errorMessage} description={description}>\n <FieldGroup>\n <DateInput variant=\"ghost\" slot={'start'} />\n <span aria-hidden className=\"px-2 body-sm text-muted-foreground\">\n -\n </span>\n <DateInput className=\"flex-1\" variant=\"ghost\" slot={'end'} />\n <Button variant=\"ghost\" size=\"icon\" className=\"mr-1 data-[focus-visible]:ring-offset-0\">\n <IcDate aria-hidden />\n </Button>\n </FieldGroup>\n </FormField>\n <DatePickerContent>\n <RangeCalendar />\n </DatePickerContent>\n </AriaDateRangePicker>\n );\n}\n"],"names":["DatePickerContent","className","popoverClassName","props","jsx","Popover","composeRenderProps","classNames","AriaDialog","DatePicker","label","description","errorMessage","jsxs","AriaDatePicker","FormField","FieldGroup","DateInput","Button","IcDate","Calendar","TfDatePicker","field","useFieldContext","parseAbsolute","getLocalTimeZone","v","getFieldErrorMessage","DateRangePicker","AriaDateRangePicker","RangeCalendar"],"mappings":"2vBA6BA,MAAMA,EAAoB,CAAC,CACvB,UAAAC,EACA,iBAAAC,EACA,GAAGC,CACP,IACIC,EAACC,EAAA,CACG,UAAWC,EAAmBJ,EAAkBD,GAC5CM,EAAW,+BAAgCN,CAAS,CAAA,EAGxD,SAAAG,EAACI,EAAA,CACG,UAAWD,EACP,iFACAN,CAAA,EAEH,GAAGE,CAAA,CAAA,CACR,CACJ,EAqBG,SAASM,EAAoC,CAChD,MAAAC,EACA,YAAAC,EACA,aAAAC,EACA,UAAAX,EACA,GAAGE,CACP,EAAuB,CACnB,OACIU,EAACC,EAAA,CACG,UAAWR,EAAmBL,EAAWA,GAAaM,EAAW,4BAA6BN,CAAS,CAAC,EACvG,GAAGE,EAEJ,SAAA,CAAAC,EAACW,GAAU,MAAAL,EAAc,YAAAC,EAA0B,aAAAC,EAC/C,SAAAC,EAACG,EAAA,CAAW,aAAYN,EACpB,SAAA,CAAAN,EAACa,EAAA,CAAU,UAAU,SAAS,QAAQ,QAAQ,EAC9Cb,EAACc,EAAA,CAAO,QAAQ,QAAQ,KAAK,OAAO,UAAW,aAC3C,SAAAd,EAACe,EAAA,CAAO,cAAW,EAAA,CAAC,CAAA,CACxB,CAAA,CAAA,CACJ,CAAA,CACJ,EACAf,EAACJ,EAAA,CACG,SAAAI,EAACgB,EAAA,CAAA,CAAS,CAAA,CACd,CAAA,CAAA,CAAA,CAGZ,CASO,SAASC,EAAa,CACzB,GAAGlB,CACP,EAAyG,CACrG,MAAMmB,EAAQC,EAA+B,CAAE,SAAUpB,EAAM,WAAY,EAC3E,OACIC,EAACK,EAAA,CACG,aAAY,GACZ,WAAYN,EAAM,YAAcmB,EAAM,KAAK,MAAM,aACjD,MAAOA,EAAM,MAAM,MAAQE,EAAcF,EAAM,MAAM,MAAOG,EAAA,CAAkB,EAAI,KAClF,SAAUC,GAAMA,EAAIJ,EAAM,aAAaI,EAAE,kBAAkB,EAAIJ,EAAM,aAAa,IAAI,EACtF,OAAQA,EAAM,WACd,UAAW,CAAC,CAACK,EAAqBL,CAAK,EACvC,aAAcK,EAAqBL,CAAK,EACvC,GAAGnB,CAAA,CAAA,CAGhB,CAqBO,SAASyB,EAAyC,CACrD,MAAAlB,EACA,YAAAC,EACA,aAAAC,EACA,UAAAX,EACA,GAAGE,CACP,EAA4B,CACxB,OACIU,EAACgB,EAAA,CACG,UAAWvB,EAAmBL,EAAWA,GAAaM,EAAW,4BAA6BN,CAAS,CAAC,EACvG,GAAGE,EAEJ,SAAA,CAAAC,EAACW,EAAA,CAAU,MAAAL,EAAc,aAAAE,EAA4B,YAAAD,EACjD,WAACK,EAAA,CACG,SAAA,CAAAZ,EAACa,EAAA,CAAU,QAAQ,QAAQ,KAAM,QAAS,IACzC,OAAA,CAAK,cAAW,GAAC,UAAU,qCAAqC,SAAA,IAEjE,IACCA,EAAA,CAAU,UAAU,SAAS,QAAQ,QAAQ,KAAM,MAAO,EAC3Db,EAACc,EAAA,CAAO,QAAQ,QAAQ,KAAK,OAAO,UAAU,0CAC1C,SAAAd,EAACe,EAAA,CAAO,cAAW,EAAA,CAAC,CAAA,CACxB,CAAA,CAAA,CACJ,CAAA,CACJ,EACAf,EAACJ,EAAA,CACG,SAAAI,EAAC0B,EAAA,CAAA,CAAc,CAAA,CACnB,CAAA,CAAA,CAAA,CAGZ"}
|
|
@@ -10,5 +10,22 @@ interface DateFieldProps<T extends AriaDateValue> extends AriaDateFieldProps<T>,
|
|
|
10
10
|
export declare function DateField<T extends AriaDateValue>({ label, description, className, errorMessage, ...props }: DateFieldProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
11
11
|
interface TimeFieldProps<T extends AriaTimeValue> extends AriaTimeFieldProps<T>, FormFieldProps {
|
|
12
12
|
}
|
|
13
|
+
/**
|
|
14
|
+
* Time field component for time values.
|
|
15
|
+
*
|
|
16
|
+
* @remarks
|
|
17
|
+
* Built with React Aria for accessibility and internationalization support.
|
|
18
|
+
* Supports 12/24-hour formats, granularity control, and time constraints.
|
|
19
|
+
* Features segmented input for hours, minutes, seconds, and AM/PM.
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* ```tsx
|
|
23
|
+
* <TimeField
|
|
24
|
+
* label="Meeting Time"
|
|
25
|
+
* minValue={parseTime('09:00')}
|
|
26
|
+
* maxValue={parseTime('17:00')}
|
|
27
|
+
* />
|
|
28
|
+
* ```
|
|
29
|
+
*/
|
|
13
30
|
export declare function TimeField<T extends AriaTimeValue>({ label, description, errorMessage, className, ...props }: TimeFieldProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
14
31
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"datefield.js","sources":["../../lib/components/datefield.tsx"],"sourcesContent":["'use client';\n\nimport { VariantProps } from 'class-variance-authority';\nimport {\n DateField as AriaDateField,\n DateFieldProps as AriaDateFieldProps,\n DateInput as AriaDateInput,\n DateInputProps as AriaDateInputProps,\n DateSegment as AriaDateSegment,\n DateSegmentProps as AriaDateSegmentProps,\n DateValue as AriaDateValue,\n TimeField as AriaTimeField,\n TimeFieldProps as AriaTimeFieldProps,\n TimeValue as AriaTimeValue,\n composeRenderProps,\n} from 'react-aria-components';\n\nimport { classNames } from '../utilities/theme';\nimport { fieldGroupVariants, FormField, type FormFieldProps } from './field';\n\nexport function DateSegment({ className, ...props }: AriaDateSegmentProps) {\n return (\n <AriaDateSegment\n className={composeRenderProps(className, className =>\n classNames(\n 'inline caret-transparent outline-0',\n /* Placeholder */\n 'data-[placeholder]:text-muted-foreground',\n /* Disabled */\n 'disabled-muted',\n /* Focused */\n 'data-[focused]:bg-accent data-[focused]:text-accent-foreground',\n /* Invalid */\n 'data-[invalid]:data-[focused]:bg-destructive data-[invalid]:data-[focused]:data-[placeholder]:text-destructive-foreground data-[invalid]:data-[focused]:text-destructive-foreground data-[invalid]:data-[placeholder]:text-destructive data-[invalid]:text-destructive',\n className\n )\n )}\n {...props}\n />\n );\n}\n\ninterface DateInputProps extends AriaDateInputProps, VariantProps<typeof fieldGroupVariants> {}\n\nexport function DateInput({ className, variant, ...props }: Omit<DateInputProps, 'children'>) {\n return (\n <AriaDateInput\n className={composeRenderProps(className, className =>\n classNames(fieldGroupVariants({ variant }), 'body-sm', className)\n )}\n {...props}\n >\n {segment => <DateSegment segment={segment} />}\n </AriaDateInput>\n );\n}\n\ninterface DateFieldProps<T extends AriaDateValue> extends AriaDateFieldProps<T>, FormFieldProps {}\n\nexport function DateField<T extends AriaDateValue>({\n label,\n description,\n className,\n errorMessage,\n ...props\n}: DateFieldProps<T>) {\n return (\n <AriaDateField\n className={composeRenderProps(className, className => classNames('group form-field', className))}\n {...props}\n >\n <FormField label={label} description={description} errorMessage={errorMessage}>\n <DateInput />\n </FormField>\n </AriaDateField>\n );\n}\n\ninterface TimeFieldProps<T extends AriaTimeValue> extends AriaTimeFieldProps<T>, FormFieldProps {}\n\nexport function TimeField<T extends AriaTimeValue>({\n label,\n description,\n errorMessage,\n className,\n ...props\n}: TimeFieldProps<T>) {\n return (\n <AriaTimeField\n className={composeRenderProps(className, className => classNames('group form-field', className))}\n {...props}\n >\n <FormField label={label} description={description} errorMessage={errorMessage}>\n <DateInput />\n </FormField>\n </AriaTimeField>\n );\n}\n"],"names":["DateSegment","className","props","jsx","AriaDateSegment","composeRenderProps","classNames","DateInput","variant","AriaDateInput","fieldGroupVariants","segment","DateField","label","description","errorMessage","AriaDateField","FormField","TimeField","AriaTimeField"],"mappings":"+WAoBO,SAASA,EAAY,CAAE,UAAAC,EAAW,GAAGC,GAA+B,CACvE,OACIC,EAACC,EAAA,CACG,UAAWC,EAAmBJ,EAAWA,GACrCK,EACI,qCAEA,2CAEA,iBAEA,iEAEA,yQACAL,CAAA,CACJ,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAIO,SAASK,EAAU,CAAE,UAAAN,EAAW,QAAAO,EAAS,GAAGN,GAA2C,CAC1F,OACIC,EAACM,EAAA,CACG,UAAWJ,EAAmBJ,EAAWA,GACrCK,EAAWI,EAAmB,CAAE,QAAAF,CAAA,CAAS,EAAG,UAAWP,CAAS,CAAA,EAEnE,GAAGC,EAEH,SAAAS,GAAWR,EAACH,EAAA,CAAY,QAAAW,CAAA,CAAkB,CAAA,CAAA,CAGvD,CAIO,SAASC,EAAmC,CAC/C,MAAAC,EACA,YAAAC,EACA,UAAAb,EACA,aAAAc,EACA,GAAGb,CACP,EAAsB,CAClB,OACIC,EAACa,EAAA,CACG,UAAWX,EAAmBJ,EAAWA,GAAaK,EAAW,mBAAoBL,CAAS,CAAC,EAC9F,GAAGC,EAEJ,WAACe,EAAA,CAAU,MAAAJ,EAAc,YAAAC,EAA0B,aAAAC,EAC/C,SAAAZ,EAACI,IAAU,CAAA,CACf,CAAA,CAAA,CAGZ,
|
|
1
|
+
{"version":3,"file":"datefield.js","sources":["../../lib/components/datefield.tsx"],"sourcesContent":["'use client';\n\nimport { VariantProps } from 'class-variance-authority';\nimport {\n DateField as AriaDateField,\n DateFieldProps as AriaDateFieldProps,\n DateInput as AriaDateInput,\n DateInputProps as AriaDateInputProps,\n DateSegment as AriaDateSegment,\n DateSegmentProps as AriaDateSegmentProps,\n DateValue as AriaDateValue,\n TimeField as AriaTimeField,\n TimeFieldProps as AriaTimeFieldProps,\n TimeValue as AriaTimeValue,\n composeRenderProps,\n} from 'react-aria-components';\n\nimport { classNames } from '../utilities/theme';\nimport { fieldGroupVariants, FormField, type FormFieldProps } from './field';\n\nexport function DateSegment({ className, ...props }: AriaDateSegmentProps) {\n return (\n <AriaDateSegment\n className={composeRenderProps(className, className =>\n classNames(\n 'inline caret-transparent outline-0',\n /* Placeholder */\n 'data-[placeholder]:text-muted-foreground',\n /* Disabled */\n 'disabled-muted',\n /* Focused */\n 'data-[focused]:bg-accent data-[focused]:text-accent-foreground',\n /* Invalid */\n 'data-[invalid]:data-[focused]:bg-destructive data-[invalid]:data-[focused]:data-[placeholder]:text-destructive-foreground data-[invalid]:data-[focused]:text-destructive-foreground data-[invalid]:data-[placeholder]:text-destructive data-[invalid]:text-destructive',\n className\n )\n )}\n {...props}\n />\n );\n}\n\ninterface DateInputProps extends AriaDateInputProps, VariantProps<typeof fieldGroupVariants> {}\n\nexport function DateInput({ className, variant, ...props }: Omit<DateInputProps, 'children'>) {\n return (\n <AriaDateInput\n className={composeRenderProps(className, className =>\n classNames(fieldGroupVariants({ variant }), 'body-sm', className)\n )}\n {...props}\n >\n {segment => <DateSegment segment={segment} />}\n </AriaDateInput>\n );\n}\n\ninterface DateFieldProps<T extends AriaDateValue> extends AriaDateFieldProps<T>, FormFieldProps {}\n\nexport function DateField<T extends AriaDateValue>({\n label,\n description,\n className,\n errorMessage,\n ...props\n}: DateFieldProps<T>) {\n return (\n <AriaDateField\n className={composeRenderProps(className, className => classNames('group form-field', className))}\n {...props}\n >\n <FormField label={label} description={description} errorMessage={errorMessage}>\n <DateInput />\n </FormField>\n </AriaDateField>\n );\n}\n\ninterface TimeFieldProps<T extends AriaTimeValue> extends AriaTimeFieldProps<T>, FormFieldProps {}\n\n/**\n * Time field component for time values.\n *\n * @remarks\n * Built with React Aria for accessibility and internationalization support.\n * Supports 12/24-hour formats, granularity control, and time constraints.\n * Features segmented input for hours, minutes, seconds, and AM/PM.\n *\n * @example\n * ```tsx\n * <TimeField\n * label=\"Meeting Time\"\n * minValue={parseTime('09:00')}\n * maxValue={parseTime('17:00')}\n * />\n * ```\n */\nexport function TimeField<T extends AriaTimeValue>({\n label,\n description,\n errorMessage,\n className,\n ...props\n}: TimeFieldProps<T>) {\n return (\n <AriaTimeField\n className={composeRenderProps(className, className => classNames('group form-field', className))}\n {...props}\n >\n <FormField label={label} description={description} errorMessage={errorMessage}>\n <DateInput />\n </FormField>\n </AriaTimeField>\n );\n}\n"],"names":["DateSegment","className","props","jsx","AriaDateSegment","composeRenderProps","classNames","DateInput","variant","AriaDateInput","fieldGroupVariants","segment","DateField","label","description","errorMessage","AriaDateField","FormField","TimeField","AriaTimeField"],"mappings":"+WAoBO,SAASA,EAAY,CAAE,UAAAC,EAAW,GAAGC,GAA+B,CACvE,OACIC,EAACC,EAAA,CACG,UAAWC,EAAmBJ,EAAWA,GACrCK,EACI,qCAEA,2CAEA,iBAEA,iEAEA,yQACAL,CAAA,CACJ,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAIO,SAASK,EAAU,CAAE,UAAAN,EAAW,QAAAO,EAAS,GAAGN,GAA2C,CAC1F,OACIC,EAACM,EAAA,CACG,UAAWJ,EAAmBJ,EAAWA,GACrCK,EAAWI,EAAmB,CAAE,QAAAF,CAAA,CAAS,EAAG,UAAWP,CAAS,CAAA,EAEnE,GAAGC,EAEH,SAAAS,GAAWR,EAACH,EAAA,CAAY,QAAAW,CAAA,CAAkB,CAAA,CAAA,CAGvD,CAIO,SAASC,EAAmC,CAC/C,MAAAC,EACA,YAAAC,EACA,UAAAb,EACA,aAAAc,EACA,GAAGb,CACP,EAAsB,CAClB,OACIC,EAACa,EAAA,CACG,UAAWX,EAAmBJ,EAAWA,GAAaK,EAAW,mBAAoBL,CAAS,CAAC,EAC9F,GAAGC,EAEJ,WAACe,EAAA,CAAU,MAAAJ,EAAc,YAAAC,EAA0B,aAAAC,EAC/C,SAAAZ,EAACI,IAAU,CAAA,CACf,CAAA,CAAA,CAGZ,CAqBO,SAASW,EAAmC,CAC/C,MAAAL,EACA,YAAAC,EACA,aAAAC,EACA,UAAAd,EACA,GAAGC,CACP,EAAsB,CAClB,OACIC,EAACgB,EAAA,CACG,UAAWd,EAAmBJ,EAAWA,GAAaK,EAAW,mBAAoBL,CAAS,CAAC,EAC9F,GAAGC,EAEJ,WAACe,EAAA,CAAU,MAAAJ,EAAc,YAAAC,EAA0B,aAAAC,EAC/C,SAAAZ,EAACI,IAAU,CAAA,CACf,CAAA,CAAA,CAGZ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as e,jsxs as l,Fragment as u}from"react/jsx-runtime";import{useContext as c}from"react";import{DisclosureGroupStateContext as m,Disclosure as p,composeRenderProps as n,DisclosurePanel as d,DisclosureGroup as f}from"react-aria-components";import{Button as D}from"./button.js";import{classNames as i}from"../utilities/theme.js";import{IcDown as b}from"./icons.js";import"class-variance-authority";import"./loader.js";import"clsx";function y({children:r,className:o,...s}){let t=c(m)!==null;return e(p,{...s,className:n(o,(a,h)=>i("group",t&&"border-0 border-b last:border-b-0",a)),children:r})}function C({children:r,className:o,...s}){return e(D,{slot:"trigger",type:"button",variant:"ghost",className:i(o),...s,children:n(r,t=>l(u,{children:[e("span",{children:t}),e(b,{"aria-hidden":!0,className:i("transition-transform duration-200","group-data-[expanded]:rotate-180")})]}))})}function I({children:r,className:o,...s}){return e(d,{...s,className:"overflow-hidden body-sm transition-all",children:e("div",{className:i("pb-icon pt-2",o),children:r})})}function _({children:r,className:o,...s}){return e(f,{...s,className:n(o,(t,a)=>i("",t)),children:r})}export{y as Disclosure,_ as DisclosureGroup,C as DisclosureHeader,I as DisclosurePanel};
|
|
2
2
|
//# sourceMappingURL=disclosure.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"disclosure.js","sources":["../../lib/components/disclosure.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport {\n Disclosure as AriaDisclosure,\n DisclosureGroup as AriaDisclosureGroup,\n DisclosureGroupProps as AriaDisclosureGroupProps,\n DisclosurePanel as AriaDisclosurePanel,\n DisclosurePanelProps as AriaDisclosurePanelProps,\n DisclosureProps as AriaDisclosureProps,\n composeRenderProps,\n DisclosureGroupStateContext,\n} from 'react-aria-components';\n\nimport { Button } from '../components/button';\nimport { classNames } from '../utilities/theme';\nimport { IcDown } from './icons';\n\nexport interface DisclosureProps extends AriaDisclosureProps {\n children: React.ReactNode;\n}\n\nexport function Disclosure({ children, className, ...props }: DisclosureProps) {\n let isInGroup = useContext(DisclosureGroupStateContext) !== null;\n return (\n <AriaDisclosure\n {...props}\n className={composeRenderProps(className, (className, _) =>\n classNames('group', isInGroup && 'border-0 border-b last:border-b-0', className)\n )}\n >\n {children}\n </AriaDisclosure>\n );\n}\n\nexport function DisclosureHeader({ children, className, ...props }: React.ComponentProps<typeof Button>) {\n return (\n <Button
|
|
1
|
+
{"version":3,"file":"disclosure.js","sources":["../../lib/components/disclosure.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport {\n Disclosure as AriaDisclosure,\n DisclosureGroup as AriaDisclosureGroup,\n DisclosureGroupProps as AriaDisclosureGroupProps,\n DisclosurePanel as AriaDisclosurePanel,\n DisclosurePanelProps as AriaDisclosurePanelProps,\n DisclosureProps as AriaDisclosureProps,\n composeRenderProps,\n DisclosureGroupStateContext,\n} from 'react-aria-components';\n\nimport { Button } from '../components/button';\nimport { classNames } from '../utilities/theme';\nimport { IcDown } from './icons';\n\nexport interface DisclosureProps extends AriaDisclosureProps {\n children: React.ReactNode;\n}\n\nexport function Disclosure({ children, className, ...props }: DisclosureProps) {\n let isInGroup = useContext(DisclosureGroupStateContext) !== null;\n return (\n <AriaDisclosure\n {...props}\n className={composeRenderProps(className, (className, _) =>\n classNames('group', isInGroup && 'border-0 border-b last:border-b-0', className)\n )}\n >\n {children}\n </AriaDisclosure>\n );\n}\n\nexport function DisclosureHeader({ children, className, ...props }: React.ComponentProps<typeof Button>) {\n return (\n <Button slot=\"trigger\" type=\"button\" variant={'ghost'} className={classNames(className)} {...props}>\n {composeRenderProps(children, children => (\n <>\n <span>{children}</span>\n <IcDown\n aria-hidden\n className={classNames('transition-transform duration-200', 'group-data-[expanded]:rotate-180')}\n />\n </>\n ))}\n </Button>\n );\n}\n\nexport interface DisclosurePanelProps extends AriaDisclosurePanelProps {\n children: React.ReactNode;\n}\n\nexport function DisclosurePanel({ children, className, ...props }: DisclosurePanelProps) {\n return (\n <AriaDisclosurePanel {...props} className={'overflow-hidden body-sm transition-all'}>\n <div className={classNames('pb-icon pt-2', className)}>{children}</div>\n </AriaDisclosurePanel>\n );\n}\n\nexport interface DisclosureGroupProps extends AriaDisclosureGroupProps {\n children: React.ReactNode;\n}\n\nexport function DisclosureGroup({ children, className, ...props }: DisclosureGroupProps) {\n return (\n <AriaDisclosureGroup\n {...props}\n className={composeRenderProps(className, (className, _) => classNames('', className))}\n >\n {children}\n </AriaDisclosureGroup>\n );\n}\n"],"names":["Disclosure","children","className","props","isInGroup","useContext","DisclosureGroupStateContext","jsx","AriaDisclosure","composeRenderProps","_","classNames","DisclosureHeader","Button","jsxs","Fragment","IcDown","DisclosurePanel","AriaDisclosurePanel","DisclosureGroup","AriaDisclosureGroup"],"mappings":"ubAoBO,SAASA,EAAW,CAAE,SAAAC,EAAU,UAAAC,EAAW,GAAGC,GAA0B,CAC3E,IAAIC,EAAYC,EAAWC,CAA2B,IAAM,KAC5D,OACIC,EAACC,EAAA,CACI,GAAGL,EACJ,UAAWM,EAAmBP,EAAW,CAACA,EAAWQ,IACjDC,EAAW,QAASP,GAAa,oCAAqCF,CAAS,CAAA,EAGlF,SAAAD,CAAA,CAAA,CAGb,CAEO,SAASW,EAAiB,CAAE,SAAAX,EAAU,UAAAC,EAAW,GAAGC,GAA8C,CACrG,SACKU,EAAA,CAAO,KAAK,UAAU,KAAK,SAAS,QAAS,QAAS,UAAWF,EAAWT,CAAS,EAAI,GAAGC,EACxF,WAAmBF,EAAUA,GAC1Ba,EAAAC,EAAA,CACI,SAAA,CAAAR,EAAC,OAAA,CAAM,SAAAN,CAAAA,CAAS,EAChBM,EAACS,EAAA,CACG,cAAW,GACX,UAAWL,EAAW,oCAAqC,kCAAkC,CAAA,CAAA,CACjG,CAAA,CACJ,CACH,CAAA,CACL,CAER,CAMO,SAASM,EAAgB,CAAE,SAAAhB,EAAU,UAAAC,EAAW,GAAGC,GAA+B,CACrF,OACII,EAACW,EAAA,CAAqB,GAAGf,EAAO,UAAW,yCACvC,SAAAI,EAAC,MAAA,CAAI,UAAWI,EAAW,eAAgBT,CAAS,EAAI,SAAAD,EAAS,EACrE,CAER,CAMO,SAASkB,EAAgB,CAAE,SAAAlB,EAAU,UAAAC,EAAW,GAAGC,GAA+B,CACrF,OACII,EAACa,EAAA,CACI,GAAGjB,EACJ,UAAWM,EAAmBP,EAAW,CAACA,EAAWQ,IAAMC,EAAW,GAAIT,CAAS,CAAC,EAEnF,SAAAD,CAAA,CAAA,CAGb"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cryptlex/web-components",
|
|
3
|
-
"version": "6.6.6-
|
|
3
|
+
"version": "6.6.6-alpha11",
|
|
4
4
|
"description": "React component library for Cryptlex web applications",
|
|
5
5
|
"author": "Cryptlex",
|
|
6
6
|
"type": "module",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"*.{ts,tsx,css,scss,json}": "prettier --write"
|
|
46
46
|
},
|
|
47
47
|
"peerDependencies": {
|
|
48
|
-
"@cryptlex/web-api-types": "2.
|
|
48
|
+
"@cryptlex/web-api-types": "2.1.0",
|
|
49
49
|
"@dnd-kit/core": "6.3.1",
|
|
50
50
|
"@dnd-kit/sortable": "10.0.0",
|
|
51
51
|
"@dnd-kit/utilities": "3.2.2",
|