@verbb/plugin-kit-react 1.0.9 → 2.0.0

package/dist/components/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":[],"sources":["../../src/components/Button.tsx"],"sourcesContent":["import {\n    forwardRef,\n    type AnchorHTMLAttributes,\n    type ButtonHTMLAttributes,\n    type ClipboardEventHandler,\n    type FocusEventHandler,\n    type KeyboardEventHandler,\n    type MouseEventHandler,\n    type Ref,\n    type ReactElement,\n} from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\nimport { Spinner } from '@verbb/plugin-kit-react/components';\nimport { Slot } from '@verbb/plugin-kit-react/components/Slot';\n\nconst buttonVariants = cva('', {\n    variants: {\n        variant: {\n            default: [\n                'bg-slate-250 text-gray-700',\n                'hover:not-disabled:bg-slate-300',\n                'active:not-disabled:bg-slate-400',\n                'focus-visible:shadow-[0_0_0_2px_var(--color-sky-600),0_0_5px_1px_hsl(from_var(--color-sky-600)_h_s_l/0.7)]',\n                'data-[popup-open]:bg-slate-300',\n            ],\n            primary: [\n                'antialiased',\n                'bg-red-600 text-white border-primary-500',\n                'hover:not-disabled:bg-red-700',\n                'active:not-disabled:bg-red-800',\n                'focus-visible:shadow-[0_0_0_1px_#ffffff,0_0_0_3px_var(--color-sky-600),0_0_5px_1px_hsl(from_var(--color-sky-600)_h_s_l/0.7)]',\n                'data-[popup-open]:bg-red-700',\n            ],\n            secondary: [\n                'antialiased',\n                'bg-gray-500 text-white',\n                'hover:not-disabled:bg-gray-550',\n                'active:not-disabled:bg-gray-600',\n                'focus-visible:shadow-[0_0_0_1px_#ffffff,0_0_0_3px_var(--color-sky-600),0_0_5px_1px_hsl(from_var(--color-sky-600)_h_s_l/0.7)]',\n                'data-[popup-open]:bg-gray-550',\n            ],\n            dashed: [\n                'bg-transparent border-dashed border border-slate-500',\n                'hover:not-disabled:bg-slate-150',\n                'active:not-disabled:bg-slate-250',\n                'focus-visible:border-solid focus-visible:border-sky-600 focus-visible:shadow-[0_0_0_1px_var(--color-sky-600),0_0_4px_1px_hsl(from_var(--color-sky-600)_h_s_l/0.7)]',\n                'data-[popup-open]:bg-slate-250',\n            ],\n            outline: [\n                'bg-transparent border border-slate-400',\n                'hover:not-disabled:bg-slate-150',\n                'active:not-disabled:bg-slate-250',\n                'focus-visible:border-solid focus-visible:border-sky-600 focus-visible:shadow-[0_0_0_1px_var(--color-sky-600),0_0_4px_1px_hsl(from_var(--color-sky-600)_h_s_l/0.7)]',\n                'data-[popup-open]:bg-slate-250',\n            ],\n            transparent: [\n                'hover:not-disabled:bg-slate-150',\n                'active:not-disabled:bg-slate-250',\n                'focus-visible:shadow-[0_0_0_2px_var(--color-sky-600),0_0_5px_1px_hsl(from_var(--color-sky-600)_h_s_l/0.7)]',\n                'data-[popup-open]:bg-slate-250',\n            ],\n            ghost: [\n                'hover:not-disabled:bg-slate-150',\n                'active:not-disabled:bg-slate-250',\n                'focus-visible:shadow-[0_0_0_2px_var(--color-sky-600),0_0_5px_1px_hsl(from_var(--color-sky-600)_h_s_l/0.7)]',\n            ],\n            link: [\n                'rounded-none px-0 py-0 text-sky-700 underline-offset-2',\n                'hover:not-disabled:underline',\n                'focus-visible:shadow-none focus-visible:underline',\n            ],\n            none: [],\n        },\n        size: {\n            default: 'px-[10px] py-[7px]',\n            none: 'p-0',\n            xxs: 'px-[5px] py-[1px] text-[11px] rounded-sm',\n            xs: 'px-[8px] py-[3px] text-[12px] rounded-sm',\n            sm: 'px-[9px] py-[5px] text-[13px] rounded-md',\n            icon: 'size-8 p-0 justify-center',\n            lg: 'px-[12px] py-[9px]',\n            xl: 'px-[16px] py-[10px] text-base',\n        },\n        loading: {\n            true: 'cursor-default',\n        },\n    },\n    defaultVariants: {\n        variant: 'default',\n        size: 'default',\n        loading: false,\n    },\n});\n\ntype SpinnerVariant = 'default' | 'primary' | 'secondary' | 'dashed' | 'outline' | 'transparent';\ntype SpinnerSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | null;\n\ntype ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'size'> &\n    VariantProps<typeof buttonVariants> & {\n        asChild?: boolean\n        render?: ReactElement\n        href?: string\n        target?: string\n        rel?: string\n        download?: string | boolean\n        spinnerSize?: SpinnerSize\n        spinnerVariant?: SpinnerVariant\n        spinnerClassName?: string\n    };\n\nconst Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(({\n    className,\n    variant,\n    size,\n    spinnerSize = null,\n    spinnerVariant,\n    spinnerClassName = '',\n    loading = false,\n    children,\n    asChild = false,\n    render,\n    href,\n    type,\n    ...props\n}, ref) => {\n    if (spinnerSize === null) {\n        if (size === 'xxs' || size === 'xs') {\n            spinnerSize = 'xxs';\n        } else if (size === 'lg' || size === 'xl') {\n            spinnerSize = 'sm';\n        } else {\n            spinnerSize = 'xs';\n        }\n    }\n\n    const resolvedVariant = variant === 'ghost' ? 'transparent' : variant;\n    const resolvedSpinnerVariant = spinnerVariant || (resolvedVariant === 'primary' || resolvedVariant === 'secondary' || resolvedVariant === 'dashed' || resolvedVariant === 'outline' || resolvedVariant === 'transparent'\n        ? resolvedVariant\n        : 'default');\n    const sharedProps = {\n        'data-slot': 'button',\n        'data-size': size || 'default',\n        className: cn(\n            'no-underline hover:no-underline',\n            'inline-flex cursor-pointer outline-none gap-1 items-center justify-center whitespace-nowrap transition-colors',\n            'rounded-lg',\n            'disabled:opacity-50 disabled:cursor-[not-allowed]! disabled:select-none',\n            loading && [\n                'relative pointer-events-none text-transparent!',\n                'select-none!',\n            ],\n            \"[&[data-size='xxs']_svg:not([class*='size-'])]:size-3\",\n            \"[&[data-size='xs']_svg:not([class*='size-'])]:size-3.5\",\n            \"[&[data-size='sm']_svg:not([class*='size-'])]:size-3.5\",\n            \"[&:not([data-size='xxs']):not([data-size='xs']):not([data-size='sm'])_svg:not([class*='size-'])]:size-4\",\n            '[&_svg]:pointer-events-none [&_svg]:shrink-0',\n            buttonVariants({\n                variant: resolvedVariant,\n                size,\n                loading,\n                className,\n            }),\n        ),\n    } as const;\n\n    const content = (\n        <>\n            {loading && <Spinner variant={resolvedSpinnerVariant} size={spinnerSize} className={cn(\n                'absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2',\n                spinnerClassName,\n            )} />}\n            {children}\n        </>\n    );\n\n    if (render) {\n        return (\n            <Slot {...sharedProps}>\n                {render}\n            </Slot>\n        );\n    }\n\n    if (asChild) {\n        return (\n            <Slot {...sharedProps}>\n                {children as ReactElement}\n            </Slot>\n        );\n    }\n\n    if (href) {\n        const anchorProps: AnchorHTMLAttributes<HTMLAnchorElement> = {\n            target: props.target,\n            rel: props.rel,\n            download: props.download,\n            onClick: props.onClick as MouseEventHandler<HTMLAnchorElement> | undefined,\n            onFocus: props.onFocus as FocusEventHandler<HTMLAnchorElement> | undefined,\n            onBlur: props.onBlur as FocusEventHandler<HTMLAnchorElement> | undefined,\n            onMouseEnter: props.onMouseEnter as MouseEventHandler<HTMLAnchorElement> | undefined,\n            onMouseLeave: props.onMouseLeave as MouseEventHandler<HTMLAnchorElement> | undefined,\n            onKeyDown: props.onKeyDown as KeyboardEventHandler<HTMLAnchorElement> | undefined,\n            onKeyUp: props.onKeyUp as KeyboardEventHandler<HTMLAnchorElement> | undefined,\n            onCopy: props.onCopy as ClipboardEventHandler<HTMLAnchorElement> | undefined,\n        };\n\n        return (\n            <a\n                ref={ref as Ref<HTMLAnchorElement>}\n                href={href}\n                {...sharedProps}\n                {...anchorProps}\n            >\n                {content}\n            </a>\n        );\n    }\n\n    return (\n        <button\n            ref={ref as Ref<HTMLButtonElement>}\n            type={type || 'button'}\n            {...sharedProps}\n            {...props}\n        >\n            {content}\n        </button>\n    );\n});\n\nexport { Button, buttonVariants };\n"],"mappings":";;;;;;;;;AAkBA,IAAM,iBAAiB,IAAI,IAAI;CAC3B,UAAU;EACN,SAAS;GACL,SAAS;IACL;IACA;IACA;IACA;IACA;IACH;GACD,SAAS;IACL;IACA;IACA;IACA;IACA;IACA;IACH;GACD,WAAW;IACP;IACA;IACA;IACA;IACA;IACA;IACH;GACD,QAAQ;IACJ;IACA;IACA;IACA;IACA;IACH;GACD,SAAS;IACL;IACA;IACA;IACA;IACA;IACH;GACD,aAAa;IACT;IACA;IACA;IACA;IACH;GACD,OAAO;IACH;IACA;IACA;IACH;GACD,MAAM;IACF;IACA;IACA;IACH;GACD,MAAM,EAAE;GACX;EACD,MAAM;GACF,SAAS;GACT,MAAM;GACN,KAAK;GACL,IAAI;GACJ,IAAI;GACJ,MAAM;GACN,IAAI;GACJ,IAAI;GACP;EACD,SAAS,EACL,MAAM,kBACT;EACJ;CACD,iBAAiB;EACb,SAAS;EACT,MAAM;EACN,SAAS;EACZ;CACJ,CAAC;AAkBF,IAAM,SAAS,YAAgE,EAC3E,WACA,SACA,MACA,cAAc,MACd,gBACA,mBAAmB,IACnB,UAAU,OACV,UACA,UAAU,OACV,QACA,MACA,MACA,GAAG,SACJ,QAAQ;AACP,KAAI,gBAAgB,KAChB,KAAI,SAAS,SAAS,SAAS,KAC3B,eAAc;UACP,SAAS,QAAQ,SAAS,KACjC,eAAc;KAEd,eAAc;CAItB,MAAM,kBAAkB,YAAY,UAAU,gBAAgB;CAC9D,MAAM,yBAAyB,mBAAmB,oBAAoB,aAAa,oBAAoB,eAAe,oBAAoB,YAAY,oBAAoB,aAAa,oBAAoB,gBACrM,kBACA;CACN,MAAM,cAAc;EAChB,aAAa;EACb,aAAa,QAAQ;EACrB,WAAW,GACP,mCACA,iHACA,cACA,2EACA,WAAW,CACP,kDACA,eACH,EACD,yDACA,0DACA,0DACA,2GACA,gDACA,eAAe;GACX,SAAS;GACT;GACA;GACA;GACH,CAAC,CACL;EACJ;CAED,MAAM,UACF,qBAAA,YAAA,EAAA,UAAA,CACK,WAAW,oBAAC,SAAD;EAAS,SAAS;EAAwB,MAAM;EAAa,WAAW,GAChF,yEACA,iBACH;EAAI,CAAA,EACJ,SACF,EAAA,CAAA;AAGP,KAAI,OACA,QACI,oBAAC,MAAD;EAAM,GAAI;YACL;EACE,CAAA;AAIf,KAAI,QACA,QACI,oBAAC,MAAD;EAAM,GAAI;EACL;EACE,CAAA;AAIf,KAAI,MAAM;EACN,MAAM,cAAuD;GACzD,QAAQ,MAAM;GACd,KAAK,MAAM;GACX,UAAU,MAAM;GAChB,SAAS,MAAM;GACf,SAAS,MAAM;GACf,QAAQ,MAAM;GACd,cAAc,MAAM;GACpB,cAAc,MAAM;GACpB,WAAW,MAAM;GACjB,SAAS,MAAM;GACf,QAAQ,MAAM;GACjB;AAED,SACI,oBAAC,KAAD;GACS;GACC;GACN,GAAI;GACJ,GAAI;aAEH;GACD,CAAA;;AAIZ,QACI,oBAAC,UAAD;EACS;EACL,MAAM,QAAQ;EACd,GAAI;EACJ,GAAI;YAEH;EACI,CAAA;EAEf"}
+{"version":3,"file":"Button.js","names":[],"sources":["../../src/components/Button.tsx"],"sourcesContent":["import React from 'react';\nimport { createPluginKitComponent } from '../utils/create-plugin-kit-component.js';\nimport { PkButton, type PkButtonSize, type PkButtonVariant } from '@verbb/plugin-kit-web/components/button/pk-button.js';\nimport type { PkSpinnerSize, PkSpinnerTone, PkSpinnerVariant } from '@verbb/plugin-kit-web/components/spinner/pk-spinner.js';\n\nimport { trueBooleanProps } from '../utils/lit-react-booleans.js';\n\nconst PkButtonElement = createPluginKitComponent({\n    tagName: 'pk-button',\n    elementClass: PkButton,\n    react: React,\n    events: {\n        onPkClick: 'click',\n    },\n});\n\nexport type ButtonProps = React.ComponentProps<typeof PkButtonElement> & {\n    variant?: PkButtonVariant;\n    size?: PkButtonSize;\n    /** Compact hug-the-glyph density — omit for default square icon-only hit box. */\n    icon?: boolean;\n    /** Craft `.menubtn` disclosure end-cap in a button group. */\n    groupTrigger?: boolean;\n    withCaret?: boolean;\n    loading?: boolean;\n    disabled?: boolean;\n    type?: 'button' | 'submit' | 'reset';\n    /** Override spinner size — v1 Button `spinnerSize` (e.g. `xs` on `size=\"lg\"`). */\n    spinnerSize?: PkSpinnerSize;\n    spinnerVariant?: PkSpinnerVariant;\n    spinnerTone?: PkSpinnerTone;\n    'data-state'?: 'hover' | 'focus-visible' | 'active';\n};\n\n/** React facade over `<pk-button>`. Behavior and styles live in the web component. */\nexport function Button({\n    children,\n    variant = 'default',\n    size = 'default',\n    icon,\n    groupTrigger,\n    withCaret,\n    loading = false,\n    disabled = false,\n    type = 'button',\n    spinnerSize,\n    spinnerVariant,\n    spinnerTone,\n    'data-state': dataState,\n    ...props\n}: ButtonProps) {\n    return (\n        <PkButtonElement\n            variant={variant}\n            size={size}\n            loading={loading}\n            disabled={disabled}\n            type={type}\n            {...trueBooleanProps(['icon', 'groupTrigger', 'withCaret'], { icon, groupTrigger, withCaret })}\n            {...(spinnerSize ? { 'spinner-size': spinnerSize } : {})}\n            {...(spinnerVariant ? { 'spinner-variant': spinnerVariant } : {})}\n            {...(spinnerTone ? { 'spinner-tone': spinnerTone } : {})}\n            {...(dataState ? { 'data-state': dataState } : {})}\n            {...props}\n        >\n            {children}\n        </PkButtonElement>\n    );\n}\n\nexport { PkButtonElement };\n"],"mappings":";;;;;;AAOA,IAAM,kBAAkB,yBAAyB;CAC7C,SAAS;CACT,cAAc;CACd,OAAO;CACP,QAAQ,EACJ,WAAW,SACd;CACJ,CAAC;;AAqBF,SAAgB,OAAO,EACnB,UACA,UAAU,WACV,OAAO,WACP,MACA,cACA,WACA,UAAU,OACV,WAAW,OACX,OAAO,UACP,aACA,gBACA,aACA,cAAc,WACd,GAAG,SACS;AACZ,QACI,oBAAC,iBAAD;EACa;EACH;EACG;EACC;EACJ;EACN,GAAI,iBAAiB;GAAC;GAAQ;GAAgB;GAAY,EAAE;GAAE;GAAM;GAAc;GAAW,CAAC;EAC9F,GAAK,cAAc,EAAE,gBAAgB,aAAa,GAAG,EAAE;EACvD,GAAK,iBAAiB,EAAE,mBAAmB,gBAAgB,GAAG,EAAE;EAChE,GAAK,cAAc,EAAE,gBAAgB,aAAa,GAAG,EAAE;EACvD,GAAK,YAAY,EAAE,cAAc,WAAW,GAAG,EAAE;EACjD,GAAI;EAEH;EACa,CAAA"}

package/dist/components/ButtonGroup.d.ts

@@ -1,11 +1,16 @@
-import { useRender } from '@base-ui/react/use-render';
-import { VariantProps } from 'class-variance-authority';
-import { Separator } from './Separator';
-declare const buttonGroupVariants: (props?: ({
-    orientation?: "horizontal" | "vertical" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-declare function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>): import("react/jsx-runtime").JSX.Element;
-declare function ButtonGroupText({ className, render, ...props }: useRender.ComponentProps<'div'>): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
-declare function ButtonGroupSeparator({ className, orientation, ...props }: React.ComponentProps<typeof Separator>): import("react/jsx-runtime").JSX.Element;
-export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants, };
+import { default as React } from 'react';
+import { PkButtonGroup, PkButtonGroupOrientation } from '@verbb/plugin-kit-web/components/button-group/pk-button-group.js';
+import { PkButtonGroupSeparator, PkButtonGroupSeparatorOrientation } from '@verbb/plugin-kit-web/components/button-group/pk-button-group-separator.js';
+import { PkButtonGroupText } from '@verbb/plugin-kit-web/components/button-group/pk-button-group-text.js';
+/** React facade over `<pk-button-group>`. Behavior and styles live in the web component. */
+export declare const PkButtonGroupElement: import('@lit/react').ReactWebComponent<PkButtonGroup, {}>;
+export declare const PkButtonGroupSeparatorElement: import('@lit/react').ReactWebComponent<PkButtonGroupSeparator, {}>;
+export declare const PkButtonGroupTextElement: import('@lit/react').ReactWebComponent<PkButtonGroupText, {}>;
+export declare const ButtonGroup: import('@lit/react').ReactWebComponent<PkButtonGroup, {}>;
+export declare const ButtonGroupSeparator: import('@lit/react').ReactWebComponent<PkButtonGroupSeparator, {}>;
+export declare const ButtonGroupText: import('@lit/react').ReactWebComponent<PkButtonGroupText, {}>;
+export type ButtonGroupProps = React.ComponentProps<typeof PkButtonGroupElement>;
+export type ButtonGroupSeparatorProps = React.ComponentProps<typeof PkButtonGroupSeparatorElement>;
+export type ButtonGroupTextProps = React.ComponentProps<typeof PkButtonGroupTextElement>;
+export type { PkButtonGroupOrientation, PkButtonGroupSeparatorOrientation };
 //# sourceMappingURL=ButtonGroup.d.ts.map

package/dist/components/ButtonGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../src/components/ButtonGroup.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAE,SAAS,EAAE,MAAM,8CAA8C,CAAC;AAEzE,QAAA,MAAM,mBAAmB;;8EA+CnB,CAAC;AAEP,iBAAS,WAAW,CAAC,EACjB,SAAS,EACT,WAAW,EACX,GAAG,KAAK,EACX,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,2CAUxE;AAED,iBAAS,eAAe,CAAC,EACrB,SAAS,EACT,MAAM,EACN,GAAG,KAAK,EACX,EAAE,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,8FA0BjC;AAED,iBAAS,oBAAoB,CAAC,EAC1B,SAAS,EACT,WAAwB,EACxB,GAAG,KAAK,EACX,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,2CAqBxC;AAED,OAAO,EACH,WAAW,EACX,oBAAoB,EACpB,eAAe,EACf,mBAAmB,GACtB,CAAC"}
+{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../src/components/ButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,aAAa,EAAE,KAAK,wBAAwB,EAAE,MAAM,kEAAkE,CAAC;AAChI,OAAO,EACH,sBAAsB,EACtB,KAAK,iCAAiC,EACzC,MAAM,4EAA4E,CAAC;AACpF,OAAO,EAAE,iBAAiB,EAAE,MAAM,uEAAuE,CAAC;AAE1G,4FAA4F;AAC5F,eAAO,MAAM,oBAAoB,2DAI/B,CAAC;AAEH,eAAO,MAAM,6BAA6B,oEAIxC,CAAC;AAEH,eAAO,MAAM,wBAAwB,+DAInC,CAAC;AAEH,eAAO,MAAM,WAAW,2DAAuB,CAAC;AAChD,eAAO,MAAM,oBAAoB,oEAAgC,CAAC;AAClE,eAAO,MAAM,eAAe,+DAA2B,CAAC;AAExD,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACjF,MAAM,MAAM,yBAAyB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,6BAA6B,CAAC,CAAC;AACnG,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,wBAAwB,CAAC,CAAC;AACzF,YAAY,EAAE,wBAAwB,EAAE,iCAAiC,EAAE,CAAC"}

package/dist/components/ButtonGroup.js

@@ -1,59 +1,29 @@
-import { cn } from "../utils/classes.js";
-import "../utils/index.js";
-import { Separator } from "./Separator.js";
-import { cva } from "class-variance-authority";
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-import { jsx } from "react/jsx-runtime";
+import { createPluginKitComponent } from "../utils/create-plugin-kit-component.js";
+import React from "react";
+import { PkButtonGroup } from "@verbb/plugin-kit-web/components/button-group/pk-button-group.js";
+import { PkButtonGroupSeparator } from "@verbb/plugin-kit-web/components/button-group/pk-button-group-separator.js";
+import { PkButtonGroupText } from "@verbb/plugin-kit-web/components/button-group/pk-button-group-text.js";
 //#region src/components/ButtonGroup.tsx
-var buttonGroupVariants = cva([
-	"flex w-fit items-stretch",
-	"[&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
-	"*:focus-visible:z-10 *:focus-visible:relative",
-	"has-[>[data-slot=button-group]]:gap-2",
-	"has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg"
-], {
-	variants: { orientation: {
-		horizontal: [
-			"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg!",
-			"[&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
-			"*:data-slot:rounded-r-none"
-		],
-		vertical: [
-			"flex-col",
-			"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg!",
-			"[&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0",
-			"*:data-slot:rounded-b-none"
-		]
-	} },
-	defaultVariants: { orientation: "horizontal" }
+/** React facade over `<pk-button-group>`. Behavior and styles live in the web component. */
+var PkButtonGroupElement = createPluginKitComponent({
+	tagName: "pk-button-group",
+	elementClass: PkButtonGroup,
+	react: React
 });
-function ButtonGroup({ className, orientation, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		role: "group",
-		"data-slot": "button-group",
-		"data-orientation": orientation,
-		className: cn(buttonGroupVariants({ orientation }), className),
-		...props
-	});
-}
-function ButtonGroupText({ className, render, ...props }) {
-	return useRender({
-		defaultTagName: "div",
-		props: mergeProps({ className: cn("flex items-center gap-2 rounded-lg border px-2.5", "text-sm font-medium", "border-slate-300 bg-slate-200 text-gray-700", "[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none", className) }, props),
-		render,
-		state: { slot: "button-group-text" }
-	});
-}
-function ButtonGroupSeparator({ className, orientation = "vertical", ...props }) {
-	return /* @__PURE__ */ jsx(Separator, {
-		"data-slot": "button-group-separator",
-		orientation,
-		className: cn("relative self-stretch", "bg-white", "data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto", "data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto", className),
-		...props
-	});
-}
+var PkButtonGroupSeparatorElement = createPluginKitComponent({
+	tagName: "pk-button-group-separator",
+	elementClass: PkButtonGroupSeparator,
+	react: React
+});
+var PkButtonGroupTextElement = createPluginKitComponent({
+	tagName: "pk-button-group-text",
+	elementClass: PkButtonGroupText,
+	react: React
+});
+var ButtonGroup = PkButtonGroupElement;
+var ButtonGroupSeparator = PkButtonGroupSeparatorElement;
+var ButtonGroupText = PkButtonGroupTextElement;
 //#endregion
-export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, PkButtonGroupElement, PkButtonGroupSeparatorElement, PkButtonGroupTextElement };
 
 //# sourceMappingURL=ButtonGroup.js.map

package/dist/components/ButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.js","names":[],"sources":["../../src/components/ButtonGroup.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@verbb/plugin-kit-react/utils';\nimport { Separator } from '@verbb/plugin-kit-react/components/Separator';\n\nconst buttonGroupVariants = cva([\n    // Layout\n    'flex w-fit items-stretch',\n\n    // Child sizing\n    \"[&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n\n    // Focus layering\n    '*:focus-visible:z-10 *:focus-visible:relative',\n\n    // Nested group spacing\n    'has-[>[data-slot=button-group]]:gap-2',\n\n    // Select edge-case rounding\n    'has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg',\n],\n    {\n        variants: {\n            orientation: {\n                horizontal: [\n                    // Last item keeps the right edge radius\n                    '[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg!',\n\n                    // Remove interior seams\n                    '[&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0',\n\n                    // Ensure non-last items are flush on the right\n                    '*:data-slot:rounded-r-none',\n                ],\n                vertical: [\n                    // Stack children vertically\n                    'flex-col',\n\n                    // Last item keeps the bottom edge radius\n                    '[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg!',\n\n                    // Remove interior seams\n                    '[&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0',\n\n                    // Ensure non-last items are flush on the bottom\n                    '*:data-slot:rounded-b-none',\n                ],\n            },\n        },\n        defaultVariants: {\n            orientation: 'horizontal',\n        },\n    });\n\nfunction ButtonGroup({\n    className,\n    orientation,\n    ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>) {\n    return (\n        <div\n            role=\"group\"\n            data-slot=\"button-group\"\n            data-orientation={orientation}\n            className={cn(buttonGroupVariants({ orientation }), className)}\n            {...props}\n        />\n    );\n}\n\nfunction ButtonGroupText({\n    className,\n    render,\n    ...props\n}: useRender.ComponentProps<'div'>) {\n    return useRender({\n        defaultTagName: 'div',\n        props: mergeProps<'div'>({\n            className: cn(\n                // Layout\n                'flex items-center gap-2 rounded-lg border px-2.5',\n\n                // Typography\n                'text-sm font-medium',\n\n                // Theme\n                'border-slate-300 bg-slate-200 text-gray-700',\n\n                // Icons\n                \"[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none\",\n\n                className,\n            ),\n        },\n            props),\n        render,\n        state: {\n            slot: 'button-group-text',\n        },\n    });\n}\n\nfunction ButtonGroupSeparator({\n    className,\n    orientation = 'vertical',\n    ...props\n}: React.ComponentProps<typeof Separator>) {\n    return (\n        <Separator\n            data-slot=\"button-group-separator\"\n            orientation={orientation}\n            className={cn(\n                // Layout\n                'relative self-stretch',\n\n                // Theme\n                'bg-white',\n\n                // Orientation tweaks\n                'data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto',\n                'data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nexport {\n    ButtonGroup,\n    ButtonGroupSeparator,\n    ButtonGroupText,\n    buttonGroupVariants,\n};\n"],"mappings":";;;;;;;;AAOA,IAAM,sBAAsB,IAAI;CAE5B;CAGA;CAGA;CAGA;CAGA;CACH,EACG;CACI,UAAU,EACN,aAAa;EACT,YAAY;GAER;GAGA;GAGA;GACH;EACD,UAAU;GAEN;GAGA;GAGA;GAGA;GACH;EACJ,EACJ;CACD,iBAAiB,EACb,aAAa,cAChB;CACJ,CAAC;AAEN,SAAS,YAAY,EACjB,WACA,aACA,GAAG,SACoE;AACvE,QACI,oBAAC,OAAD;EACI,MAAK;EACL,aAAU;EACV,oBAAkB;EAClB,WAAW,GAAG,oBAAoB,EAAE,aAAa,CAAC,EAAE,UAAU;EAC9D,GAAI;EACN,CAAA;;AAIV,SAAS,gBAAgB,EACrB,WACA,QACA,GAAG,SAC6B;AAChC,QAAO,UAAU;EACb,gBAAgB;EAChB,OAAO,WAAkB,EACrB,WAAW,GAEP,oDAGA,uBAGA,+CAGA,oEAEA,UACH,EACJ,EACG,MAAM;EACV;EACA,OAAO,EACH,MAAM,qBACT;EACJ,CAAC;;AAGN,SAAS,qBAAqB,EAC1B,WACA,cAAc,YACd,GAAG,SACoC;AACvC,QACI,oBAAC,WAAD;EACI,aAAU;EACG;EACb,WAAW,GAEP,yBAGA,YAGA,4EACA,wEAEA,UACH;EACD,GAAI;EACN,CAAA"}
+{"version":3,"file":"ButtonGroup.js","names":[],"sources":["../../src/components/ButtonGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { createPluginKitComponent } from '../utils/create-plugin-kit-component.js';\nimport { PkButtonGroup, type PkButtonGroupOrientation } from '@verbb/plugin-kit-web/components/button-group/pk-button-group.js';\nimport {\n    PkButtonGroupSeparator,\n    type PkButtonGroupSeparatorOrientation,\n} from '@verbb/plugin-kit-web/components/button-group/pk-button-group-separator.js';\nimport { PkButtonGroupText } from '@verbb/plugin-kit-web/components/button-group/pk-button-group-text.js';\n\n/** React facade over `<pk-button-group>`. Behavior and styles live in the web component. */\nexport const PkButtonGroupElement = createPluginKitComponent({\n    tagName: 'pk-button-group',\n    elementClass: PkButtonGroup,\n    react: React,\n});\n\nexport const PkButtonGroupSeparatorElement = createPluginKitComponent({\n    tagName: 'pk-button-group-separator',\n    elementClass: PkButtonGroupSeparator,\n    react: React,\n});\n\nexport const PkButtonGroupTextElement = createPluginKitComponent({\n    tagName: 'pk-button-group-text',\n    elementClass: PkButtonGroupText,\n    react: React,\n});\n\nexport const ButtonGroup = PkButtonGroupElement;\nexport const ButtonGroupSeparator = PkButtonGroupSeparatorElement;\nexport const ButtonGroupText = PkButtonGroupTextElement;\n\nexport type ButtonGroupProps = React.ComponentProps<typeof PkButtonGroupElement>;\nexport type ButtonGroupSeparatorProps = React.ComponentProps<typeof PkButtonGroupSeparatorElement>;\nexport type ButtonGroupTextProps = React.ComponentProps<typeof PkButtonGroupTextElement>;\nexport type { PkButtonGroupOrientation, PkButtonGroupSeparatorOrientation };\n"],"mappings":";;;;;;;AAUA,IAAa,uBAAuB,yBAAyB;CACzD,SAAS;CACT,cAAc;CACd,OAAO;CACV,CAAC;AAEF,IAAa,gCAAgC,yBAAyB;CAClE,SAAS;CACT,cAAc;CACd,OAAO;CACV,CAAC;AAEF,IAAa,2BAA2B,yBAAyB;CAC7D,SAAS;CACT,cAAc;CACd,OAAO;CACV,CAAC;AAEF,IAAa,cAAc;AAC3B,IAAa,uBAAuB;AACpC,IAAa,kBAAkB"}

package/dist/components/Calendar.d.ts

@@ -1,11 +1,18 @@
-import { ComponentProps } from 'react';
-import { DayPicker, DayButton, Locale } from 'react-day-picker';
-import { Button } from '.';
-declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, locale, formatters, components, ...props }: ComponentProps<typeof DayPicker> & {
-    buttonVariant?: ComponentProps<typeof Button>['variant'];
-}): import("react/jsx-runtime").JSX.Element;
-declare function CalendarDayButton({ className, day, modifiers, locale, ...props }: ComponentProps<typeof DayButton> & {
-    locale?: Partial<Locale>;
-}): import("react/jsx-runtime").JSX.Element;
-export { Calendar, CalendarDayButton };
+import { default as React } from 'react';
+import { PkCalendar, PkCalendarDayContent, PkCalendarFirstDayOfWeek, PkCalendarMode, PkCalendarPageBy, PkCalendarSize, PkCalendarView } from '@verbb/plugin-kit-web/components/calendar/pk-calendar.js';
+/** React facade over `<pk-calendar>`. Behavior and styles live in the web component. */
+export declare const PkCalendarElement: import('@lit/react').ReactWebComponent<PkCalendar, {
+    onInput: string;
+    onChange: string;
+    onPkFocusDay: string;
+    onPkViewChange: string;
+}>;
+export declare const Calendar: import('@lit/react').ReactWebComponent<PkCalendar, {
+    onInput: string;
+    onChange: string;
+    onPkFocusDay: string;
+    onPkViewChange: string;
+}>;
+export type CalendarProps = React.ComponentProps<typeof PkCalendarElement>;
+export type { PkCalendarDayContent, PkCalendarFirstDayOfWeek, PkCalendarMode, PkCalendarPageBy, PkCalendarSize, PkCalendarView, };
 //# sourceMappingURL=Calendar.d.ts.map

package/dist/components/Calendar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../src/components/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,cAAc,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,EACH,SAAS,EAET,KAAK,SAAS,EACd,KAAK,MAAM,EACd,MAAM,kBAAkB,CAAC;AAM1B,OAAO,EAAE,MAAM,EAAkB,MAAM,oCAAoC,CAAC;AAE5E,iBAAS,QAAQ,CAAC,EACd,SAAS,EACT,UAAU,EACV,eAAsB,EACtB,aAAuB,EACvB,aAAsB,EACtB,MAAM,EACN,UAAU,EACV,UAAU,EACV,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IAClC,aAAa,CAAC,EAAE,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAA;CAC3D,2CAoLA;AAED,iBAAS,iBAAiB,CAAC,EACvB,SAAS,EACT,GAAG,EACH,SAAS,EACT,MAAM,EACN,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,CAAA;CAAE,2CA0DjE;AAED,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../src/components/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EACH,UAAU,EACV,KAAK,oBAAoB,EACzB,KAAK,wBAAwB,EAC7B,KAAK,cAAc,EACnB,KAAK,gBAAgB,EACrB,KAAK,cAAc,EACnB,KAAK,cAAc,EACtB,MAAM,0DAA0D,CAAC;AAElE,wFAAwF;AACxF,eAAO,MAAM,iBAAiB;;;;;EAU5B,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;EAAoB,CAAC;AAC1C,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC3E,YAAY,EACR,oBAAoB,EACpB,wBAAwB,EACxB,cAAc,EACd,gBAAgB,EAChB,cAAc,EACd,cAAc,GACjB,CAAC"}

package/dist/components/Calendar.js

@@ -1,133 +1,21 @@
-import { cn } from "../utils/classes.js";
-import "../utils/index.js";
-import "./index.js";
-import { Button, buttonVariants } from "./Button.js";
-import { useEffect, useRef } from "react";
-import { jsx } from "react/jsx-runtime";
-import { DayPicker, getDefaultClassNames } from "react-day-picker";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronDown, faChevronLeft, faChevronRight } from "@fortawesome/pro-solid-svg-icons";
+import { createPluginKitComponent } from "../utils/create-plugin-kit-component.js";
+import React from "react";
+import { PkCalendar } from "@verbb/plugin-kit-web/components/calendar/pk-calendar.js";
 //#region src/components/Calendar.tsx
-function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "none", locale, formatters, components, ...props }) {
-	const defaultClassNames = getDefaultClassNames();
-	return /* @__PURE__ */ jsx(DayPicker, {
-		showOutsideDays,
-		className: cn("bg-background group/calendar", "p-2", "[--cell-radius:100%] [--cell-size:--spacing(7)]", "[[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent", String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className),
-		captionLayout,
-		locale,
-		formatters: {
-			formatMonthDropdown: (date) => {
-				return date.toLocaleString(locale?.code, { month: "short" });
-			},
-			...formatters
-		},
-		classNames: {
-			root: cn("w-fit", defaultClassNames.root),
-			months: cn("flex gap-4 flex-col md:flex-row relative", defaultClassNames.months),
-			month: cn("flex flex-col w-full gap-2", defaultClassNames.month),
-			nav: cn("flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between", defaultClassNames.nav),
-			"button_previous": cn(buttonVariants({
-				variant: buttonVariant,
-				size: "none"
-			}), "cursor-pointer rounded-sm", "p-2!", "[&>svg]:size-3", defaultClassNames.button_previous),
-			"button_next": cn(buttonVariants({
-				variant: buttonVariant,
-				size: "none"
-			}), "cursor-pointer rounded-sm", "p-2!", "[&>svg]:size-3", defaultClassNames.button_next),
-			"month_caption": cn("flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)", defaultClassNames.month_caption),
-			dropdowns: cn("w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5", defaultClassNames.dropdowns),
-			"dropdown_root": cn("relative cn-calendar-dropdown-root rounded-(--cell-radius)", defaultClassNames.dropdown_root),
-			dropdown: cn("absolute bg-white inset-0 opacity-0", defaultClassNames.dropdown),
-			"caption_label": cn("select-none font-medium", captionLayout === "label" ? "text-[13px]" : [
-				"cn-calendar-caption-label",
-				"rounded-(--cell-radius)",
-				"flex items-center gap-1 text-[13px]",
-				"[&>svg]:text-slate-800",
-				"[&>svg]:size-2.5"
-			].join(" "), defaultClassNames.caption_label),
-			table: "w-full border-collapse",
-			weekdays: cn("flex", defaultClassNames.weekdays),
-			weekday: cn("text-gray-500 rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none", defaultClassNames.weekday),
-			week: cn("flex w-full mt-2", defaultClassNames.week),
-			"week_number_header": cn("select-none w-(--cell-size)", defaultClassNames.week_number_header),
-			"week_number": cn("text-[0.8rem]", "select-none", "text-gray-500", defaultClassNames.week_number),
-			day: cn("relative w-full h-full p-0 text-center group/day aspect-square select-none", defaultClassNames.day),
-			"range_start": cn(defaultClassNames.range_start),
-			"range_middle": cn(defaultClassNames.range_middle),
-			"range_end": cn(defaultClassNames.range_end),
-			today: cn(defaultClassNames.today),
-			outside: cn("opacity-60", defaultClassNames.outside),
-			disabled: cn("opacity-40", defaultClassNames.disabled),
-			hidden: cn("invisible", defaultClassNames.hidden),
-			...classNames
-		},
-		components: {
-			Root: ({ className, rootRef, ...props }) => {
-				return /* @__PURE__ */ jsx("div", {
-					"data-slot": "calendar",
-					ref: rootRef,
-					className: cn(className),
-					...props
-				});
-			},
-			Chevron: ({ className, orientation, ...props }) => {
-				if (orientation === "left") return /* @__PURE__ */ jsx(FontAwesomeIcon, {
-					icon: faChevronLeft,
-					className: cn("cn-rtl-flip size-4", className),
-					...props
-				});
-				if (orientation === "right") return /* @__PURE__ */ jsx(FontAwesomeIcon, {
-					icon: faChevronRight,
-					className: cn("cn-rtl-flip size-4", className),
-					...props
-				});
-				return /* @__PURE__ */ jsx(FontAwesomeIcon, {
-					icon: faChevronDown,
-					className: cn("size-4", className),
-					...props
-				});
-			},
-			DayButton: ({ ...props }) => {
-				return /* @__PURE__ */ jsx(CalendarDayButton, {
-					locale,
-					...props
-				});
-			},
-			WeekNumber: ({ children, ...props }) => {
-				return /* @__PURE__ */ jsx("td", {
-					...props,
-					children: /* @__PURE__ */ jsx("div", {
-						className: "flex size-(--cell-size) items-center justify-center text-center",
-						children
-					})
-				});
-			},
-			...components
-		},
-		...props
-	});
-}
-function CalendarDayButton({ className, day, modifiers, locale, ...props }) {
-	const defaultClassNames = getDefaultClassNames();
-	const ref = useRef(null);
-	useEffect(() => {
-		if (modifiers.focused) ref.current?.focus();
-	}, [modifiers.focused]);
-	return /* @__PURE__ */ jsx(Button, {
-		ref,
-		variant: "none",
-		size: "none",
-		"data-today": modifiers.today,
-		"data-day": day.date.toLocaleDateString(locale?.code),
-		"data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
-		"data-range-start": modifiers.range_start,
-		"data-range-end": modifiers.range_end,
-		"data-range-middle": modifiers.range_middle,
-		className: cn("relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal", "rounded-none transition-none", "data-[selected-single=true]:bg-gray-200", "data-[selected-single=true]:rounded-(--cell-radius)", "data-[range-middle=true]:bg-gray-200", "data-[range-start=true]:bg-gray-200", "data-[range-end=true]:bg-gray-200", "data-[today=true]:after:absolute", "data-[today=true]:after:w-full", "data-[today=true]:after:h-full", "data-[today=true]:after:m-2", "data-[today=true]:after:-z-0", "data-[today=true]:after:isolate", "data-[today=true]:after:border", "data-[today=true]:after:border-blue-500", "data-[today=true]:after:rounded-(--cell-radius)", "data-[range-start=true]:data-[range-end=true]:rounded-(--cell-radius)", "data-[range-start=true]:data-[range-end=false]:rounded-l-(--cell-radius)", "data-[range-middle=true]:rounded-none", "data-[range-start=false]:data-[range-end=true]:rounded-r-(--cell-radius)", "[&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className),
-		...props
-	});
-}
+/** React facade over `<pk-calendar>`. Behavior and styles live in the web component. */
+var PkCalendarElement = createPluginKitComponent({
+	tagName: "pk-calendar",
+	elementClass: PkCalendar,
+	react: React,
+	events: {
+		onInput: "input",
+		onChange: "change",
+		onPkFocusDay: "pk-focus-day",
+		onPkViewChange: "pk-view-change"
+	}
+});
+var Calendar = PkCalendarElement;
 //#endregion
-export { Calendar, CalendarDayButton };
+export { Calendar, PkCalendarElement };
 
 //# sourceMappingURL=Calendar.js.map

package/dist/components/Calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","names":[],"sources":["../../src/components/Calendar.tsx"],"sourcesContent":["import { useRef, useEffect, ComponentProps } from 'react';\n\nimport {\n    DayPicker,\n    getDefaultClassNames,\n    type DayButton,\n    type Locale,\n} from 'react-day-picker';\n\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faChevronDown, faChevronLeft, faChevronRight } from '@fortawesome/pro-solid-svg-icons';\n\nimport { cn } from '@verbb/plugin-kit-react/utils';\nimport { Button, buttonVariants } from '@verbb/plugin-kit-react/components';\n\nfunction Calendar({\n    className,\n    classNames,\n    showOutsideDays = true,\n    captionLayout = 'label',\n    buttonVariant = 'none',\n    locale,\n    formatters,\n    components,\n    ...props\n}: ComponentProps<typeof DayPicker> & {\n    buttonVariant?: ComponentProps<typeof Button>['variant']\n}) {\n    const defaultClassNames = getDefaultClassNames();\n    return (\n        <DayPicker\n            showOutsideDays={showOutsideDays}\n            className={cn(\n                'bg-background group/calendar',\n                'p-2',\n                '[--cell-radius:100%] [--cell-size:--spacing(7)]',\n                '[[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',\n\n                // RTL support styles\n                String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n                String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n\n                className,\n            )}\n            captionLayout={captionLayout}\n            locale={locale}\n            formatters={{\n                formatMonthDropdown: (date) => { return date.toLocaleString(locale?.code, { month: 'short' }); },\n                ...formatters,\n            }}\n            classNames={{\n                root: cn(\n                    'w-fit',\n                    defaultClassNames.root,\n                ),\n                months: cn(\n                    'flex gap-4 flex-col md:flex-row relative',\n                    defaultClassNames.months,\n                ),\n                month: cn(\n                    'flex flex-col w-full gap-2',\n                    defaultClassNames.month,\n                ),\n                nav: cn(\n                    'flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between',\n                    defaultClassNames.nav,\n                ),\n                'button_previous': cn(\n                    buttonVariants({ variant: buttonVariant, size: 'none' }),\n                    'cursor-pointer rounded-sm',\n                    'p-2!',\n                    '[&>svg]:size-3',\n                    defaultClassNames.button_previous,\n                ),\n                'button_next': cn(\n                    buttonVariants({ variant: buttonVariant, size: 'none' }),\n                    'cursor-pointer rounded-sm',\n                    'p-2!',\n                    '[&>svg]:size-3',\n                    defaultClassNames.button_next,\n                ),\n                'month_caption': cn(\n                    'flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)',\n                    defaultClassNames.month_caption,\n                ),\n                dropdowns: cn(\n                    'w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5',\n                    defaultClassNames.dropdowns,\n                ),\n                'dropdown_root': cn(\n                    'relative cn-calendar-dropdown-root rounded-(--cell-radius)',\n                    defaultClassNames.dropdown_root,\n                ),\n                dropdown: cn(\n                    'absolute bg-white inset-0 opacity-0',\n                    defaultClassNames.dropdown,\n                ),\n                'caption_label': cn(\n                    'select-none font-medium',\n                    captionLayout === 'label' ? 'text-[13px]' : [\n                        'cn-calendar-caption-label',\n                        'rounded-(--cell-radius)',\n                        'flex items-center gap-1 text-[13px]',\n                        '[&>svg]:text-slate-800',\n                        '[&>svg]:size-2.5',\n                    ].join(' '),\n                    defaultClassNames.caption_label,\n                ),\n                table: 'w-full border-collapse',\n                weekdays: cn(\n                    'flex',\n                    defaultClassNames.weekdays,\n                ),\n                weekday: cn(\n                    'text-gray-500 rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none',\n                    defaultClassNames.weekday,\n                ),\n                week: cn(\n                    'flex w-full mt-2',\n                    defaultClassNames.week,\n                ),\n                'week_number_header': cn(\n                    'select-none w-(--cell-size)',\n                    defaultClassNames.week_number_header,\n                ),\n                'week_number': cn(\n                    'text-[0.8rem]',\n                    'select-none',\n                    'text-gray-500',\n                    defaultClassNames.week_number,\n                ),\n                day: cn(\n                    'relative w-full h-full p-0 text-center group/day aspect-square select-none',\n                    defaultClassNames.day,\n                ),\n                'range_start': cn(\n                    defaultClassNames.range_start,\n                ),\n                'range_middle': cn(\n                    defaultClassNames.range_middle,\n                ),\n                'range_end': cn(\n                    defaultClassNames.range_end,\n                ),\n                today: cn(\n                    defaultClassNames.today,\n                ),\n                outside: cn(\n                    'opacity-60',\n                    defaultClassNames.outside,\n                ),\n                disabled: cn(\n                    'opacity-40',\n                    defaultClassNames.disabled,\n                ),\n                hidden: cn(\n                    'invisible',\n                    defaultClassNames.hidden,\n                ),\n                ...classNames,\n            }}\n            components={{\n                Root: ({ className, rootRef, ...props }) => {\n                    return (\n                        <div\n                            data-slot=\"calendar\"\n                            ref={rootRef}\n                            className={cn(className)}\n                            {...props}\n                        />\n                    );\n                },\n                Chevron: ({ className, orientation, ...props }) => {\n                    if (orientation === 'left') {\n                        return (\n                            <FontAwesomeIcon icon={faChevronLeft} className={cn('cn-rtl-flip size-4', className)} {...props} />\n                        );\n                    }\n                    if (orientation === 'right') {\n                        return (\n                            <FontAwesomeIcon icon={faChevronRight} className={cn('cn-rtl-flip size-4', className)} {...props} />\n                        );\n                    }\n                    return (\n                        <FontAwesomeIcon icon={faChevronDown} className={cn('size-4', className)} {...props} />\n                    );\n                },\n                DayButton: ({ ...props }) => {\n                    return (\n                        // eslint-disable-next-line no-use-before-define\n                        <CalendarDayButton locale={locale} {...props} />\n                    );\n                },\n                WeekNumber: ({ children, ...props }) => {\n                    return (\n                        <td {...props}>\n                            <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                                {children}\n                            </div>\n                        </td>\n                    );\n                },\n                ...components,\n            }}\n            {...props}\n        />\n    );\n}\n\nfunction CalendarDayButton({\n    className,\n    day,\n    modifiers,\n    locale,\n    ...props\n}: ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {\n    const defaultClassNames = getDefaultClassNames();\n    const ref = useRef<HTMLButtonElement>(null);\n\n    useEffect(() => {\n        if (modifiers.focused) { ref.current?.focus(); }\n    }, [modifiers.focused]);\n\n    return (\n        <Button\n            ref={ref}\n            variant=\"none\"\n            size=\"none\"\n            data-today={modifiers.today}\n            data-day={day.date.toLocaleDateString(locale?.code)}\n            data-selected-single={\n                modifiers.selected &&\n                !modifiers.range_start &&\n                !modifiers.range_end &&\n                !modifiers.range_middle\n            }\n            data-range-start={modifiers.range_start}\n            data-range-end={modifiers.range_end}\n            data-range-middle={modifiers.range_middle}\n            className={cn(\n                'relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal',\n                'rounded-none transition-none',\n\n                'data-[selected-single=true]:bg-gray-200',\n                'data-[selected-single=true]:rounded-(--cell-radius)',\n                'data-[range-middle=true]:bg-gray-200',\n                'data-[range-start=true]:bg-gray-200',\n                'data-[range-end=true]:bg-gray-200',\n\n                'data-[today=true]:after:absolute',\n                'data-[today=true]:after:w-full',\n                'data-[today=true]:after:h-full',\n                'data-[today=true]:after:m-2',\n                'data-[today=true]:after:-z-0',\n                'data-[today=true]:after:isolate',\n                'data-[today=true]:after:border',\n                'data-[today=true]:after:border-blue-500',\n                'data-[today=true]:after:rounded-(--cell-radius)',\n\n                'data-[range-start=true]:data-[range-end=true]:rounded-(--cell-radius)',\n                'data-[range-start=true]:data-[range-end=false]:rounded-l-(--cell-radius)',\n                'data-[range-middle=true]:rounded-none',\n                'data-[range-start=false]:data-[range-end=true]:rounded-r-(--cell-radius)',\n\n                '[&>span]:text-xs [&>span]:opacity-70',\n\n                defaultClassNames.day,\n\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nexport { Calendar, CalendarDayButton };\n"],"mappings":";;;;;;;;;;AAeA,SAAS,SAAS,EACd,WACA,YACA,kBAAkB,MAClB,gBAAgB,SAChB,gBAAgB,QAChB,QACA,YACA,YACA,GAAG,SAGJ;CACC,MAAM,oBAAoB,sBAAsB;AAChD,QACI,oBAAC,WAAD;EACqB;EACjB,WAAW,GACP,gCACA,OACA,mDACA,8FAGA,OAAO,GAAG,6CACV,OAAO,GAAG,iDAEV,UACH;EACc;EACP;EACR,YAAY;GACR,sBAAsB,SAAS;AAAE,WAAO,KAAK,eAAe,QAAQ,MAAM,EAAE,OAAO,SAAS,CAAC;;GAC7F,GAAG;GACN;EACD,YAAY;GACR,MAAM,GACF,SACA,kBAAkB,KACrB;GACD,QAAQ,GACJ,4CACA,kBAAkB,OACrB;GACD,OAAO,GACH,8BACA,kBAAkB,MACrB;GACD,KAAK,GACD,2EACA,kBAAkB,IACrB;GACD,mBAAmB,GACf,eAAe;IAAE,SAAS;IAAe,MAAM;IAAQ,CAAC,EACxD,6BACA,QACA,kBACA,kBAAkB,gBACrB;GACD,eAAe,GACX,eAAe;IAAE,SAAS;IAAe,MAAM;IAAQ,CAAC,EACxD,6BACA,QACA,kBACA,kBAAkB,YACrB;GACD,iBAAiB,GACb,4EACA,kBAAkB,cACrB;GACD,WAAW,GACP,uFACA,kBAAkB,UACrB;GACD,iBAAiB,GACb,8DACA,kBAAkB,cACrB;GACD,UAAU,GACN,uCACA,kBAAkB,SACrB;GACD,iBAAiB,GACb,2BACA,kBAAkB,UAAU,gBAAgB;IACxC;IACA;IACA;IACA;IACA;IACH,CAAC,KAAK,IAAI,EACX,kBAAkB,cACrB;GACD,OAAO;GACP,UAAU,GACN,QACA,kBAAkB,SACrB;GACD,SAAS,GACL,sFACA,kBAAkB,QACrB;GACD,MAAM,GACF,oBACA,kBAAkB,KACrB;GACD,sBAAsB,GAClB,+BACA,kBAAkB,mBACrB;GACD,eAAe,GACX,iBACA,eACA,iBACA,kBAAkB,YACrB;GACD,KAAK,GACD,8EACA,kBAAkB,IACrB;GACD,eAAe,GACX,kBAAkB,YACrB;GACD,gBAAgB,GACZ,kBAAkB,aACrB;GACD,aAAa,GACT,kBAAkB,UACrB;GACD,OAAO,GACH,kBAAkB,MACrB;GACD,SAAS,GACL,cACA,kBAAkB,QACrB;GACD,UAAU,GACN,cACA,kBAAkB,SACrB;GACD,QAAQ,GACJ,aACA,kBAAkB,OACrB;GACD,GAAG;GACN;EACD,YAAY;GACR,OAAO,EAAE,WAAW,SAAS,GAAG,YAAY;AACxC,WACI,oBAAC,OAAD;KACI,aAAU;KACV,KAAK;KACL,WAAW,GAAG,UAAU;KACxB,GAAI;KACN,CAAA;;GAGV,UAAU,EAAE,WAAW,aAAa,GAAG,YAAY;AAC/C,QAAI,gBAAgB,OAChB,QACI,oBAAC,iBAAD;KAAiB,MAAM;KAAe,WAAW,GAAG,sBAAsB,UAAU;KAAE,GAAI;KAAS,CAAA;AAG3G,QAAI,gBAAgB,QAChB,QACI,oBAAC,iBAAD;KAAiB,MAAM;KAAgB,WAAW,GAAG,sBAAsB,UAAU;KAAE,GAAI;KAAS,CAAA;AAG5G,WACI,oBAAC,iBAAD;KAAiB,MAAM;KAAe,WAAW,GAAG,UAAU,UAAU;KAAE,GAAI;KAAS,CAAA;;GAG/F,YAAY,EAAE,GAAG,YAAY;AACzB,WAEI,oBAAC,mBAAD;KAA2B;KAAQ,GAAI;KAAS,CAAA;;GAGxD,aAAa,EAAE,UAAU,GAAG,YAAY;AACpC,WACI,oBAAC,MAAD;KAAI,GAAI;eACJ,oBAAC,OAAD;MAAK,WAAU;MACV;MACC,CAAA;KACL,CAAA;;GAGb,GAAG;GACN;EACD,GAAI;EACN,CAAA;;AAIV,SAAS,kBAAkB,EACvB,WACA,KACA,WACA,QACA,GAAG,SAC6D;CAChE,MAAM,oBAAoB,sBAAsB;CAChD,MAAM,MAAM,OAA0B,KAAK;AAE3C,iBAAgB;AACZ,MAAI,UAAU,QAAW,KAAI,SAAS,OAAO;IAC9C,CAAC,UAAU,QAAQ,CAAC;AAEvB,QACI,oBAAC,QAAD;EACS;EACL,SAAQ;EACR,MAAK;EACL,cAAY,UAAU;EACtB,YAAU,IAAI,KAAK,mBAAmB,QAAQ,KAAK;EACnD,wBACI,UAAU,YACV,CAAC,UAAU,eACX,CAAC,UAAU,aACX,CAAC,UAAU;EAEf,oBAAkB,UAAU;EAC5B,kBAAgB,UAAU;EAC1B,qBAAmB,UAAU;EAC7B,WAAW,GACP,kIACA,gCAEA,2CACA,uDACA,wCACA,uCACA,qCAEA,oCACA,kCACA,kCACA,+BACA,gCACA,mCACA,kCACA,2CACA,mDAEA,yEACA,4EACA,yCACA,4EAEA,wCAEA,kBAAkB,KAElB,UACH;EACD,GAAI;EACN,CAAA"}
+{"version":3,"file":"Calendar.js","names":[],"sources":["../../src/components/Calendar.tsx"],"sourcesContent":["import React from 'react';\nimport { createPluginKitComponent } from '../utils/create-plugin-kit-component.js';\nimport {\n    PkCalendar,\n    type PkCalendarDayContent,\n    type PkCalendarFirstDayOfWeek,\n    type PkCalendarMode,\n    type PkCalendarPageBy,\n    type PkCalendarSize,\n    type PkCalendarView,\n} from '@verbb/plugin-kit-web/components/calendar/pk-calendar.js';\n\n/** React facade over `<pk-calendar>`. Behavior and styles live in the web component. */\nexport const PkCalendarElement = createPluginKitComponent({\n    tagName: 'pk-calendar',\n    elementClass: PkCalendar,\n    react: React,\n    events: {\n        onInput: 'input',\n        onChange: 'change',\n        onPkFocusDay: 'pk-focus-day',\n        onPkViewChange: 'pk-view-change',\n    },\n});\n\nexport const Calendar = PkCalendarElement;\nexport type CalendarProps = React.ComponentProps<typeof PkCalendarElement>;\nexport type {\n    PkCalendarDayContent,\n    PkCalendarFirstDayOfWeek,\n    PkCalendarMode,\n    PkCalendarPageBy,\n    PkCalendarSize,\n    PkCalendarView,\n};\n"],"mappings":";;;;;AAaA,IAAa,oBAAoB,yBAAyB;CACtD,SAAS;CACT,cAAc;CACd,OAAO;CACP,QAAQ;EACJ,SAAS;EACT,UAAU;EACV,cAAc;EACd,gBAAgB;EACnB;CACJ,CAAC;AAEF,IAAa,WAAW"}

package/dist/components/Checkbox.d.ts

@@ -1,5 +1,28 @@
-import { ComponentProps } from 'react';
-import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';
-declare function Checkbox({ className, ...props }: ComponentProps<typeof CheckboxPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
-export { Checkbox };
+import { default as React } from 'react';
+import { PkCheckbox } from '@verbb/plugin-kit-web/components/checkbox/pk-checkbox.js';
+declare const PkCheckboxElement: import('@lit/react').ReactWebComponent<PkCheckbox, {
+    onPkChange: string;
+    onChange: string;
+}>;
+export type CheckboxProps = Omit<React.ComponentProps<typeof PkCheckboxElement>, 'checkboxValue'> & {
+    /** Controlled checked state. Omit for uncontrolled. */
+    checked?: boolean;
+    /**
+     * Initial checked state when uncontrolled.
+     * Mapped to `checked` on first paint — `pk-checkbox` only reads `default-checked` on form reset.
+     */
+    defaultChecked?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    required?: boolean;
+    name?: string;
+    value?: string;
+    'data-state'?: 'focus-visible';
+    /** Controlled checked updates — unwraps `pk-change` `detail.checked`. */
+    onCheckedChange?: (checked: boolean) => void;
+};
+/** React facade over `<pk-checkbox>`. Behavior and styles live in the web component. */
+export declare function Checkbox({ children, checked, defaultChecked, indeterminate, disabled, invalid, required, value, 'data-state': dataState, onCheckedChange, onPkChange, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export { PkCheckboxElement };
 //# sourceMappingURL=Checkbox.d.ts.map

package/dist/components/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAIxE,iBAAS,QAAQ,CAAC,EACd,SAAS,EACT,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,2CAqD/C;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,0DAA0D,CAAC;AAItF,QAAA,MAAM,iBAAiB;;;EAQrB,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,EAAE,eAAe,CAAC,GAAG;IAChG,uDAAuD;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,eAAe,CAAC;IAC/B,yEAAyE;IACzE,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF,wFAAwF;AACxF,wBAAgB,QAAQ,CAAC,EACrB,QAAQ,EACR,OAAO,EACP,cAAc,EACd,aAAqB,EACrB,QAAgB,EAChB,OAAe,EACf,QAAgB,EAChB,KAAY,EACZ,YAAY,EAAE,SAAS,EACvB,eAAe,EACf,UAAU,EACV,GAAG,KAAK,EACX,EAAE,aAAa,2CAkCf;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/components/Checkbox.js

@@ -1,41 +1,44 @@
-import { cn } from "../utils/classes.js";
-import "../utils/index.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
+import { createPluginKitComponent } from "../utils/create-plugin-kit-component.js";
+import { readPkCheckedDetail } from "../utils/pk-change.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+import { PkCheckbox } from "@verbb/plugin-kit-web/components/checkbox/pk-checkbox.js";
 //#region src/components/Checkbox.tsx
-function Checkbox({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Checkbox$1.Root, {
-		"data-slot": "checkbox",
-		className: cn("peer group/checkbox flex items-center justify-center cursor-pointer shrink-0 rounded-sm outline-none border", "size-4 border-[#c0cbd9]", "focus-visible:border-sky-600 focus-visible:shadow-[0_0_0_1px_var(--color-sky-600),0_0_4px_0_hsl(from_var(--color-sky-600)_h_s_l/0.7)]", "aria-invalid:border-rose-600 aria-invalid:focus-visible:!shadow-[0_0_0_1px_var(--color-rose-600),0_0_4px_0_hsl(from_var(--color-rose-600)_h_s_l/0.7)]", "disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
+var PkCheckboxElement = createPluginKitComponent({
+	tagName: "pk-checkbox",
+	elementClass: PkCheckbox,
+	react: React,
+	events: {
+		onPkChange: "pk-change",
+		onChange: "change"
+	}
+});
+/** React facade over `<pk-checkbox>`. Behavior and styles live in the web component. */
+function Checkbox({ children, checked, defaultChecked, indeterminate = false, disabled = false, invalid = false, required = false, value = "on", "data-state": dataState, onCheckedChange, onPkChange, ...props }) {
+	const [uncontrolledChecked, setUncontrolledChecked] = React.useState(Boolean(defaultChecked));
+	const isControlled = checked !== void 0;
+	const resolvedChecked = isControlled ? checked : uncontrolledChecked;
+	const handlePkChange = (event) => {
+		const next = readPkCheckedDetail(event);
+		if (!isControlled) setUncontrolledChecked(next);
+		onPkChange?.(event);
+		onCheckedChange?.(next);
+	};
+	return /* @__PURE__ */ jsx(PkCheckboxElement, {
+		checked: resolvedChecked,
+		defaultChecked,
+		indeterminate,
+		disabled,
+		invalid,
+		required,
+		checkboxValue: value,
+		...dataState ? { "data-state": dataState } : {},
+		onPkChange: handlePkChange,
 		...props,
-		children: /* @__PURE__ */ jsxs(Checkbox$1.Indicator, {
-			"data-slot": "checkbox-indicator",
-			className: cn("flex items-center justify-center", "size-[14px] text-current"),
-			children: [/* @__PURE__ */ jsx("svg", {
-				xmlns: "http://www.w3.org/2000/svg",
-				role: "img",
-				"aria-hidden": "true",
-				viewBox: "0 0 640 640",
-				className: "size-[14px] translate-y-[1px] scale-[1.2] group-data-[indeterminate]/checkbox:hidden",
-				children: /* @__PURE__ */ jsx("path", {
-					fill: "currentColor",
-					d: "M557.5 192L534.9 214.6L278.9 470.6C266.4 483.1 246.1 483.1 233.6 470.6L105.6 342.6L83 320L128.3 274.7C129.6 276 172.3 318.7 256.3 402.7L489.7 169.3L512.3 146.7L557.6 192z"
-				})
-			}), /* @__PURE__ */ jsx("svg", {
-				xmlns: "http://www.w3.org/2000/svg",
-				role: "img",
-				"aria-hidden": "true",
-				viewBox: "0 0 640 640",
-				className: "hidden size-[12px] group-data-[indeterminate]/checkbox:block",
-				children: /* @__PURE__ */ jsx("path", {
-					fill: "currentColor",
-					d: "M96 352V288H544V352H96z"
-				})
-			})]
-		})
+		children
 	});
 }
 //#endregion
-export { Checkbox };
+export { Checkbox, PkCheckboxElement };
 
 //# sourceMappingURL=Checkbox.js.map

package/dist/components/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":[],"sources":["../../src/components/Checkbox.tsx"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';\n\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\nfunction Checkbox({\n    className,\n    ...props\n}: ComponentProps<typeof CheckboxPrimitive.Root>) {\n    return (\n        <CheckboxPrimitive.Root\n            data-slot=\"checkbox\"\n            className={cn(\n                // Reset\n                'peer group/checkbox flex items-center justify-center cursor-pointer shrink-0 rounded-sm outline-none border',\n\n                // Themes\n                'size-4 border-[#c0cbd9]',\n\n                // States\n                'focus-visible:border-sky-600 focus-visible:shadow-[0_0_0_1px_var(--color-sky-600),0_0_4px_0_hsl(from_var(--color-sky-600)_h_s_l/0.7)]',\n                'aria-invalid:border-rose-600 aria-invalid:focus-visible:!shadow-[0_0_0_1px_var(--color-rose-600),0_0_4px_0_hsl(from_var(--color-rose-600)_h_s_l/0.7)]',\n\n                'disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50',\n\n                // Custom\n                className,\n            )}\n            {...props}\n        >\n            <CheckboxPrimitive.Indicator\n                data-slot=\"checkbox-indicator\"\n                className={cn(\n                    // Reset\n                    'flex items-center justify-center',\n\n                    // Themes\n                    'size-[14px] text-current',\n                )}\n            >\n                <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    role=\"img\"\n                    aria-hidden=\"true\"\n                    viewBox=\"0 0 640 640\"\n                    className=\"size-[14px] translate-y-[1px] scale-[1.2] group-data-[indeterminate]/checkbox:hidden\"\n                >\n                    <path fill=\"currentColor\" d=\"M557.5 192L534.9 214.6L278.9 470.6C266.4 483.1 246.1 483.1 233.6 470.6L105.6 342.6L83 320L128.3 274.7C129.6 276 172.3 318.7 256.3 402.7L489.7 169.3L512.3 146.7L557.6 192z\" />\n                </svg>\n                <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    role=\"img\"\n                    aria-hidden=\"true\"\n                    viewBox=\"0 0 640 640\"\n                    className=\"hidden size-[12px] group-data-[indeterminate]/checkbox:block\"\n                >\n                    <path fill=\"currentColor\" d=\"M96 352V288H544V352H96z\" />\n                </svg>\n            </CheckboxPrimitive.Indicator>\n        </CheckboxPrimitive.Root>\n    );\n};\n\nexport { Checkbox };\n"],"mappings":";;;;;AAKA,SAAS,SAAS,EACd,WACA,GAAG,SAC2C;AAC9C,QACI,oBAAC,WAAkB,MAAnB;EACI,aAAU;EACV,WAAW,GAEP,+GAGA,2BAGA,yIACA,yJAEA,6GAGA,UACH;EACD,GAAI;YAEJ,qBAAC,WAAkB,WAAnB;GACI,aAAU;GACV,WAAW,GAEP,oCAGA,2BACH;aARL,CAUI,oBAAC,OAAD;IACI,OAAM;IACN,MAAK;IACL,eAAY;IACZ,SAAQ;IACR,WAAU;cAEV,oBAAC,QAAD;KAAM,MAAK;KAAe,GAAE;KAA+K,CAAA;IACzM,CAAA,EACN,oBAAC,OAAD;IACI,OAAM;IACN,MAAK;IACL,eAAY;IACZ,SAAQ;IACR,WAAU;cAEV,oBAAC,QAAD;KAAM,MAAK;KAAe,GAAE;KAA4B,CAAA;IACtD,CAAA,CACoB;;EACT,CAAA"}
+{"version":3,"file":"Checkbox.js","names":[],"sources":["../../src/components/Checkbox.tsx"],"sourcesContent":["import React from 'react';\nimport { createPluginKitComponent } from '../utils/create-plugin-kit-component.js';\nimport { PkCheckbox } from '@verbb/plugin-kit-web/components/checkbox/pk-checkbox.js';\n\nimport { readPkCheckedDetail } from '../utils/pk-change.js';\n\nconst PkCheckboxElement = createPluginKitComponent({\n    tagName: 'pk-checkbox',\n    elementClass: PkCheckbox,\n    react: React,\n    events: {\n        onPkChange: 'pk-change',\n        onChange: 'change',\n    },\n});\n\nexport type CheckboxProps = Omit<React.ComponentProps<typeof PkCheckboxElement>, 'checkboxValue'> & {\n    /** Controlled checked state. Omit for uncontrolled. */\n    checked?: boolean;\n    /**\n     * Initial checked state when uncontrolled.\n     * Mapped to `checked` on first paint — `pk-checkbox` only reads `default-checked` on form reset.\n     */\n    defaultChecked?: boolean;\n    indeterminate?: boolean;\n    disabled?: boolean;\n    invalid?: boolean;\n    required?: boolean;\n    name?: string;\n    value?: string;\n    'data-state'?: 'focus-visible';\n    /** Controlled checked updates — unwraps `pk-change` `detail.checked`. */\n    onCheckedChange?: (checked: boolean) => void;\n};\n\n/** React facade over `<pk-checkbox>`. Behavior and styles live in the web component. */\nexport function Checkbox({\n    children,\n    checked,\n    defaultChecked,\n    indeterminate = false,\n    disabled = false,\n    invalid = false,\n    required = false,\n    value = 'on',\n    'data-state': dataState,\n    onCheckedChange,\n    onPkChange,\n    ...props\n}: CheckboxProps) {\n    // Uncontrolled + defaultChecked: seed the WC `checked` prop once. Keep subsequent\n    // user toggles by not forcing a controlled `checked={false}` default (legacy Base UI habit).\n    const [uncontrolledChecked, setUncontrolledChecked] = React.useState(Boolean(defaultChecked));\n    const isControlled = checked !== undefined;\n    const resolvedChecked = isControlled ? checked : uncontrolledChecked;\n\n    const handlePkChange = (event: Event): void => {\n        const next = readPkCheckedDetail(event);\n\n        if (!isControlled) {\n            setUncontrolledChecked(next);\n        }\n\n        onPkChange?.(event as Parameters<NonNullable<CheckboxProps['onPkChange']>>[0]);\n        onCheckedChange?.(next);\n    };\n\n    return (\n        <PkCheckboxElement\n            checked={resolvedChecked}\n            defaultChecked={defaultChecked}\n            indeterminate={indeterminate}\n            disabled={disabled}\n            invalid={invalid}\n            required={required}\n            checkboxValue={value}\n            {...(dataState ? { 'data-state': dataState } : {})}\n            onPkChange={handlePkChange}\n            {...props}\n        >\n            {children}\n        </PkCheckboxElement>\n    );\n}\n\nexport { PkCheckboxElement };\n"],"mappings":";;;;;;AAMA,IAAM,oBAAoB,yBAAyB;CAC/C,SAAS;CACT,cAAc;CACd,OAAO;CACP,QAAQ;EACJ,YAAY;EACZ,UAAU;EACb;CACJ,CAAC;;AAsBF,SAAgB,SAAS,EACrB,UACA,SACA,gBACA,gBAAgB,OAChB,WAAW,OACX,UAAU,OACV,WAAW,OACX,QAAQ,MACR,cAAc,WACd,iBACA,YACA,GAAG,SACW;CAGd,MAAM,CAAC,qBAAqB,0BAA0B,MAAM,SAAS,QAAQ,eAAe,CAAC;CAC7F,MAAM,eAAe,YAAY,KAAA;CACjC,MAAM,kBAAkB,eAAe,UAAU;CAEjD,MAAM,kBAAkB,UAAuB;EAC3C,MAAM,OAAO,oBAAoB,MAAM;AAEvC,MAAI,CAAC,aACD,wBAAuB,KAAK;AAGhC,eAAa,MAAiE;AAC9E,oBAAkB,KAAK;;AAG3B,QACI,oBAAC,mBAAD;EACI,SAAS;EACO;EACD;EACL;EACD;EACC;EACV,eAAe;EACf,GAAK,YAAY,EAAE,cAAc,WAAW,GAAG,EAAE;EACjD,YAAY;EACZ,GAAI;EAEH;EACe,CAAA"}

package/dist/components/CheckboxInput.d.ts

@@ -1,14 +1,14 @@
-import { ComponentProps, ReactNode } from 'react';
-import { Checkbox } from './Checkbox';
-type CheckboxInputProps = Omit<ComponentProps<typeof Checkbox>, 'className' | 'children'> & {
+import { ReactNode } from 'react';
+import { CheckboxProps } from './Checkbox.js';
+export interface CheckboxInputProps extends Omit<CheckboxProps, 'children'> {
     label: ReactNode;
     description?: ReactNode;
     className?: string;
-    checkboxClassName?: string;
-    labelClassName?: string;
-    descriptionClassName?: string;
-};
-declare function CheckboxInput({ label, description, className, checkboxClassName, labelClassName, descriptionClassName, disabled, ...props }: CheckboxInputProps): import("react/jsx-runtime").JSX.Element;
-export { CheckboxInput };
-export type { CheckboxInputProps };
+}
+/**
+ * Convenience facade pairing `<pk-checkbox>` with a label + optional description, mirroring the
+ * `plugin-kit-react` `CheckboxInput`. Layout uses a plain wrapping `<label>` (no Tailwind) — the
+ * checkbox itself is styled inside the web component's shadow root.
+ */
+export declare function CheckboxInput({ label, description, className, disabled, ...props }: CheckboxInputProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CheckboxInput.d.ts.map

package/dist/components/CheckboxInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../src/components/CheckboxInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6CAA6C,CAAC;AAGvE,KAAK,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,EAAE,WAAW,GAAG,UAAU,CAAC,GAAG;IACxF,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;CACjC,CAAC;AAEF,iBAAS,aAAa,CAAC,EACnB,KAAK,EACL,WAAW,EACX,SAAS,EACT,iBAAiB,EACjB,cAAc,EACd,oBAAoB,EACpB,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,kBAAkB,2CA6BpB;AAED,OAAO,EAAE,aAAa,EAAE,CAAC;AACzB,YAAY,EAAE,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../src/components/CheckboxInput.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAE7D,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC;IACvE,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC1B,KAAK,EACL,WAAW,EACX,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,kBAAkB,2CA4BpB"}