diff --git a/apps/docs/src/examples/rating-group.module.css b/apps/docs/src/examples/rating.module.css similarity index 63% rename from apps/docs/src/examples/rating-group.module.css rename to apps/docs/src/examples/rating.module.css index 30b84be41..ef021968f 100644 --- a/apps/docs/src/examples/rating-group.module.css +++ b/apps/docs/src/examples/rating.module.css @@ -1,47 +1,47 @@ -.rating-group { +.rating { display: flex; flex-direction: column; gap: 8px; } -.rating-group__label { +.rating__label { color: hsl(240 6% 10%); font-size: 14px; font-weight: 500; user-select: none; } -.rating-group__description { +.rating__description { color: hsl(240 5% 26%); font-size: 12px; user-select: none; } -.rating-group__error-message { +.rating__error-message { color: hsl(0 72% 51%); font-size: 12px; user-select: none; } -.rating-group__control { +.rating__control { display: flex; gap: 4px; } -.rating-group-item { +.rating-item { cursor: pointer; fill: hsl(240 6% 90%); } -.rating-group-item:focus { +.rating-item:focus { outline: none; } -[data-kb-theme="dark"] .rating-group-item { +[data-kb-theme="dark"] .rating-item { fill: hsl(240 5% 26%); } -.rating-group-item[data-highlighted] { +.rating-item[data-highlighted] { fill: hsl(200 98% 39%); } @@ -53,10 +53,10 @@ fill: hsl(240 5% 26%); } -[data-kb-theme="dark"] .rating-group__label { +[data-kb-theme="dark"] .rating__label { color: hsl(240 5% 84%); } -[data-kb-theme="dark"] .rating-group__description { +[data-kb-theme="dark"] .rating__description { color: hsl(240 5% 65%); } diff --git a/apps/docs/src/examples/rating-group.tsx b/apps/docs/src/examples/rating.tsx similarity index 51% rename from apps/docs/src/examples/rating-group.tsx rename to apps/docs/src/examples/rating.tsx index c7d7189c5..d02616539 100644 --- a/apps/docs/src/examples/rating-group.tsx +++ b/apps/docs/src/examples/rating.tsx @@ -1,44 +1,42 @@ import { Index, createSignal } from "solid-js"; -import { RatingGroup } from "../../../../packages/core/src/rating-group"; +import { Rating } from "../../../../packages/core/src/rating"; -import style from "./rating-group.module.css"; +import style from "./rating.module.css"; export function BasicExample() { return ( - - - Rate Us: - - + + Rate Us: + {(_) => ( - - + + - - + + )} - - + + ); } export function DefaultValueExample() { return ( - - + + {(_) => ( - - + + - - + + )} - - + + ); } @@ -47,23 +45,19 @@ export function ControlledExample() { return ( <> - - + + {(_) => ( - - + + - - + + )} - - + +

Your rating is: {value()}/5

); @@ -71,43 +65,41 @@ export function ControlledExample() { export function HalfRatingsExample() { return ( - - + + {(_) => ( - - + + {(state) => (state.half() ? : )} - - + + )} - - + + ); } export function DescriptionExample() { return ( - - - Rate Us: - - + + Rate Us: + {(_) => ( - - + + - - + + )} - - + + Rate your experience with us. - - + + ); } @@ -115,30 +107,28 @@ export function ErrorMessageExample() { const [value, setValue] = createSignal(0); return ( - - - Rate Us: - - + Rate Us: + {(_) => ( - - + + - - + + )} - - + + Please select a rating between 1 and 5. - - + + ); } @@ -160,20 +150,20 @@ export function HTMLFormExample() { onSubmit={onSubmit} class="flex flex-col items-center space-y-6" > - - + + {(_) => ( - - + + - - + + )} - - - + + +
@@ -340,9 +340,9 @@ function HTMLFormExample() { ## API Reference -### RatingGroup +### Rating -`RatingGroup` is equivalent to the `Root` import from `@kobalte/core/rating-group`. +`Rating` is equivalent to the `Root` import from `@kobalte/core/rating`. | Prop | Description | | :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------- | @@ -365,15 +365,15 @@ function HTMLFormExample() { | data-disabled | Present when the rating group is disabled. | | data-readonly | Present when the rating group is read only. | -`RatingGroup.Label`, `RatingGroup.Description` and `RatingGroup.ErrorMesssage` shares the same data-attributes. +`Rating.Label`, `Rating.Description` and `Rating.ErrorMesssage` shares the same data-attributes. -### RatingGroup.ErrorMessage +### Rating.ErrorMessage | Prop | Description | | :--------- | :-------------------------------------------------------------------------------------------------------------------------------------- | | forceMount | `boolean`
Used to force mounting when more control is needed. Useful when controlling animation with SolidJS animation libraries. | -### RatingGroup.ItemControl +### Rating.ItemControl | Render Prop | Description | | :---------- | :---------------------------------------------------------------- | @@ -391,22 +391,22 @@ function HTMLFormExample() { | data-half | Present when the rating is half. | | data-highlighted | Present when the rating is highlighted. | -`RatingGroup.ItemLabel` and `RatingGroup.ItemDescription` share the same data-attributes. +`Rating.ItemLabel` and `Rating.ItemDescription` share the same data-attributes. ## Rendered elements -| Component | Default rendered element | -| :---------------------------- | :----------------------- | -| `RatingGroup` | `div` | -| `RatingGroup.Control` | `div` | -| `RatingGroup.Label` | `span` | -| `RatingGroup.HiddenInput` | `input` | -| `RatingGroup.Description` | `div` | -| `RatingGroup.ErrorMessage` | `div` | -| `RatingGroup.Item` | `div` | -| `RatingGroup.ItemControl` | `div` | -| `RatingGroup.ItemLabel` | `label` | -| `RatingGroup.ItemDescription` | `div` | +| Component | Default rendered element | +| :----------------------- | :----------------------- | +| `Rating` | `div` | +| `Rating.Control` | `div` | +| `Rating.Label` | `span` | +| `Rating.HiddenInput` | `input` | +| `Rating.Description` | `div` | +| `Rating.ErrorMessage` | `div` | +| `Rating.Item` | `div` | +| `Rating.ItemControl` | `div` | +| `Rating.ItemLabel` | `label` | +| `Rating.ItemDescription` | `div` | ## Accessibility diff --git a/packages/core/dev/App.tsx b/packages/core/dev/App.tsx index 0d8c8d200..1b0b23866 100644 --- a/packages/core/dev/App.tsx +++ b/packages/core/dev/App.tsx @@ -1,6 +1,14 @@ +import { TimeField } from "../src/time-field"; + export default function App() { return ( <> + + Event time + + {segment => } + + ); } diff --git a/packages/core/dev/index.css b/packages/core/dev/index.css index e69de29bb..20104e698 100644 --- a/packages/core/dev/index.css +++ b/packages/core/dev/index.css @@ -0,0 +1,87 @@ +.time-field { + display: flex; + flex-direction: column; + gap: 4px; +} + +.time-field__label { + color: hsl(240 6% 10%); + font-size: 14px; + font-weight: 500; + user-select: none; +} + +.time-field__field { + display: flex; + padding: 4px 8px; + border-radius: 6px; + width: 150px; + white-space: nowrap; + forced-color-adjust: none; + background-color: #fff; + border: 1px solid hsl(240 6% 90%); + color: hsl(240 4% 16%); + font-size: 14px; +} + +.time-field__field:focus-within { + outline: 2px solid hsl(200 98% 39%); + outline-offset: -1px; +} + +.time-field__segment { + padding: 0 2px; + font-variant-numeric: tabular-nums; + text-align: end; +} + +.time-field__segment[data-placeholder] { + color: hsl(240 4% 46%); + font-style: italic; +} + +.time-field__segment:focus { + color: #fff !important; + background: hsl(200 98% 39%); + outline: none; + border-radius: 4px; +} + +.time-field__segment::selection { + background-color: transparent; +} + +.time-field__description { + color: hsl(240 5% 26%); + font-size: 12px; + user-select: none; +} + +.time-field__error-message { + color: hsl(0 72% 51%); + font-size: 12px; + user-select: none; +} + +[data-kb-theme="dark"] .time-field__label { + color: hsl(240 5% 84%); +} + +[data-kb-theme="dark"] .time-field__field { + background-color: hsl(240 4% 16%); + border: 1px solid hsl(240 5% 34%); + color: hsl(0 100% 100% / 0.9); +} + +.time-field__field[data-invalid] { + border-color: hsl(0 72% 51%); + outline-color: hsl(0 72% 51%); +} + +[data-kb-theme="dark"] .time-field__segment[data-placeholder] { + color: hsl(0 100% 100% / 0.5); +} + +[data-kb-theme="dark"] .time-field__description { + color: hsl(240 5% 65%); +} diff --git a/packages/core/package.json b/packages/core/package.json index ec9c128f7..c4558abeb 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -71,7 +71,6 @@ }, "dependencies": { "@floating-ui/dom": "^1.5.1", - "@internationalized/date": "^3.4.0", "@internationalized/number": "^3.2.1", "@kobalte/utils": "^0.9.1", "@solid-primitives/props": "^3.1.8", diff --git a/packages/core/src/breadcrumbs/breadcrumbs-separator.tsx b/packages/core/src/breadcrumbs/breadcrumbs-separator.tsx index d9326061f..536e71161 100644 --- a/packages/core/src/breadcrumbs/breadcrumbs-separator.tsx +++ b/packages/core/src/breadcrumbs/breadcrumbs-separator.tsx @@ -40,7 +40,7 @@ export function BreadcrumbsSeparator( aria-hidden="true" {...(props as BreadcrumbsSeparatorProps)} > - {context.separator()} + {props.children ?? context.separator()} ); } diff --git a/packages/core/src/i18n/create-date-formatter.ts b/packages/core/src/i18n/create-date-formatter.ts index 4d178ac93..6c3aab422 100644 --- a/packages/core/src/i18n/create-date-formatter.ts +++ b/packages/core/src/i18n/create-date-formatter.ts @@ -6,25 +6,20 @@ * https://github.com/adobe/react-spectrum/blob/15e101b74966bd5eb719c6529ce71ce57eaed430/packages/@react-aria/i18n/src/useDateFormatter.ts */ -import { DateFormatter } from "@internationalized/date"; import { type MaybeAccessor, access } from "@kobalte/utils"; import { type Accessor, createMemo } from "solid-js"; import { useLocale } from "./i18n-provider"; -export interface DateFormatterOptions extends Intl.DateTimeFormatOptions { - calendar?: string; -} - /** * Provides localized date formatting for the current locale. Automatically updates when the locale changes, * and handles caching of the date formatter for performance. * @param options - Formatting options. */ export function createDateFormatter( - options: MaybeAccessor, -): Accessor { + options: MaybeAccessor, +): Accessor { const { locale } = useLocale(); - return createMemo(() => new DateFormatter(locale(), access(options))); + return createMemo(() => new Intl.DateTimeFormat(locale(), access(options))); } diff --git a/packages/core/src/index.tsx b/packages/core/src/index.tsx index 3a6de86ae..4a72a633e 100644 --- a/packages/core/src/index.tsx +++ b/packages/core/src/index.tsx @@ -33,7 +33,6 @@ export * as Pagination from "./pagination"; export * as Popover from "./popover"; export * as Progress from "./progress"; export * as RadioGroup from "./radio-group"; -export * as RatingGroup from "./rating-group"; export * as Select from "./select"; export * as Separator from "./separator"; export * as Skeleton from "./skeleton"; @@ -41,7 +40,6 @@ export * as Slider from "./slider"; export * as Switch from "./switch"; export * as Tabs from "./tabs"; export * as TextField from "./text-field"; -export * as TimeField from "./time-field"; export * as Toast from "./toast"; export * as ToggleButton from "./toggle-button"; export * as ToggleGroup from "./toggle-group"; diff --git a/packages/core/src/pagination/pagination-items.tsx b/packages/core/src/pagination/pagination-items.tsx index 63475358b..09c3a4279 100644 --- a/packages/core/src/pagination/pagination-items.tsx +++ b/packages/core/src/pagination/pagination-items.tsx @@ -24,8 +24,11 @@ export function PaginationItems(props: PaginationItemsProps) { const _showFirst = showFirst() && page() - 1 > siblingCount(); const _showLast = showLast() && count() - page() > siblingCount(); - let showFirstEllipsis = page() - (showFirst() ? 2 : 1) > siblingCount(); + let showFirstEllipsis = + fixedItems() !== "no-ellipsis" && + page() - (showFirst() ? 2 : 1) > siblingCount(); let showLastEllipsis = + fixedItems() !== "no-ellipsis" && count() - page() - (showLast() ? 1 : 0) > siblingCount(); let previousSiblingCount = Math.min(page() - 1, siblingCount()); @@ -40,23 +43,24 @@ export function PaginationItems(props: PaginationItemsProps) { previousSiblingCount += Math.max(siblingCount() - nextSiblingCountRef, 0); nextSiblingCount += Math.max(siblingCount() - previousSiblingCountRef, 0); - if (!_showFirst) nextSiblingCount++; - if (!_showLast) previousSiblingCount++; + if (showFirst() && !_showFirst) nextSiblingCount++; + if (showLast() && !_showLast) previousSiblingCount++; // Check specifically if true and not "no-ellipsis" if (fixedItems() === true) { if (!showFirstEllipsis) nextSiblingCount++; if (!showLastEllipsis) previousSiblingCount++; - } - //replace ellipsis if it would replace only one item - if (page() - previousSiblingCount - (showFirst() ? 2 : 1) === 1) { - showFirstEllipsis = false; - previousSiblingCount++; - } - if (count() - page() - nextSiblingCount - (showLast() ? 1 : 0) === 1) { - showLastEllipsis = false; - nextSiblingCount++; + //replace ellipsis if it would replace only one item + if (page() - previousSiblingCount - (showFirst() ? 2 : 1) === 1) { + showFirstEllipsis = false; + previousSiblingCount++; + } + + if (count() - page() - nextSiblingCount - (showLast() ? 1 : 0) === 1) { + showLastEllipsis = false; + nextSiblingCount++; + } } } diff --git a/packages/core/src/primitives/create-collection/create-collection.ts b/packages/core/src/primitives/create-collection/create-collection.ts index b64bf3caa..10cb3f49d 100644 --- a/packages/core/src/primitives/create-collection/create-collection.ts +++ b/packages/core/src/primitives/create-collection/create-collection.ts @@ -7,13 +7,7 @@ */ import { access } from "@kobalte/utils"; -import { - type Accessor, - createEffect, - createMemo, - createSignal, - on, -} from "solid-js"; +import { type Accessor, createMemo } from "solid-js"; import type { Collection, CollectionBase, CollectionNode } from "./types"; import { buildNodes } from "./utils"; diff --git a/packages/core/src/rating-group/index.tsx b/packages/core/src/rating-group/index.tsx deleted file mode 100644 index 35c1cfb26..000000000 --- a/packages/core/src/rating-group/index.tsx +++ /dev/null @@ -1,131 +0,0 @@ -import { - FormControlDescription as Description, - FormControlErrorMessage as ErrorMessage, - type FormControlDescriptionCommonProps as RatingGroupDescriptionCommonProps, - type FormControlDescriptionOptions as RatingGroupDescriptionOptions, - type FormControlDescriptionProps as RatingGroupDescriptionProps, - type FormControlDescriptionRenderProps as RatingGroupDescriptionRenderProps, - type FormControlErrorMessageCommonProps as RatingGroupErrorMessageCommonProps, - type FormControlErrorMessageOptions as RatingGroupErrorMessageOptions, - type FormControlErrorMessageProps as RatingGroupErrorMessageProps, - type FormControlErrorMessageRenderProps as RatingGroupErrorMessageRenderProps, -} from "../form-control"; - -import { - RatingGroupControl as Control, - type RatingGroupControlCommonProps, - type RatingGroupControlOptions, - type RatingGroupControlProps, - type RatingGroupControlRenderProps, -} from "./rating-group-control"; -import { - RatingGroupHiddenInput as HiddenInput, - type RatingGroupHiddenInputProps, -} from "./rating-group-hidden-input"; -import { - RatingGroupItem as Item, - type RatingGroupItemCommonProps, - type RatingGroupItemOptions, - type RatingGroupItemProps, - type RatingGroupItemRenderProps, -} from "./rating-group-item"; -import { - RatingGroupItemControl as ItemControl, - type RatingGroupItemControlCommonProps, - type RatingGroupItemControlOptions, - type RatingGroupItemControlProps, - type RatingGroupItemControlRenderProps, -} from "./rating-group-item-control"; -import { - RatingGroupItemDescription as ItemDescription, - type RatingGroupItemDescriptionCommonProps, - type RatingGroupItemDescriptionOptions, - type RatingGroupItemDescriptionProps, - type RatingGroupItemDescriptionRenderProps, -} from "./rating-group-item-description"; -import { - RatingGroupItemLabel as ItemLabel, - type RatingGroupItemLabelCommonProps, - type RatingGroupItemLabelOptions, - type RatingGroupItemLabelProps, - type RatingGroupItemLabelRenderProps, -} from "./rating-group-item-label"; -import { - RatingGroupLabel as Label, - type RatingGroupLabelCommonProps, - type RatingGroupLabelOptions, - type RatingGroupLabelProps, - type RatingGroupLabelRenderProps, -} from "./rating-group-label"; -import { - type RatingGroupRootCommonProps, - type RatingGroupRootOptions, - type RatingGroupRootProps, - type RatingGroupRootRenderProps, - RatingGroupRoot as Root, -} from "./rating-group-root"; - -export type { - RatingGroupControlCommonProps, - RatingGroupControlOptions, - RatingGroupControlProps, - RatingGroupControlRenderProps, - RatingGroupDescriptionOptions, - RatingGroupDescriptionCommonProps, - RatingGroupDescriptionRenderProps, - RatingGroupDescriptionProps, - RatingGroupErrorMessageOptions, - RatingGroupErrorMessageCommonProps, - RatingGroupErrorMessageRenderProps, - RatingGroupErrorMessageProps, - RatingGroupHiddenInputProps, - RatingGroupItemControlOptions, - RatingGroupItemControlCommonProps, - RatingGroupItemControlRenderProps, - RatingGroupItemControlProps, - RatingGroupItemDescriptionOptions, - RatingGroupItemDescriptionCommonProps, - RatingGroupItemDescriptionRenderProps, - RatingGroupItemDescriptionProps, - RatingGroupItemLabelOptions, - RatingGroupItemLabelCommonProps, - RatingGroupItemLabelRenderProps, - RatingGroupItemLabelProps, - RatingGroupItemOptions, - RatingGroupItemCommonProps, - RatingGroupItemRenderProps, - RatingGroupItemProps, - RatingGroupLabelOptions, - RatingGroupLabelCommonProps, - RatingGroupLabelRenderProps, - RatingGroupLabelProps, - RatingGroupRootOptions, - RatingGroupRootCommonProps, - RatingGroupRootRenderProps, - RatingGroupRootProps, -}; - -export { - Description, - ErrorMessage, - Control, - HiddenInput, - ItemControl, - ItemDescription, - ItemLabel, - Item, - Label, - Root, -}; - -export const RatingGroup = Object.assign(Root, { - Description, - ErrorMessage, - Control, - HiddenInput, - ItemControl, - ItemDescription, - ItemLabel, - Item, - Label, -}); diff --git a/packages/core/src/rating-group/rating-group-item-description.tsx b/packages/core/src/rating-group/rating-group-item-description.tsx deleted file mode 100644 index c94dca90a..000000000 --- a/packages/core/src/rating-group/rating-group-item-description.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { mergeDefaultProps } from "@kobalte/utils"; -import { type ValidComponent, createEffect, onCleanup } from "solid-js"; - -import { - type ElementOf, - Polymorphic, - type PolymorphicProps, -} from "../polymorphic"; -import { - type RatingGroupItemDataSet, - useRatingGroupItemContext, -} from "./rating-group-item-context"; - -export interface RatingGroupItemDescriptionOptions {} - -export interface RatingGroupItemDescriptionCommonProps< - T extends HTMLElement = HTMLElement, -> { - id: string; -} - -export interface RatingGroupItemDescriptionRenderProps - extends RatingGroupItemDescriptionCommonProps, - RatingGroupItemDataSet {} - -export type RatingGroupItemDescriptionProps< - T extends ValidComponent | HTMLElement = HTMLElement, -> = RatingGroupItemDescriptionOptions & - Partial>>; - -export function RatingGroupItemDescription( - props: PolymorphicProps>, -) { - const context = useRatingGroupItemContext(); - - const mergedProps = mergeDefaultProps( - { - id: context.generateId("description"), - }, - props as RatingGroupItemDescriptionProps, - ); - - createEffect(() => onCleanup(context.registerDescription(mergedProps.id))); - - return ( - - as="div" - {...context.dataset()} - {...mergedProps} - /> - ); -} diff --git a/packages/core/src/rating-group/rating-group-label.tsx b/packages/core/src/rating-group/rating-group-label.tsx deleted file mode 100644 index dd9ae7884..000000000 --- a/packages/core/src/rating-group/rating-group-label.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import type { Component, ValidComponent } from "solid-js"; - -import { FormControlLabel } from "../form-control"; -import type { ElementOf, PolymorphicProps } from "../polymorphic"; - -export interface RatingGroupLabelOptions {} - -export interface RatingGroupLabelCommonProps< - T extends HTMLElement = HTMLElement, -> {} - -export interface RatingGroupLabelRenderProps - extends RatingGroupLabelCommonProps {} - -export type RatingGroupLabelProps< - T extends ValidComponent | HTMLElement = HTMLElement, -> = RatingGroupLabelOptions & - Partial>>; - -export function RatingGroupLabel( - props: PolymorphicProps>, -) { - return ( - > - as="span" - {...(props as RatingGroupLabelProps)} - /> - ); -} diff --git a/packages/core/src/rating/index.tsx b/packages/core/src/rating/index.tsx new file mode 100644 index 000000000..ad8188085 --- /dev/null +++ b/packages/core/src/rating/index.tsx @@ -0,0 +1,131 @@ +import { + FormControlDescription as Description, + FormControlErrorMessage as ErrorMessage, + type FormControlDescriptionCommonProps as RatingDescriptionCommonProps, + type FormControlDescriptionOptions as RatingDescriptionOptions, + type FormControlDescriptionProps as RatingDescriptionProps, + type FormControlDescriptionRenderProps as RatingDescriptionRenderProps, + type FormControlErrorMessageCommonProps as RatingErrorMessageCommonProps, + type FormControlErrorMessageOptions as RatingErrorMessageOptions, + type FormControlErrorMessageProps as RatingErrorMessageProps, + type FormControlErrorMessageRenderProps as RatingErrorMessageRenderProps, +} from "../form-control"; + +import { + RatingControl as Control, + type RatingControlCommonProps, + type RatingControlOptions, + type RatingControlProps, + type RatingControlRenderProps, +} from "./rating-control"; +import { + RatingHiddenInput as HiddenInput, + type RatingHiddenInputProps, +} from "./rating-hidden-input"; +import { + RatingItem as Item, + type RatingItemCommonProps, + type RatingItemOptions, + type RatingItemProps, + type RatingItemRenderProps, +} from "./rating-item"; +import { + RatingItemControl as ItemControl, + type RatingItemControlCommonProps, + type RatingItemControlOptions, + type RatingItemControlProps, + type RatingItemControlRenderProps, +} from "./rating-item-control"; +import { + RatingItemDescription as ItemDescription, + type RatingItemDescriptionCommonProps, + type RatingItemDescriptionOptions, + type RatingItemDescriptionProps, + type RatingItemDescriptionRenderProps, +} from "./rating-item-description"; +import { + RatingItemLabel as ItemLabel, + type RatingItemLabelCommonProps, + type RatingItemLabelOptions, + type RatingItemLabelProps, + type RatingItemLabelRenderProps, +} from "./rating-item-label"; +import { + RatingLabel as Label, + type RatingLabelCommonProps, + type RatingLabelOptions, + type RatingLabelProps, + type RatingLabelRenderProps, +} from "./rating-label"; +import { + type RatingRootCommonProps, + type RatingRootOptions, + type RatingRootProps, + type RatingRootRenderProps, + RatingRoot as Root, +} from "./rating-root"; + +export type { + RatingControlCommonProps, + RatingControlOptions, + RatingControlProps, + RatingControlRenderProps, + RatingDescriptionOptions, + RatingDescriptionCommonProps, + RatingDescriptionRenderProps, + RatingDescriptionProps, + RatingErrorMessageOptions, + RatingErrorMessageCommonProps, + RatingErrorMessageRenderProps, + RatingErrorMessageProps, + RatingHiddenInputProps, + RatingItemControlOptions, + RatingItemControlCommonProps, + RatingItemControlRenderProps, + RatingItemControlProps, + RatingItemDescriptionOptions, + RatingItemDescriptionCommonProps, + RatingItemDescriptionRenderProps, + RatingItemDescriptionProps, + RatingItemLabelOptions, + RatingItemLabelCommonProps, + RatingItemLabelRenderProps, + RatingItemLabelProps, + RatingItemOptions, + RatingItemCommonProps, + RatingItemRenderProps, + RatingItemProps, + RatingLabelOptions, + RatingLabelCommonProps, + RatingLabelRenderProps, + RatingLabelProps, + RatingRootOptions, + RatingRootCommonProps, + RatingRootRenderProps, + RatingRootProps, +}; + +export { + Description, + ErrorMessage, + Control, + HiddenInput, + ItemControl, + ItemDescription, + ItemLabel, + Item, + Label, + Root, +}; + +export const Rating = Object.assign(Root, { + Description, + ErrorMessage, + Control, + HiddenInput, + ItemControl, + ItemDescription, + ItemLabel, + Item, + Label, +}); diff --git a/packages/core/src/rating-group/rating-group-context.tsx b/packages/core/src/rating/rating-context.tsx similarity index 69% rename from packages/core/src/rating-group/rating-group-context.tsx rename to packages/core/src/rating/rating-context.tsx index 5ecdd19fc..b55119177 100644 --- a/packages/core/src/rating-group/rating-group-context.tsx +++ b/packages/core/src/rating/rating-context.tsx @@ -7,7 +7,7 @@ import { } from "solid-js"; import type { CollectionItemWithRef } from "../primitives"; -export interface RatingGroupContextValue { +export interface RatingContextValue { value: Accessor; setValue: (value: number) => void; allowHalf: Accessor; @@ -20,14 +20,14 @@ export interface RatingGroupContextValue { setItems: Setter; } -export const RatingGroupContext = createContext(); +export const RatingContext = createContext(); -export function useRatingGroupContext() { - const context = useContext(RatingGroupContext); +export function useRatingContext() { + const context = useContext(RatingContext); if (context === undefined) { throw new Error( - "[kobalte]: `useRatingGroupContext` must be used within a `RatingGroup` component", + "[kobalte]: `useRatingContext` must be used within a `Rating` component", ); } diff --git a/packages/core/src/rating-group/rating-group-control.tsx b/packages/core/src/rating/rating-control.tsx similarity index 62% rename from packages/core/src/rating-group/rating-group-control.tsx rename to packages/core/src/rating/rating-control.tsx index fe1f097ef..b01690c42 100644 --- a/packages/core/src/rating-group/rating-group-control.tsx +++ b/packages/core/src/rating/rating-control.tsx @@ -6,32 +6,28 @@ import { Polymorphic, type PolymorphicProps, } from "../polymorphic"; -import { useRatingGroupContext } from "./rating-group-context"; +import { useRatingContext } from "./rating-context"; -export interface RatingGroupControlOptions {} +export interface RatingControlOptions {} -export interface RatingGroupControlCommonProps< - T extends HTMLElement = HTMLElement, -> { +export interface RatingControlCommonProps { id: string; onPointerLeave: JSX.EventHandlerUnion; } -export interface RatingGroupControlRenderProps - extends RatingGroupControlCommonProps { +export interface RatingControlRenderProps extends RatingControlCommonProps { role: "presentation"; } -export type RatingGroupControlProps< +export type RatingControlProps< T extends ValidComponent | HTMLElement = HTMLElement, -> = RatingGroupControlOptions & - Partial>>; +> = RatingControlOptions & Partial>>; -export function RatingGroupControl( - props: PolymorphicProps>, +export function RatingControl( + props: PolymorphicProps>, ) { const formControlContext = useFormControlContext(); - const context = useRatingGroupContext(); + const context = useRatingContext(); const defaultId = `${formControlContext.generateId("control")}`; @@ -39,7 +35,7 @@ export function RatingGroupControl( { id: defaultId, }, - props as RatingGroupControlProps, + props as RatingControlProps, ); const [local, others] = splitProps(mergedProps, ["onPointerLeave"]); @@ -60,7 +56,7 @@ export function RatingGroupControl( }; return ( - + as="div" role="presentation" onPointerLeave={onPointerLeave} diff --git a/packages/core/src/rating-group/rating-group-hidden-input.tsx b/packages/core/src/rating/rating-hidden-input.tsx similarity index 66% rename from packages/core/src/rating-group/rating-group-hidden-input.tsx rename to packages/core/src/rating/rating-hidden-input.tsx index 8e1aacce3..488e8a653 100644 --- a/packages/core/src/rating-group/rating-group-hidden-input.tsx +++ b/packages/core/src/rating/rating-hidden-input.tsx @@ -2,13 +2,13 @@ import { visuallyHiddenStyles } from "@kobalte/utils"; import type { ComponentProps } from "solid-js"; import { useFormControlContext } from "../form-control"; -import { useRatingGroupContext } from "./rating-group-context"; +import { useRatingContext } from "./rating-context"; -export interface RatingGroupHiddenInputProps extends ComponentProps<"input"> {} +export interface RatingHiddenInputProps extends ComponentProps<"input"> {} -export function RatingGroupHiddenInput(props: RatingGroupHiddenInputProps) { +export function RatingHiddenInput(props: RatingHiddenInputProps) { const formControlContext = useFormControlContext(); - const context = useRatingGroupContext(); + const context = useRatingContext(); return ( ; highlighted: Accessor; } -export interface RatingGroupItemContextValue { - state: RatingGroupItemState; - dataset: Accessor; +export interface RatingItemContextValue { + state: RatingItemState; + dataset: Accessor; itemId: Accessor; generateId: (part: string) => string; registerLabel: (id: string) => () => void; registerDescription: (id: string) => () => void; } -export const RatingGroupItemContext = - createContext(); +export const RatingItemContext = createContext(); -export function useRatingGroupItemContext() { - const context = useContext(RatingGroupItemContext); +export function useRatingItemContext() { + const context = useContext(RatingItemContext); if (context === undefined) { throw new Error( - "[kobalte]: `useRatingGroupItemContext` must be used within a `RatingGroup.Item` component", + "[kobalte]: `useRatingItemContext` must be used within a `Rating.Item` component", ); } diff --git a/packages/core/src/rating-group/rating-group-item-control.tsx b/packages/core/src/rating/rating-item-control.tsx similarity index 52% rename from packages/core/src/rating-group/rating-group-item-control.tsx rename to packages/core/src/rating/rating-item-control.tsx index 0ae65545d..b3ffbbdd3 100644 --- a/packages/core/src/rating-group/rating-group-item-control.tsx +++ b/packages/core/src/rating/rating-item-control.tsx @@ -7,39 +7,39 @@ import { type PolymorphicProps, } from "../polymorphic"; import { - type RatingGroupItemState, - useRatingGroupItemContext, -} from "./rating-group-item-context"; + type RatingItemState, + useRatingItemContext, +} from "./rating-item-context"; -export interface RatingGroupItemControlOptions { +export interface RatingItemControlOptions { /** * The children of the rating group item. * Can be a `JSX.Element` or a _render prop_ for having access to the internal state. */ - children?: JSX.Element | ((state: RatingGroupItemState) => JSX.Element); + children?: JSX.Element | ((state: RatingItemState) => JSX.Element); } -export interface RatingGroupItemControlCommonProps< +export interface RatingItemControlCommonProps< T extends HTMLElement = HTMLElement, > { id: string; } -export interface RatingGroupItemControlRenderProps - extends RatingGroupItemControlCommonProps { +export interface RatingItemControlRenderProps + extends RatingItemControlCommonProps { role: "presentation"; children: JSX.Element; } -export type RatingGroupItemControlProps< +export type RatingItemControlProps< T extends ValidComponent | HTMLElement = HTMLElement, -> = RatingGroupItemControlOptions & - Partial>>; +> = RatingItemControlOptions & + Partial>>; -export function RatingGroupItemControl( - props: PolymorphicProps>, +export function RatingItemControl( + props: PolymorphicProps>, ) { - const context = useRatingGroupItemContext(); + const context = useRatingItemContext(); const defaultId = `${context.generateId("control")}`; @@ -47,35 +47,35 @@ export function RatingGroupItemControl( { id: defaultId, }, - props as RatingGroupItemControlProps, + props as RatingItemControlProps, ); const [local, others] = splitProps(mergedProps, ["children"]); return ( - + as="div" role="presentation" {...others} > - {local.children} - + ); } -interface RatingGroupItemControlChildProps - extends Pick { - state: RatingGroupItemState; +interface RatingItemControlChildProps + extends Pick { + state: RatingItemState; } -function RatingGroupItemControlChild(props: RatingGroupItemControlChildProps) { +function RatingItemControlChild(props: RatingItemControlChildProps) { const resolvedChildren = children(() => { const body = props.children; return isFunction(body) ? body(props.state) : body; diff --git a/packages/core/src/rating/rating-item-description.tsx b/packages/core/src/rating/rating-item-description.tsx new file mode 100644 index 000000000..a12ec4420 --- /dev/null +++ b/packages/core/src/rating/rating-item-description.tsx @@ -0,0 +1,52 @@ +import { mergeDefaultProps } from "@kobalte/utils"; +import { type ValidComponent, createEffect, onCleanup } from "solid-js"; + +import { + type ElementOf, + Polymorphic, + type PolymorphicProps, +} from "../polymorphic"; +import { + type RatingItemDataSet, + useRatingItemContext, +} from "./rating-item-context"; + +export interface RatingItemDescriptionOptions {} + +export interface RatingItemDescriptionCommonProps< + T extends HTMLElement = HTMLElement, +> { + id: string; +} + +export interface RatingItemDescriptionRenderProps + extends RatingItemDescriptionCommonProps, + RatingItemDataSet {} + +export type RatingItemDescriptionProps< + T extends ValidComponent | HTMLElement = HTMLElement, +> = RatingItemDescriptionOptions & + Partial>>; + +export function RatingItemDescription( + props: PolymorphicProps>, +) { + const context = useRatingItemContext(); + + const mergedProps = mergeDefaultProps( + { + id: context.generateId("description"), + }, + props as RatingItemDescriptionProps, + ); + + createEffect(() => onCleanup(context.registerDescription(mergedProps.id))); + + return ( + + as="div" + {...context.dataset()} + {...mergedProps} + /> + ); +} diff --git a/packages/core/src/rating-group/rating-group-item-label.tsx b/packages/core/src/rating/rating-item-label.tsx similarity index 55% rename from packages/core/src/rating-group/rating-group-item-label.tsx rename to packages/core/src/rating/rating-item-label.tsx index bb5c19210..a8c36d0f8 100644 --- a/packages/core/src/rating-group/rating-group-item-label.tsx +++ b/packages/core/src/rating/rating-item-label.tsx @@ -13,40 +13,39 @@ import { type PolymorphicProps, } from "../polymorphic"; import { - type RatingGroupItemDataSet, - useRatingGroupItemContext, -} from "./rating-group-item-context"; + type RatingItemDataSet, + useRatingItemContext, +} from "./rating-item-context"; -export interface RatingGroupItemLabelOptions {} +export interface RatingItemLabelOptions {} -export interface RatingGroupItemLabelCommonProps< +export interface RatingItemLabelCommonProps< T extends HTMLElement = HTMLElement, > { id: string; style: JSX.CSSProperties | string; } -export interface RatingGroupItemLabelRenderProps - extends RatingGroupItemLabelCommonProps, - RatingGroupItemDataSet { +export interface RatingItemLabelRenderProps + extends RatingItemLabelCommonProps, + RatingItemDataSet { for: string | undefined; } -export type RatingGroupItemLabelProps< +export type RatingItemLabelProps< T extends ValidComponent | HTMLElement = HTMLElement, -> = RatingGroupItemLabelOptions & - Partial>>; +> = RatingItemLabelOptions & Partial>>; -export function RatingGroupItemLabel( - props: PolymorphicProps>, +export function RatingItemLabel( + props: PolymorphicProps>, ) { - const context = useRatingGroupItemContext(); + const context = useRatingItemContext(); const mergedProps = mergeDefaultProps( { id: context.generateId("label"), }, - props as RatingGroupItemLabelProps, + props as RatingItemLabelProps, ); const [local, others] = splitProps(mergedProps, ["style"]); @@ -54,7 +53,7 @@ export function RatingGroupItemLabel( createEffect(() => onCleanup(context.registerLabel(others.id!))); return ( - + as="label" for={context.itemId()} style={combineStyle(visuallyHiddenStyles, local.style)} diff --git a/packages/core/src/rating-group/rating-group-item.tsx b/packages/core/src/rating/rating-item.tsx similarity index 70% rename from packages/core/src/rating-group/rating-group-item.tsx rename to packages/core/src/rating/rating-item.tsx index 945e85933..bbd04993f 100644 --- a/packages/core/src/rating-group/rating-group-item.tsx +++ b/packages/core/src/rating/rating-item.tsx @@ -25,19 +25,17 @@ import { } from "../polymorphic"; import { type CollectionItemWithRef, createRegisterId } from "../primitives"; import { createDomCollectionItem } from "../primitives/create-dom-collection"; -import { useRatingGroupContext } from "./rating-group-context"; +import { useRatingContext } from "./rating-context"; import { - RatingGroupItemContext, - type RatingGroupItemContextValue, - type RatingGroupItemDataSet, -} from "./rating-group-item-context"; + RatingItemContext, + type RatingItemContextValue, + type RatingItemDataSet, +} from "./rating-item-context"; import { getEventPoint, getRelativePoint } from "./utils"; -export interface RatingGroupItemOptions {} +export interface RatingItemOptions {} -export interface RatingGroupItemCommonProps< - T extends HTMLElement = HTMLElement, -> { +export interface RatingItemCommonProps { id: string; ref: T | ((el: T) => void); "aria-labelledby": string | undefined; @@ -48,9 +46,9 @@ export interface RatingGroupItemCommonProps< onPointerMove: JSX.EventHandlerUnion; } -export interface RatingGroupItemRenderProps - extends RatingGroupItemCommonProps, - RatingGroupItemDataSet { +export interface RatingItemRenderProps + extends RatingItemCommonProps, + RatingItemDataSet { role: "radio"; tabIndex: number | undefined; "aria-required": boolean | undefined; @@ -59,17 +57,17 @@ export interface RatingGroupItemRenderProps "aria-checked": boolean; } -export type RatingGroupItemProps< +export type RatingItemProps< T extends ValidComponent | HTMLElement = HTMLElement, -> = RatingGroupItemOptions & Partial>>; +> = RatingItemOptions & Partial>>; -export function RatingGroupItem( - props: PolymorphicProps>, +export function RatingItem( + props: PolymorphicProps>, ) { let ref: HTMLElement | undefined; const formControlContext = useFormControlContext(); - const ratingGroupContext = useRatingGroupContext(); + const RatingContext = useRatingContext(); const defaultId = `${formControlContext.generateId("item")}-${createUniqueId()}`; @@ -77,7 +75,7 @@ export function RatingGroupItem( { id: defaultId, }, - props as RatingGroupItemProps, + props as RatingItemProps, ); const [local, others] = splitProps(mergedProps, [ @@ -118,7 +116,7 @@ export function RatingGroupItem( [ local["aria-describedby"], descriptionId(), - ratingGroupContext.ariaDescribedBy(), + RatingContext.ariaDescribedBy(), ] .filter(Boolean) .join(" ") || undefined @@ -132,12 +130,12 @@ export function RatingGroupItem( const [descriptionId, setDescriptionId] = createSignal(); const index = () => - ref ? ratingGroupContext.items().findIndex((v) => v.ref() === ref) : -1; + ref ? RatingContext.items().findIndex((v) => v.ref() === ref) : -1; const [value, setValue] = createSignal(); const newValue = () => - ratingGroupContext.isHovering() - ? ratingGroupContext.hoveredValue()! - : ratingGroupContext.value()!; + RatingContext.isHovering() + ? RatingContext.hoveredValue()! + : RatingContext.value()!; const equal = () => Math.ceil(newValue()!) === value(); const highlighted = () => value()! <= newValue()! || equal(); const half = () => equal() && Math.abs(newValue()! - value()!) === 0.5; @@ -146,7 +144,7 @@ export function RatingGroupItem( setValue( direction() === "ltr" ? index() + 1 - : ratingGroupContext.items().length - index(), + : RatingContext.items().length - index(), ); }); @@ -157,25 +155,22 @@ export function RatingGroupItem( }; const focusItem = (index: number) => - ( - ratingGroupContext.items()[Math.round(index)].ref() as HTMLElement - ).focus(); + (RatingContext.items()[Math.round(index)].ref() as HTMLElement).focus(); const setPrevValue = () => { - const factor = ratingGroupContext.allowHalf() ? 0.5 : 1; - const value = Math.max(0, ratingGroupContext.value()! - factor); - ratingGroupContext.setValue(value); + const factor = RatingContext.allowHalf() ? 0.5 : 1; + const value = Math.max(0, RatingContext.value()! - factor); + RatingContext.setValue(value); focusItem(Math.max(value - 1, 0)); }; const setNextValue = () => { - const factor = ratingGroupContext.allowHalf() ? 0.5 : 1; + const factor = RatingContext.allowHalf() ? 0.5 : 1; const value = Math.min( - ratingGroupContext.items().length, - (ratingGroupContext.value() === -1 ? 0 : ratingGroupContext.value())! + - factor, + RatingContext.items().length, + (RatingContext.value() === -1 ? 0 : RatingContext.value())! + factor, ); - ratingGroupContext.setValue(value); + RatingContext.setValue(value); focusItem(value - 1); }; @@ -183,11 +178,11 @@ export function RatingGroupItem( callHandler(e, local.onClick); const value = - ratingGroupContext.hoveredValue() === -1 + RatingContext.hoveredValue() === -1 ? index() + 1 - : ratingGroupContext.hoveredValue(); - ratingGroupContext.setValue(value); - ratingGroupContext.setHoveredValue(-1); + : RatingContext.hoveredValue(); + RatingContext.setValue(value); + RatingContext.setHoveredValue(-1); focusItem(value - 1); }; @@ -199,13 +194,13 @@ export function RatingGroupItem( const point = getEventPoint(e); const relativePoint = getRelativePoint(point, e.currentTarget); const percentX = relativePoint.getPercentValue({ - orientation: ratingGroupContext.orientation(), + orientation: RatingContext.orientation(), dir: direction(), }); const isMidway = percentX < 0.5; - const half = ratingGroupContext.allowHalf() && isMidway; + const half = RatingContext.allowHalf() && isMidway; const factor = half ? 0.5 : 0; - ratingGroupContext.setHoveredValue(value()! - factor); + RatingContext.setHoveredValue(value()! - factor); }; const onKeyDown: JSX.EventHandlerUnion = (e) => { @@ -232,27 +227,27 @@ export function RatingGroupItem( break; case EventKey.Space: e.preventDefault(); - ratingGroupContext.setValue(newValue()!); + RatingContext.setValue(newValue()!); break; case EventKey.Home: e.preventDefault(); - ratingGroupContext.setValue(1); + RatingContext.setValue(1); break; case EventKey.End: e.preventDefault(); - ratingGroupContext.setValue(ratingGroupContext.items().length); + RatingContext.setValue(RatingContext.items().length); break; } }; - const dataset: Accessor = createMemo(() => ({ + const dataset: Accessor = createMemo(() => ({ ...formControlContext.dataset(), "data-checked": equal() ? "" : undefined, "data-half": half() ? "" : undefined, "data-highlighted": highlighted() ? "" : undefined, })); - const context: RatingGroupItemContextValue = { + const context: RatingItemContextValue = { state: { highlighted, half }, dataset, generateId: createGenerateId(() => others.id!), @@ -262,8 +257,8 @@ export function RatingGroupItem( }; return ( - - + + as="div" ref={mergeRefs((el) => (ref = el), local.ref)} role="radio" @@ -280,6 +275,6 @@ export function RatingGroupItem( {...dataset()} {...others} /> - + ); } diff --git a/packages/core/src/rating/rating-label.tsx b/packages/core/src/rating/rating-label.tsx new file mode 100644 index 000000000..47fd866d5 --- /dev/null +++ b/packages/core/src/rating/rating-label.tsx @@ -0,0 +1,25 @@ +import type { Component, ValidComponent } from "solid-js"; + +import { FormControlLabel } from "../form-control"; +import type { ElementOf, PolymorphicProps } from "../polymorphic"; + +export interface RatingLabelOptions {} + +export interface RatingLabelCommonProps {} + +export interface RatingLabelRenderProps extends RatingLabelCommonProps {} + +export type RatingLabelProps< + T extends ValidComponent | HTMLElement = HTMLElement, +> = RatingLabelOptions & Partial>>; + +export function RatingLabel( + props: PolymorphicProps>, +) { + return ( + > + as="span" + {...(props as RatingLabelProps)} + /> + ); +} diff --git a/packages/core/src/rating-group/rating-group-root.tsx b/packages/core/src/rating/rating-root.tsx similarity index 85% rename from packages/core/src/rating-group/rating-group-root.tsx rename to packages/core/src/rating/rating-root.tsx index dff4c4d9e..e3b6b3b4c 100644 --- a/packages/core/src/rating-group/rating-group-root.tsx +++ b/packages/core/src/rating/rating-root.tsx @@ -29,12 +29,9 @@ import { createFormResetListener, } from "../primitives"; import { createDomCollection } from "../primitives/create-dom-collection"; -import { - RatingGroupContext, - type RatingGroupContextValue, -} from "./rating-group-context"; +import { RatingContext, type RatingContextValue } from "./rating-context"; -export interface RatingGroupRootOptions { +export interface RatingRootOptions { /** The current rating value. */ value?: number; @@ -79,9 +76,7 @@ export interface RatingGroupRootOptions { readOnly?: boolean; } -export interface RatingGroupRootCommonProps< - T extends HTMLElement = HTMLElement, -> { +export interface RatingRootCommonProps { id: string; ref: T | ((el: T) => void); "aria-labelledby": string | undefined; @@ -89,8 +84,8 @@ export interface RatingGroupRootCommonProps< "aria-label"?: string; } -export interface RatingGroupRootRenderProps - extends RatingGroupRootCommonProps, +export interface RatingRootRenderProps + extends RatingRootCommonProps, FormControlDataSet { role: "radiogroup"; "aria-invalid": boolean | undefined; @@ -100,23 +95,23 @@ export interface RatingGroupRootRenderProps "aria-orientation": Orientation | undefined; } -export type RatingGroupRootProps< +export type RatingRootProps< T extends ValidComponent | HTMLElement = HTMLElement, -> = RatingGroupRootOptions & Partial>>; +> = RatingRootOptions & Partial>>; -export function RatingGroupRoot( - props: PolymorphicProps>, +export function RatingRoot( + props: PolymorphicProps>, ) { let ref: HTMLElement | undefined; - const defaultId = `ratinggroup-${createUniqueId()}`; + const defaultId = `Rating-${createUniqueId()}`; const mergedProps = mergeDefaultProps( { id: defaultId, orientation: "horizontal", }, - props as RatingGroupRootProps, + props as RatingRootProps, ); const [local, formControlProps, others] = splitProps( @@ -167,7 +162,7 @@ export function RatingGroupRoot( return formControlContext.getAriaDescribedBy(local["aria-describedby"]); }; - const context: RatingGroupContextValue = { + const context: RatingContextValue = { value, setValue: (newValue) => { if (formControlContext.isReadOnly() || formControlContext.isDisabled()) { @@ -189,8 +184,8 @@ export function RatingGroupRoot( return ( - - + + as="div" ref={mergeRefs((el) => (ref = el), local.ref)} role="radiogroup" @@ -207,7 +202,7 @@ export function RatingGroupRoot( {...formControlContext.dataset()} {...others} /> - + ); diff --git a/packages/core/src/rating-group/utils.ts b/packages/core/src/rating/utils.ts similarity index 100% rename from packages/core/src/rating-group/utils.ts rename to packages/core/src/rating/utils.ts diff --git a/packages/core/src/time-field/index.tsx b/packages/core/src/time-field/index.tsx index 246ebb898..643ff7384 100644 --- a/packages/core/src/time-field/index.tsx +++ b/packages/core/src/time-field/index.tsx @@ -10,17 +10,17 @@ import { type FormControlErrorMessageProps as TimeFieldErrorMessageProps, type FormControlErrorMessageRenderProps as TimeFieldErrorMessageRenderProps, } from "../form-control"; -import { - TimeFieldField as Field, - type TimeFieldFieldCommonProps, - type TimeFieldFieldOptions, - type TimeFieldFieldProps, - type TimeFieldFieldRenderProps, -} from "./time-field-field"; import { TimeFieldHiddenInput as HiddenInput, type TimeFieldHiddenInputProps, } from "./time-field-hidden-input"; +import { + TimeFieldInput as Input, + type TimeFieldInputCommonProps, + type TimeFieldInputOptions, + type TimeFieldInputProps, + type TimeFieldInputRenderProps, +} from "./time-field-input"; import { TimeFieldLabel as Label, type TimeFieldLabelCommonProps, @@ -57,10 +57,10 @@ export type { TimeFieldSegmentCommonProps, TimeFieldSegmentRenderProps, TimeFieldSegmentProps, - TimeFieldFieldOptions, - TimeFieldFieldCommonProps, - TimeFieldFieldRenderProps, - TimeFieldFieldProps, + TimeFieldInputOptions, + TimeFieldInputCommonProps, + TimeFieldInputRenderProps, + TimeFieldInputProps, TimeFieldLabelOptions, TimeFieldLabelCommonProps, TimeFieldLabelRenderProps, @@ -71,11 +71,11 @@ export type { TimeFieldRootProps, }; -export { Root, Label, Field, Segment, Description, ErrorMessage, HiddenInput }; +export { Root, Label, Input, Segment, Description, ErrorMessage, HiddenInput }; export const TimeField = Object.assign(Root, { Label, - Field, + Input, Segment, Description, ErrorMessage, diff --git a/packages/core/src/time-field/time-field-context.tsx b/packages/core/src/time-field/time-field-context.tsx index 0631fe7ed..f17162e6d 100644 --- a/packages/core/src/time-field/time-field-context.tsx +++ b/packages/core/src/time-field/time-field-context.tsx @@ -1,23 +1,21 @@ import type { FocusManager } from "@kobalte/utils"; import { type Accessor, createContext, useContext } from "solid-js"; import type { TimeFieldIntlTranslations } from "./time-field.intl"; -import type { - TimeFieldGranularity, - TimeFieldHourCycle, - TimeValue, -} from "./types"; +import type { SegmentType, Time, TimeFieldHourCycle } from "./types"; export interface TimeFieldContextValue { translations: Accessor; - value: Accessor; - setValue: (value: TimeValue | undefined) => void; + value: Accessor