diff --git a/.eslintrc.json b/.eslintrc.json index 2c7bdb1..a3c72f3 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -14,6 +14,7 @@ "import/newline-after-import": "warn", "import/no-duplicates": "error", "import/no-named-as-default-member": "off", + "import/no-unresolved": "off", "simple-import-sort/imports": "warn", "simple-import-sort/exports": "warn", "@typescript-eslint/ban-ts-comment": "off", @@ -22,6 +23,7 @@ "@typescript-eslint/no-namespace": "off", "@typescript-eslint/no-empty-interface": "off", "@typescript-eslint/no-empty-function": "off", + "@typescript-eslint/no-non-null-assertion": "off", "jsx-a11y/no-autofocus": "off", "jsx-a11y/label-has-associated-control": "off", "jsx-a11y/no-noninteractive-element-interactions": "off" diff --git a/apps/docs/package.json b/apps/docs/package.json index 0b7fe06..d3602ed 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -29,7 +29,7 @@ "start": "solid-start start" }, "dependencies": { - "@kobalte/core": "0.9.6", + "@kobalte/core": "0.13.2", "@kobalte/pigment": "0.0.0", "@modular-forms/solid": "0.13.2", "@solid-primitives/media": "2.1.6", diff --git a/apps/docs/public/site.webmanifest b/apps/docs/public/site.webmanifest index 1dd9112..0b08af1 100644 --- a/apps/docs/public/site.webmanifest +++ b/apps/docs/public/site.webmanifest @@ -1 +1,11 @@ -{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} +{ + "name": "", + "short_name": "", + "icons": [ + { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, + { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" } + ], + "theme_color": "#ffffff", + "background_color": "#ffffff", + "display": "standalone" +} diff --git a/apps/docs/src/components/color-scheme-selector.tsx b/apps/docs/src/components/color-scheme-selector.tsx index 7821a8f..7475cab 100644 --- a/apps/docs/src/components/color-scheme-selector.tsx +++ b/apps/docs/src/components/color-scheme-selector.tsx @@ -1,4 +1,4 @@ -import { ToggleButton as KToggleButton } from "@kobalte/core"; +import { ToggleButton as KToggleButton } from "@kobalte/core/toggle-button"; import { IconButton, useColorScheme } from "@kobalte/pigment"; import { createSignal, onMount, Show } from "solid-js"; @@ -16,7 +16,7 @@ export function ColorSchemeSelector() { return ( }> - - {props.children} - + + {props.children} ); } @@ -61,15 +61,17 @@ export function Header(props: HeaderProps) { Changelog - - - - + + diff --git a/apps/docs/src/components/tabs-snippets.tsx b/apps/docs/src/components/tabs-snippets.tsx index a6efad6..55d0d4e 100644 --- a/apps/docs/src/components/tabs-snippets.tsx +++ b/apps/docs/src/components/tabs-snippets.tsx @@ -1,4 +1,4 @@ -import { Tabs } from "@kobalte/core"; +import { Tabs, TabsTriggerProps } from "@kobalte/core/tabs"; import { clsx } from "clsx"; import { ComponentProps, ParentComponent, splitProps } from "solid-js"; @@ -8,12 +8,12 @@ type TabsSnippetsComposite = { Content: typeof Tabs.Content; }; -export const TabsSnippets: ParentComponent> & +export const TabsSnippets: ParentComponent> & TabsSnippetsComposite = props => { const [local, others] = splitProps(props, ["class"]); return ( - ) => { "outline-none text-sm px-3 py-2 text-slate-700 ui-selected:font-medium focus-visible:bg-slate-200 dark:text-white/80 dark:focus-visible:bg-slate-800", local.class )} - {...others} + {...(others as TabsTriggerProps)} /> ); }; diff --git a/apps/docs/src/examples/button.tsx b/apps/docs/src/examples/button.tsx index c5ecdc2..a4820ec 100644 --- a/apps/docs/src/examples/button.tsx +++ b/apps/docs/src/examples/button.tsx @@ -1,4 +1,4 @@ -import { Alert, As, Button, IconButton, LinkButton, LinkIconButton } from "@kobalte/pigment"; +import { Alert, Button, IconButton, LinkButton, LinkIconButton } from "@kobalte/pigment"; import { Link } from "@solidjs/router"; import { For } from "solid-js"; @@ -245,10 +245,8 @@ export function WithLinkButton() { export function WithLinkButtonAsChild() { return ( - - - Back to home - + + Back to home ); } diff --git a/apps/docs/src/examples/modular-forms.tsx b/apps/docs/src/examples/modular-forms.tsx index f9f3531..df920ee 100644 --- a/apps/docs/src/examples/modular-forms.tsx +++ b/apps/docs/src/examples/modular-forms.tsx @@ -1,4 +1,3 @@ -import { As } from "@kobalte/core"; import { Anchor, Button, Checkbox, Surface, TextField } from "@kobalte/pigment"; import { createForm, required, email, setValue, SubmitHandler } from "@modular-forms/solid"; @@ -21,70 +20,69 @@ export function ModularFormsExample() { variant="raised" border="all" class="flex flex-col w-full max-w-sm p-6 rounded-lg" - asChild + as={Form} + onSubmit={handleSubmit} > - -

Welcome to Pigment

-

Sign up to continue

-
- - {(field, props) => ( - setValue(signupForm, "email", value)} - inputProps={{ - onInput: props.onInput, - onChange: props.onChange, - onBlur: props.onBlur, - }} - invalid={!!field.error} - label="Email" - placeholder="example@acme.com" - errorMessage={field.error} - /> - )} - - - {(field, props) => ( - setValue(signupForm, "newsletter", checked)} - inputProps={{ - onInput: props.onInput, - onChange: props.onChange, - onBlur: props.onBlur, - }} - invalid={!!field.error} - label={ - <> - I agree to the terms and conditions - - } - description={ - - Read our{" "} - - terms and conditions - - - } - errorMessage={field.error} - /> - )} - -
- - +

Welcome to Pigment

+

Sign up to continue

+
+ + {(field, props) => ( + setValue(signupForm, "email", value)} + inputProps={{ + onInput: props.onInput, + onChange: props.onChange, + onBlur: props.onBlur, + }} + invalid={!!field.error} + label="Email" + placeholder="example@acme.com" + errorMessage={field.error} + /> + )} + + + {(field, props) => ( + setValue(signupForm, "newsletter", checked)} + inputProps={{ + onInput: props.onInput, + onChange: props.onChange, + onBlur: props.onBlur, + }} + invalid={!!field.error} + label={ + <> + I agree to the terms and conditions + + } + description={ + + Read our{" "} + + terms and conditions + + + } + errorMessage={field.error} + /> + )} + +
+ ); } diff --git a/apps/docs/src/root.css b/apps/docs/src/root.css index e74bebf..15dfadb 100644 --- a/apps/docs/src/root.css +++ b/apps/docs/src/root.css @@ -66,7 +66,7 @@ border: 1px solid theme("colors.slate.200"); } - [data-pg-color-scheme='dark'] .pg-preview { + [data-pg-color-scheme="dark"] .pg-preview { background-image: url("/img/grid_dot_dark.svg"); border: 1px solid theme("colors.slate.700"); } @@ -138,7 +138,7 @@ pre.shiki { padding: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", - "Courier New", monospace; + "Courier New", monospace; } [data-pg-color-scheme="dark"] pre.shiki { @@ -256,7 +256,7 @@ pre code a { pre data-err { /* Extracted from VS Code */ background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%206%203'%20enable-background%3D'new%200%200%206%203'%20height%3D'3'%20width%3D'6'%3E%3Cg%20fill%3D'%23c94824'%3E%3Cpolygon%20points%3D'5.5%2C0%202.5%2C3%201.1%2C3%204.1%2C0'%2F%3E%3Cpolygon%20points%3D'4%2C0%206%2C2%206%2C0.6%205.4%2C0'%2F%3E%3Cpolygon%20points%3D'0%2C2%201%2C3%202.4%2C3%200%2C0.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") - repeat-x bottom left; + repeat-x bottom left; padding-bottom: 3px; } pre .query { @@ -328,7 +328,7 @@ pre .inline-completions ul.dropdown { background-color: gainsboro; color: grey; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", - "Courier New", monospace; + "Courier New", monospace; font-size: 0.8rem; margin: 0; padding: 0; diff --git a/apps/docs/src/routes/docs/core/components/button.mdx b/apps/docs/src/routes/docs/core/components/button.mdx index 45128c3..f57570e 100644 --- a/apps/docs/src/routes/docs/core/components/button.mdx +++ b/apps/docs/src/routes/docs/core/components/button.mdx @@ -362,17 +362,15 @@ Use the `LinkButton` or `LinkIconButton` if you need the style of a button with ``` -If you want to use the `Link` component from the [@solidjs/router](https://github.com/solidjs/solid-router) package, use the `asChild` prop paired with the `As` component to change the rendered element. +If you want to use the `Link` component from the [@solidjs/router](https://github.com/solidjs/solid-router) package, use the `as` prop to change the rendered element. ```tsx - - - Back to home - + + Back to homeQ ``` diff --git a/apps/docs/src/routes/docs/core/overview/polymorphic-components.mdx b/apps/docs/src/routes/docs/core/overview/polymorphic-components.mdx index 2c5103a..7272ee3 100644 --- a/apps/docs/src/routes/docs/core/overview/polymorphic-components.mdx +++ b/apps/docs/src/routes/docs/core/overview/polymorphic-components.mdx @@ -2,34 +2,21 @@ import { Alert } from "@kobalte/pigment"; # Polymorphic components -Some Pigment components accept a special `asChild` prop that lets you change the root element. +Some Pigment components accept a special `as` prop that lets you change the root element. -Paired with the `` component this allows you to attach a component accessibility and functional requirements onto your own element instead. - -When using this pattern the following rules apply to the component with the `asChild` prop, and it's child `` component : - -- CSS classes are combined. -- Styles are combined, if same attribute exists the one from `` win. -- Event handlers are chained, The one from `` get called first. - - - If you decide to change the default rendered node (e.g. change a `button` to a `div`) then it's up - to you to ensure the correct accessibility and functionality of your chosen node type. - +This allows you to attach a component accessibility and functional requirements onto your own element instead. ## With HTML elements -You can use any HTML element with the `As` component. For example, `a` tag will render an anchor: +You can use any HTML element with the as prop. For example, `a` tag will render an anchor: ```tsx -import { As, MenuTrigger } from "@kobalte/pigment"; +import { MenuTrigger } from "@kobalte/pigment"; function App() { return ( - - - Trigger - + + Trigger ); } @@ -45,10 +32,8 @@ import { Link } from "@solidjs/router"; function App() { return ( - - - Trigger - + + Trigger ); } diff --git a/apps/docs/tailwind.config.cjs b/apps/docs/tailwind.config.cjs index e70d44d..68b309a 100644 --- a/apps/docs/tailwind.config.cjs +++ b/apps/docs/tailwind.config.cjs @@ -17,8 +17,8 @@ module.exports = { "8xl": "88rem", }, colors: { - ...pigment.colors - } + ...pigment.colors, + }, }, }, presets: [pigment.preset()], diff --git a/packages/pigment/package.json b/packages/pigment/package.json index 0a2af16..4040e62 100644 --- a/packages/pigment/package.json +++ b/packages/pigment/package.json @@ -53,10 +53,10 @@ "typecheck": "tsc --noEmit" }, "dependencies": { - "@kobalte/core": "^0.9.6", - "@kobalte/utils": "^0.7.2", - "@solid-primitives/refs": "^1.0.2", - "tailwind-variants": "^0.1.5" + "@kobalte/core": "^0.13.2", + "@kobalte/utils": "^0.9.0", + "@solid-primitives/refs": "^1.0.8", + "tailwind-variants": "^0.2.1" }, "devDependencies": { "@kobalte/pigment-tailwind-preset": "0.0.0", diff --git a/packages/pigment/src/alert/alert.props.tsx b/packages/pigment/src/alert/alert.props.tsx index eb518b2..ae22305 100644 --- a/packages/pigment/src/alert/alert.props.tsx +++ b/packages/pigment/src/alert/alert.props.tsx @@ -1,5 +1,5 @@ -import { Alert as KAlert } from "@kobalte/core"; -import { JSX } from "solid-js"; +import { AlertRootProps } from "@kobalte/core/alert"; +import { JSX, ValidComponent } from "solid-js"; import { SlotProp } from "../utils/slot"; import { AlertVariants } from "./alert.styles"; @@ -8,7 +8,10 @@ export type AlertSlots = "root" | "icon" | "leadingSection" | "trailingSection"; export type AlertStatus = Exclude; -export interface AlertProps extends KAlert.AlertRootProps, AlertVariants, SlotProp { +export interface AlertProps + extends AlertRootProps, + AlertVariants, + SlotProp { /** The icon to show before the alert content. */ icon?: JSX.Element | ((status: AlertStatus) => JSX.Element); @@ -17,4 +20,10 @@ export interface AlertProps extends KAlert.AlertRootProps, AlertVariants, SlotPr /** The element to show after the alert content. */ trailingSection?: JSX.Element | ((status: AlertStatus) => JSX.Element); + + /** The children of the element */ + children?: JSX.Element; + + /** Custom classes applied to the element */ + class?: string; } diff --git a/packages/pigment/src/alert/alert.stories.tsx b/packages/pigment/src/alert/alert.stories.tsx index fe663f2..5c240cd 100644 --- a/packages/pigment/src/alert/alert.stories.tsx +++ b/packages/pigment/src/alert/alert.stories.tsx @@ -1,12 +1,12 @@ +import { OverrideComponentProps } from "@kobalte/utils"; import type { Meta, StoryObj } from "@storybook/html"; -import type { ComponentProps } from "solid-js"; import { For } from "solid-js"; import { CloseButton } from "../close-button"; import { Alert } from "./alert"; import { AlertProps } from "./alert.props"; -type Story = StoryObj; +type Story = StoryObj>; export default { title: "Alert", @@ -62,7 +62,7 @@ export default { ), -} as Meta>; +} as Meta>; export const Default: Story = { args: {}, diff --git a/packages/pigment/src/alert/alert.tsx b/packages/pigment/src/alert/alert.tsx index b8d62f4..cc1b7a3 100644 --- a/packages/pigment/src/alert/alert.tsx +++ b/packages/pigment/src/alert/alert.tsx @@ -1,4 +1,4 @@ -import { Alert as KAlert } from "@kobalte/core"; +import { Alert as KAlert } from "@kobalte/core/alert"; import { createMemo, Show, splitProps, ValidComponent } from "solid-js"; import { Dynamic } from "solid-js/web"; @@ -14,6 +14,7 @@ import { makeStaticClass } from "../utils/make-static-class"; import { runIfFn } from "../utils/run-if-fn"; import { AlertProps, AlertSlots } from "./alert.props"; import { alertStyles, AlertVariants } from "./alert.styles"; +import { PolymorphicProps } from "@kobalte/core/polymorphic"; const alertStaticClass = makeStaticClass("alert"); @@ -25,20 +26,20 @@ const ALERT_ICONS: Record, ValidComp discovery: TablerHelpCircleFilledIcon, }; -export function Alert(props: AlertProps) { - props = mergeThemeProps( +export function Alert(props: PolymorphicProps>) { + const mergedProps = mergeThemeProps( "Alert", { variant: "soft", status: "info", }, - props + props as AlertProps ); - const themeClasses = useThemeClasses("Alert", props); + const themeClasses = useThemeClasses("Alert", mergedProps); const [local, variantProps, others] = splitProps( - props, + mergedProps, ["class", "children", "slotClasses", "icon", "leadingSection", "trailingSection"], ["variant", "status"] ); @@ -58,7 +59,7 @@ export function Alert(props: AlertProps) { }); return ( - - + ); } diff --git a/packages/pigment/src/anchor/anchor.props.tsx b/packages/pigment/src/anchor/anchor.props.tsx index 56a0c74..1c8d804 100644 --- a/packages/pigment/src/anchor/anchor.props.tsx +++ b/packages/pigment/src/anchor/anchor.props.tsx @@ -1,11 +1,18 @@ -import { Link as KLink } from "@kobalte/core"; +import { LinkRootProps } from "@kobalte/core/link"; +import { ValidComponent } from "solid-js"; import { SlotProp } from "../utils/slot"; import { AnchorVariants } from "./anchor.styles"; export type AnchorSlots = "root"; -export interface AnchorProps extends KLink.LinkRootProps, AnchorVariants, SlotProp { +export interface AnchorProps + extends LinkRootProps, + AnchorVariants, + SlotProp { /** Whether the link should be opened in a new tab. */ external?: boolean; + + /** Custom classes applied to the element */ + class?: string; } diff --git a/packages/pigment/src/anchor/anchor.stories.tsx b/packages/pigment/src/anchor/anchor.stories.tsx index 27c07c1..cc71057 100644 --- a/packages/pigment/src/anchor/anchor.stories.tsx +++ b/packages/pigment/src/anchor/anchor.stories.tsx @@ -3,8 +3,9 @@ import type { ComponentProps } from "solid-js"; import { Anchor } from "./anchor"; import { AnchorProps } from "./anchor.props"; +import { OverrideComponentProps } from "@kobalte/utils"; -type Story = StoryObj; +type Story = StoryObj>; export default { title: "Anchor", @@ -22,7 +23,7 @@ export default { control: { type: "text" }, }, }, -} as Meta>; +} as Meta>; export const Default: Story = { args: { diff --git a/packages/pigment/src/anchor/anchor.tsx b/packages/pigment/src/anchor/anchor.tsx index 5008bc4..3c2d1c4 100644 --- a/packages/pigment/src/anchor/anchor.tsx +++ b/packages/pigment/src/anchor/anchor.tsx @@ -1,5 +1,6 @@ -import { Link as KLink } from "@kobalte/core"; -import { createMemo, splitProps } from "solid-js"; +import { Link as KLink } from "@kobalte/core/link"; +import { PolymorphicProps } from "@kobalte/core/polymorphic"; +import { createMemo, splitProps, ValidComponent } from "solid-js"; import { mergeThemeProps, useThemeClasses } from "../theme"; import { makeStaticClass } from "../utils/make-static-class"; @@ -8,17 +9,17 @@ import { anchorStyles } from "./anchor.styles"; const anchorStaticClass = makeStaticClass("anchor"); -export function Anchor(props: AnchorProps) { - props = mergeThemeProps("Anchor", {}, props); +export function Anchor(props: PolymorphicProps>) { + const mergedProps = mergeThemeProps("Anchor", {}, props as AnchorProps); - const themeClasses = useThemeClasses("Anchor", props); + const themeClasses = useThemeClasses("Anchor", mergedProps); - const [local, others] = splitProps(props, ["class", "slotClasses", "external"]); + const [local, others] = splitProps(mergedProps, ["class", "slotClasses", "external"]); const styles = createMemo(() => anchorStyles()); return ( - > {} +export interface BadgeProps extends BadgeVariants, SlotProp { + /** The children of the element */ + children?: JSX.Element; + + /** Custom classes applied to the element */ + class?: string; +} diff --git a/packages/pigment/src/badge/badge.stories.tsx b/packages/pigment/src/badge/badge.stories.tsx index e183e91..4d6d3d7 100644 --- a/packages/pigment/src/badge/badge.stories.tsx +++ b/packages/pigment/src/badge/badge.stories.tsx @@ -1,3 +1,4 @@ +import { OverrideComponentProps } from "@kobalte/utils"; import type { Meta, StoryObj } from "@storybook/html"; import type { ComponentProps } from "solid-js"; import { For } from "solid-js"; @@ -5,7 +6,7 @@ import { For } from "solid-js"; import { Badge } from "./badge"; import { BadgeProps } from "./badge.props"; -type Story = StoryObj; +type Story = StoryObj>; export default { title: "Badge", @@ -32,7 +33,7 @@ export default { ), -} as Meta>; +} as Meta>; export const Default: Story = { args: { diff --git a/packages/pigment/src/badge/badge.tsx b/packages/pigment/src/badge/badge.tsx index 3c7956c..03198b8 100644 --- a/packages/pigment/src/badge/badge.tsx +++ b/packages/pigment/src/badge/badge.tsx @@ -1,10 +1,10 @@ -import { Polymorphic } from "@kobalte/core"; -import { ComponentProps, createMemo, Show, splitProps } from "solid-js"; +import { ComponentProps, createMemo, Show, splitProps, ValidComponent } from "solid-js"; import { mergeThemeProps, useThemeClasses } from "../theme"; import { makeStaticClass } from "../utils/make-static-class"; import { BadgeProps, BadgeSlots } from "./badge.props"; import { badgeStyles } from "./badge.styles"; +import { Polymorphic, PolymorphicProps } from "@kobalte/core/polymorphic"; const badgeStaticClass = makeStaticClass("badge"); @@ -16,8 +16,8 @@ function Dot(props: ComponentProps<"svg">) { ); } -export function Badge(props: BadgeProps) { - props = mergeThemeProps( +export function Badge(props: PolymorphicProps) { + const mergedProps = mergeThemeProps( "Badge", { variant: "solid", @@ -25,13 +25,13 @@ export function Badge(props: BadgeProps) { size: "md", shape: "rounded", }, - props + props as BadgeProps ); - const themeClasses = useThemeClasses("Badge", props); + const themeClasses = useThemeClasses("Badge", mergedProps); const [local, variantProps, others] = splitProps( - props, + mergedProps, ["class", "slotClasses", "children"], ["variant", "color", "size", "shape"] ); diff --git a/packages/pigment/src/button/button.props.tsx b/packages/pigment/src/button/button.props.tsx index 885d60f..2acfc98 100644 --- a/packages/pigment/src/button/button.props.tsx +++ b/packages/pigment/src/button/button.props.tsx @@ -1,5 +1,6 @@ -import { Button as KButton, Link as KLink } from "@kobalte/core"; -import { JSX } from "solid-js"; +import { Button as KButton, ButtonRootProps } from "@kobalte/core/button"; +import { Link as KLink, LinkRootProps } from "@kobalte/core/link"; +import { JSX, ValidComponent } from "solid-js"; import { SlotProp } from "../utils/slot"; import { ButtonVariants } from "./button.styles"; @@ -10,8 +11,8 @@ import { ButtonVariants } from "./button.styles"; export type ButtonSlots = "root" | "leadingIcon" | "trailingIcon" | "loadingIcon"; -export interface ButtonBaseProps - extends Omit, +export interface ButtonBaseProps + extends Omit, "color">, ButtonVariants, SlotProp { /** The icon to show before the button content. */ @@ -25,6 +26,12 @@ export interface ButtonBaseProps /** The placement of the loading icon when the button is in a loading state. */ loadingPlacement?: "center" | "leading" | "trailing"; + + /** The children of the element */ + children?: JSX.Element; + + /** Custom classes applied to the element */ + class?: string; } export interface ButtonContentProps @@ -34,13 +41,14 @@ export interface ButtonContentProps trailingIconClass?: string; } -export interface ButtonProps extends Omit {} +export interface ButtonProps + extends Omit, "iconOnly"> {} export type IconButtonSlots = "root" | "loadingIcon"; -export interface IconButtonProps +export interface IconButtonProps extends Omit< - ButtonBaseProps, + ButtonBaseProps, "iconOnly" | "loadingPlacement" | "leadingIcon" | "trailingIcon" | "slotClasses" >, SlotProp { @@ -54,8 +62,8 @@ export interface IconButtonProps export type LinkButtonSlots = "root" | "leadingIcon" | "trailingIcon"; -export interface LinkButtonBaseProps - extends Omit, +export interface LinkButtonBaseProps + extends Omit, "color">, Omit, SlotProp { /** The icon to show before the link button content. */ @@ -63,14 +71,21 @@ export interface LinkButtonBaseProps /** The icon to show after the link button content. */ trailingIcon?: JSX.Element | (() => JSX.Element); + + /** The children of the element */ + children?: JSX.Element; + + /** Custom classes applied to the element */ + class?: string; } -export interface LinkButtonProps extends Omit {} +export interface LinkButtonProps + extends Omit, "iconOnly"> {} export type LinkIconButtonSlots = "root"; -export interface LinkIconButtonProps - extends Omit, +export interface LinkIconButtonProps + extends Omit, "iconOnly" | "leadingIcon" | "trailingIcon" | "slotClasses">, SlotProp { /** An accessible label for the button. */ "aria-label": string; diff --git a/packages/pigment/src/button/button.stories.tsx b/packages/pigment/src/button/button.stories.tsx index c37072f..60c5bba 100644 --- a/packages/pigment/src/button/button.stories.tsx +++ b/packages/pigment/src/button/button.stories.tsx @@ -1,3 +1,4 @@ +import { OverrideComponentProps } from "@kobalte/utils"; import type { Meta, StoryObj } from "@storybook/html"; import type { ComponentProps } from "solid-js"; import { For, JSX } from "solid-js"; @@ -6,7 +7,7 @@ import { TablerLoaderIcon } from "../icon"; import { Button, IconButton } from "./button"; import { ButtonProps } from "./button.props"; -type Story = StoryObj; +type Story = StoryObj>; export default { title: "Button", @@ -36,7 +37,7 @@ export default { control: { type: "text" }, }, }, -} as Meta>; +} as Meta>; export const Variants: Story = { args: { diff --git a/packages/pigment/src/button/button.tsx b/packages/pigment/src/button/button.tsx index f442c9f..779281c 100644 --- a/packages/pigment/src/button/button.tsx +++ b/packages/pigment/src/button/button.tsx @@ -1,5 +1,6 @@ -import { Button as KButton, Link as KLink } from "@kobalte/core"; -import { ComponentProps, createMemo, JSX, Show, splitProps } from "solid-js"; +import { Button as KButton } from "@kobalte/core/button"; +import { Link as KLink } from "@kobalte/core/link"; +import { ComponentProps, createMemo, JSX, Show, splitProps, ValidComponent } from "solid-js"; import { TablerLoaderIcon } from "../icon"; import { mergeThemeProps, useThemeClasses } from "../theme"; @@ -16,6 +17,7 @@ import { LinkIconButtonProps, } from "./button.props"; import { buttonStyles } from "./button.styles"; +import { PolymorphicProps } from "@kobalte/core/polymorphic"; /* ------------------------------------------------------------------------------------------------- * Common @@ -48,8 +50,10 @@ function ButtonContent(props: ButtonContentProps) { const buttonStaticClass = makeStaticClass("button"); -function ButtonBase(props: ButtonBaseProps) { - props = mergeThemeProps( +function ButtonBase( + props: PolymorphicProps> +) { + const mergedProps = mergeThemeProps( "Button", { variant: "default", @@ -61,13 +65,13 @@ function ButtonBase(props: ButtonBaseProps) { loadingPlacement: "center", loadingIcon: () => , }, - props + props as ButtonBaseProps ); - const themeClasses = useThemeClasses("Button", props); + const themeClasses = useThemeClasses("Button", mergedProps); const [local, variantProps, others] = splitProps( - props, + mergedProps, [ "class", "slotClasses", @@ -153,7 +157,7 @@ function ButtonBase(props: ButtonBaseProps) { }; return ( - {content()} - + ); } -export function Button(props: ButtonProps) { - return ; +export function Button( + props: PolymorphicProps> +) { + return ; } -export function IconButton(props: IconButtonProps) { - return ; +export function IconButton( + props: PolymorphicProps> +) { + return ; } /* ------------------------------------------------------------------------------------------------- @@ -183,8 +191,10 @@ export function IconButton(props: IconButtonProps) { const linkButtonStaticClass = makeStaticClass("link-button"); -function LinkButtonBase(props: LinkButtonBaseProps) { - props = mergeThemeProps( +function LinkButtonBase( + props: PolymorphicProps> +) { + const mergedProps = mergeThemeProps( "LinkButton", { variant: "default", @@ -193,13 +203,13 @@ function LinkButtonBase(props: LinkButtonBaseProps) { fullWidth: false, disabled: false, }, - props + props as LinkButtonBaseProps ); - const themeClasses = useThemeClasses("LinkButton", props); + const themeClasses = useThemeClasses("LinkButton", mergedProps); const [local, variantProps, others] = splitProps( - props, + mergedProps, ["class", "slotClasses", "children", "leadingIcon", "trailingIcon"], ["variant", "size", "iconOnly", "fullWidth"] ); @@ -207,7 +217,7 @@ function LinkButtonBase(props: LinkButtonBaseProps) { const styles = createMemo(() => buttonStyles(variantProps)); return ( - {local.children} - + ); } -export function LinkButton(props: LinkButtonProps) { - return ; +export function LinkButton( + props: PolymorphicProps> +) { + return ; } -export function LinkIconButton(props: LinkIconButtonProps) { - return ; +export function LinkIconButton( + props: PolymorphicProps> +) { + return ; } diff --git a/packages/pigment/src/checkbox/checkbox.props.tsx b/packages/pigment/src/checkbox/checkbox.props.tsx index ac3d80b..f7ec2c9 100644 --- a/packages/pigment/src/checkbox/checkbox.props.tsx +++ b/packages/pigment/src/checkbox/checkbox.props.tsx @@ -1,5 +1,5 @@ -import { Checkbox as KCheckbox } from "@kobalte/core"; -import { JSX, Ref } from "solid-js"; +import type { CheckboxRootProps, CheckboxInputProps } from "@kobalte/core/checkbox"; +import { JSX, Ref, ValidComponent } from "solid-js"; import { SlotProp } from "../utils/slot"; import { CheckboxVariants } from "./checkbox.styles"; @@ -15,15 +15,18 @@ export type CheckboxSlots = | "errorIcon" | "supportTextWrapper"; -export interface CheckboxProps - extends Omit, +export interface CheckboxProps + extends Omit, "ref" | "validationState">, CheckboxVariants, SlotProp { /** A ref to the inner `` element. */ ref?: Ref; /** Additional props to be spread on the inner `` element. */ - inputProps?: KCheckbox.CheckboxInputProps; + inputProps?: CheckboxInputProps & { + /** Custom classes applied to the element */ + class?: string; + }; /** Whether the checkbox is invalid regarding the validation rules. */ invalid?: boolean; @@ -45,4 +48,7 @@ export interface CheckboxProps /** The icon to show next to the error message. */ errorIcon?: JSX.Element | (() => JSX.Element); + + /** Custom classes applied to the element */ + class?: string; } diff --git a/packages/pigment/src/checkbox/checkbox.stories.tsx b/packages/pigment/src/checkbox/checkbox.stories.tsx index 3900878..65d5f3c 100644 --- a/packages/pigment/src/checkbox/checkbox.stories.tsx +++ b/packages/pigment/src/checkbox/checkbox.stories.tsx @@ -1,10 +1,11 @@ +import { OverrideComponentProps } from "@kobalte/utils"; import type { Meta, StoryObj } from "@storybook/html"; import type { ComponentProps } from "solid-js"; import { Checkbox } from "./checkbox"; import { CheckboxProps } from "./checkbox.props"; -type Story = StoryObj; +type Story = StoryObj>; export default { title: "Checkbox", @@ -33,7 +34,7 @@ export default { }, }, render: props => , -} as Meta>; +} as Meta>; export const Default: Story = { args: { diff --git a/packages/pigment/src/checkbox/checkbox.tsx b/packages/pigment/src/checkbox/checkbox.tsx index ae8fece..7bf0f64 100644 --- a/packages/pigment/src/checkbox/checkbox.tsx +++ b/packages/pigment/src/checkbox/checkbox.tsx @@ -1,11 +1,12 @@ -import { Checkbox as KCheckbox } from "@kobalte/core"; -import { createMemo, JSX, Show, splitProps } from "solid-js"; +import { Checkbox as KCheckbox } from "@kobalte/core/checkbox"; +import { createMemo, JSX, Show, splitProps, ValidComponent } from "solid-js"; import { createIcon, TablerAlertCircleFilledIcon } from "../icon"; import { mergeThemeProps, useThemeClasses } from "../theme"; import { makeStaticClass } from "../utils/make-static-class"; import { CheckboxProps, CheckboxSlots } from "./checkbox.props"; import { checkboxStyles } from "./checkbox.styles"; +import { PolymorphicProps } from "@kobalte/core/polymorphic"; const checkboxStaticClass = makeStaticClass("checkbox"); @@ -33,8 +34,10 @@ const CheckboxIndeterminateIcon = createIcon({ ), }); -export function Checkbox(props: CheckboxProps) { - props = mergeThemeProps( +export function Checkbox( + props: PolymorphicProps> +) { + const mergedProps = mergeThemeProps( "Checkbox", { size: "md", @@ -44,13 +47,13 @@ export function Checkbox(props: CheckboxProps) { indeterminateIcon: () => , errorIcon: () => , }, - props + props as CheckboxProps ); - const themeClasses = useThemeClasses("Checkbox", props); + const themeClasses = useThemeClasses("Checkbox", mergedProps); const [local, variantProps, others] = splitProps( - props, + mergedProps, [ "ref", "id", @@ -84,7 +87,7 @@ export function Checkbox(props: CheckboxProps) { }; return ( - )} - + ); } diff --git a/packages/pigment/src/close-button/close-button.intl.ts b/packages/pigment/src/close-button/close-button.intl.ts new file mode 100644 index 0000000..94c2ed1 --- /dev/null +++ b/packages/pigment/src/close-button/close-button.intl.ts @@ -0,0 +1,6 @@ +export const CLOSE_BUTTON_INTL_TRANSLATIONS = { + // `aria-label` of the close button. + dismiss: "Dismiss", +}; + +export type CloseButtonIntlTranslations = typeof CLOSE_BUTTON_INTL_TRANSLATIONS; diff --git a/packages/pigment/src/close-button/close-button.props.tsx b/packages/pigment/src/close-button/close-button.props.tsx index 1cb24df..78819a2 100644 --- a/packages/pigment/src/close-button/close-button.props.tsx +++ b/packages/pigment/src/close-button/close-button.props.tsx @@ -1,8 +1,12 @@ import { IconButtonProps } from "../button"; import { SlotProp } from "../utils/slot"; +import { CloseButtonIntlTranslations } from "./close-button.intl"; export type CloseButtonSlots = "root"; export interface CloseButtonProps extends Omit, "slotClasses">, - SlotProp {} + SlotProp { + /** The localized strings of the component. */ + translations?: CloseButtonIntlTranslations; +} diff --git a/packages/pigment/src/close-button/close-button.tsx b/packages/pigment/src/close-button/close-button.tsx index 301433b..da593e4 100644 --- a/packages/pigment/src/close-button/close-button.tsx +++ b/packages/pigment/src/close-button/close-button.tsx @@ -1,5 +1,5 @@ -import { COMMON_INTL_MESSAGES, createMessageFormatter } from "@kobalte/core"; -import { JSX, splitProps } from "solid-js"; +import { PolymorphicProps } from "@kobalte/core/polymorphic"; +import { JSX, splitProps, ValidComponent } from "solid-js"; import { cnBase } from "tailwind-variants"; import { IconButton } from "../button"; @@ -7,24 +7,26 @@ import { TablerCrossIcon } from "../icon"; import { mergeThemeProps, useThemeClasses } from "../theme"; import { makeStaticClass } from "../utils/make-static-class"; import { CloseButtonProps, CloseButtonSlots } from "./close-button.props"; +import { CLOSE_BUTTON_INTL_TRANSLATIONS } from "./close-button.intl"; const closeButtonStaticClass = makeStaticClass("close-button"); -export function CloseButton(props: CloseButtonProps) { - props = mergeThemeProps( +export function CloseButton( + props: PolymorphicProps +) { + const mergedProps = mergeThemeProps( "CloseButton", { size: "md", children: (() => ) as unknown as JSX.Element, + translations: CLOSE_BUTTON_INTL_TRANSLATIONS, }, - props + props as CloseButtonProps ); - const themeClasses = useThemeClasses("CloseButton", props); + const themeClasses = useThemeClasses("CloseButton", mergedProps); - const [local, others] = splitProps(props, ["class", "slotClasses", "aria-label"]); - - const messageFormatter = createMessageFormatter(() => COMMON_INTL_MESSAGES); + const [local, others] = splitProps(mergedProps, ["class", "slotClasses", "aria-label"]); return ( ); diff --git a/packages/pigment/src/color-scheme/init-color-scheme-script.tsx b/packages/pigment/src/color-scheme/init-color-scheme-script.tsx index 1de16c6..0565170 100644 --- a/packages/pigment/src/color-scheme/init-color-scheme-script.tsx +++ b/packages/pigment/src/color-scheme/init-color-scheme-script.tsx @@ -28,7 +28,7 @@ function normalize(initialColorScheme: ColorSchemeWithSystem) { } export function InitColorSchemeScript(props: ColorSchemeScriptProps) { - props = mergeDefaultProps( + const mergedProps = mergeDefaultProps( { defaultScheme: FALLBACK_COLOR_SCHEME_VALUE, storageKey: COLOR_SCHEME_STORAGE_KEY, @@ -36,13 +36,13 @@ export function InitColorSchemeScript(props: ColorSchemeScriptProps) { props ); - const init = normalize(props.defaultScheme!); + const init = normalize(mergedProps.defaultScheme!); return (