@vetc-miniapp/ui-react 0.0.23 → 0.0.25

package/dist/components/bottom-sheet/BottomSheet.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * VETC BottomSheet — tokenized
+ * Figma: Sheet page — 16px top radius, handle bar, slide-up animation
+ */
+import { useEffect } from 'react';
+export function BottomSheet({ open, title, children, maskClosable = true, showHandle = true, maxHeight = '90vh', onClose, className = '', style, id, }) {
+    // Lock body scroll when open
+    useEffect(() => {
+        document.body.style.overflow = open ? 'hidden' : '';
+        return () => { document.body.style.overflow = ''; };
+    }, [open]);
+    if (!open)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "vetc-bottom-sheet-overlay", "aria-hidden": "true", onClick: () => maskClosable && onClose?.(), style: {
+                    position: 'fixed',
+                    inset: 0,
+                    backgroundColor: 'var(--vetc-sheet-overlay)',
+                    zIndex: 1000,
+                    animation: 'vetc-fade-in var(--vetc-transition-base)',
+                } }), _jsxs("div", { id: id, role: "dialog", "aria-modal": "true", className: `vetc-bottom-sheet ${className}`, style: {
+                    position: 'fixed',
+                    bottom: 0,
+                    left: 0,
+                    right: 0,
+                    backgroundColor: 'var(--vetc-sheet-bg)',
+                    borderRadius: `var(--vetc-sheet-radius) var(--vetc-sheet-radius) 0 0`,
+                    maxHeight,
+                    overflowY: 'auto',
+                    zIndex: 1001,
+                    fontFamily: 'var(--vetc-font-family)',
+                    animation: 'vetc-slide-up var(--vetc-transition-slow) cubic-bezier(0.32, 0.72, 0, 1)',
+                    ...style,
+                }, children: [showHandle && (_jsx("div", { style: { display: 'flex', justifyContent: 'center', paddingTop: 'var(--vetc-space-8)', paddingBottom: 'var(--vetc-space-4)' }, children: _jsx("div", { style: {
+                                width: 'var(--vetc-sheet-handle-width)',
+                                height: 'var(--vetc-sheet-handle-height)',
+                                borderRadius: 'var(--vetc-radius-pill)',
+                                backgroundColor: 'var(--vetc-sheet-handle-color)',
+                            } }) })), title && (_jsxs("div", { style: {
+                            padding: `var(--vetc-space-12) var(--vetc-sheet-padding)`,
+                            borderBottom: `1px solid var(--vetc-sheet-border)`,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                        }, children: [_jsx("span", { style: {
+                                    fontSize: 'var(--vetc-sheet-title-size)',
+                                    fontWeight: 'var(--vetc-sheet-title-weight)',
+                                    color: 'var(--vetc-sheet-title-color)',
+                                    lineHeight: 'var(--vetc-line-height-relaxed)',
+                                }, children: title }), onClose && (_jsx("button", { onClick: onClose, "aria-label": "\u0110\u00F3ng", style: {
+                                    background: 'none',
+                                    border: 'none',
+                                    cursor: 'pointer',
+                                    padding: 'var(--vetc-space-4)',
+                                    display: 'flex',
+                                    color: 'var(--vetc-color-icon-muted)',
+                                    borderRadius: 'var(--vetc-radius-pill)',
+                                    transition: 'background-color var(--vetc-transition-fast)',
+                                }, children: _jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M18 6L6 18M6 6L18 18", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) }))] })), _jsx("div", { style: { padding: 'var(--vetc-sheet-padding)' }, children: children })] }), _jsx("style", { children: `
+        @keyframes vetc-fade-in {
+          from { opacity: 0 }
+          to   { opacity: 1 }
+        }
+        @keyframes vetc-slide-up {
+          from { transform: translateY(100%) }
+          to   { transform: translateY(0) }
+        }
+      ` })] }));
+}
+export default BottomSheet;

package/dist/components/bottom-sheet/index.d.ts

@@ -0,0 +1,2 @@
+export { BottomSheet } from './BottomSheet';
+export type { BottomSheetProps } from './BottomSheet';

package/dist/components/bottom-sheet/index.js

@@ -0,0 +1 @@
+export { BottomSheet } from './BottomSheet';

package/dist/components/button/Button.d.ts

@@ -0,0 +1,32 @@
+/**
+ * VETC Button Component
+ * Figma: filled/outlined/elevated/ghost styles
+ * Large: h=48px, radius=12px, font=16px/600
+ * Small: h=32px, radius=8px,  font=14px/600
+ * style:   filled | outlined | elevated | ghost | danger | danger-outlined
+ * variant: brand (green) | neutral (gray-90)
+ */
+import React from 'react';
+export type ButtonStyle = 'filled' | 'outlined' | 'elevated' | 'ghost' | 'danger' | 'danger-outlined';
+export type ButtonVariant = 'brand' | 'neutral';
+export type ButtonSize = 'lg' | 'sm';
+export type ButtonShape = 'rounded' | 'pill';
+export interface ButtonProps {
+    style?: ButtonStyle;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    shape?: ButtonShape;
+    block?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    icon?: React.ReactNode;
+    iconRight?: React.ReactNode;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    children?: React.ReactNode;
+    htmlType?: 'button' | 'submit' | 'reset';
+    className?: string;
+    css?: React.CSSProperties;
+    id?: string;
+}
+export declare function Button({ style, variant, size, shape, block, disabled, loading, icon, iconRight, onClick, children, htmlType, className, css, id, }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export default Button;

package/dist/components/button/Button.js

@@ -0,0 +1,165 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * VETC Button Component
+ * Figma: filled/outlined/elevated/ghost styles
+ * Large: h=48px, radius=12px, font=16px/600
+ * Small: h=32px, radius=8px,  font=14px/600
+ * style:   filled | outlined | elevated | ghost | danger | danger-outlined
+ * variant: brand (green) | neutral (gray-90)
+ */
+import { useState } from 'react';
+const BRAND = {
+    filled: {
+        bg: 'var(--vetc-color-brand)',
+        bgHover: 'var(--vetc-color-brand-hover)',
+        bgActive: 'var(--vetc-color-brand-active)',
+        text: 'var(--vetc-white)',
+        border: 'transparent',
+        shadow: 'none',
+    },
+    outlined: {
+        bg: 'transparent',
+        bgHover: 'var(--vetc-green-02)',
+        bgActive: 'var(--vetc-green-05)',
+        text: 'var(--vetc-color-brand)',
+        border: 'var(--vetc-color-brand)',
+        shadow: 'none',
+    },
+    elevated: {
+        bg: 'var(--vetc-color-bg)',
+        bgHover: 'var(--vetc-color-bg-hover)',
+        bgActive: 'var(--vetc-color-bg-pressed)',
+        text: 'var(--vetc-color-brand)',
+        border: 'transparent',
+        shadow: 'var(--vetc-shadow-md)',
+    },
+    ghost: {
+        bg: 'transparent',
+        bgHover: 'var(--vetc-color-bg-hover)',
+        bgActive: 'var(--vetc-color-bg-pressed)',
+        text: 'var(--vetc-color-brand)',
+        border: 'transparent',
+        shadow: 'none',
+    },
+    danger: {
+        bg: 'var(--vetc-color-negative)',
+        bgHover: 'var(--vetc-red-60)',
+        bgActive: 'var(--vetc-red-60)',
+        text: 'var(--vetc-white)',
+        border: 'transparent',
+        shadow: 'none',
+    },
+    'danger-outlined': {
+        bg: 'transparent',
+        bgHover: 'var(--vetc-red-02)',
+        bgActive: 'var(--vetc-red-05)',
+        text: 'var(--vetc-color-negative)',
+        border: 'var(--vetc-color-negative)',
+        shadow: 'none',
+    },
+};
+const NEUTRAL = {
+    filled: {
+        bg: 'var(--vetc-gray-90)',
+        bgHover: 'var(--vetc-gray-80)',
+        bgActive: 'var(--vetc-gray-70)',
+        text: 'var(--vetc-white)',
+        border: 'transparent',
+        shadow: 'none',
+    },
+    outlined: {
+        bg: 'transparent',
+        bgHover: 'var(--vetc-gray-05)',
+        bgActive: 'var(--vetc-gray-10)',
+        text: 'var(--vetc-gray-90)',
+        border: 'var(--vetc-gray-90)',
+        shadow: 'none',
+    },
+    elevated: {
+        bg: 'var(--vetc-color-bg)',
+        bgHover: 'var(--vetc-color-bg-hover)',
+        bgActive: 'var(--vetc-color-bg-pressed)',
+        text: 'var(--vetc-color-text-primary)',
+        border: 'transparent',
+        shadow: 'var(--vetc-shadow-md)',
+    },
+    ghost: {
+        bg: 'transparent',
+        bgHover: 'var(--vetc-color-bg-hover)',
+        bgActive: 'var(--vetc-color-bg-pressed)',
+        text: 'var(--vetc-color-text-primary)',
+        border: 'transparent',
+        shadow: 'none',
+    },
+    // danger variants are semantic — variant (brand/neutral) has no effect
+    danger: {
+        bg: 'var(--vetc-color-negative)',
+        bgHover: 'var(--vetc-red-60)',
+        bgActive: 'var(--vetc-red-60)',
+        text: 'var(--vetc-white)',
+        border: 'transparent',
+        shadow: 'none',
+    },
+    'danger-outlined': {
+        bg: 'transparent',
+        bgHover: 'var(--vetc-red-02)',
+        bgActive: 'var(--vetc-red-05)',
+        text: 'var(--vetc-color-negative)',
+        border: 'var(--vetc-color-negative)',
+        shadow: 'none',
+    },
+};
+const LoadingSpinner = ({ color }) => (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", style: { animation: 'vetc-btn-spin 0.6s linear infinite', flexShrink: 0 }, "aria-hidden": "true", children: [_jsx("circle", { cx: "8", cy: "8", r: "6", stroke: color, strokeOpacity: "0.25", strokeWidth: "2" }), _jsx("path", { d: "M8 2a6 6 0 016 6", stroke: color, strokeWidth: "2", strokeLinecap: "round" })] }));
+export function Button({ style = 'filled', variant = 'brand', size = 'lg', shape = 'rounded', block = false, disabled = false, loading = false, icon, iconRight, onClick, children, htmlType = 'button', className = '', css, id, }) {
+    const [pressed, setPressed] = useState(false);
+    const [hovered, setHovered] = useState(false);
+    const tokens = (variant === 'neutral' ? NEUTRAL : BRAND)[style];
+    const isDisabled = disabled || loading;
+    const height = size === 'lg' ? 'var(--vetc-btn-height-lg)' : 'var(--vetc-btn-height-sm)';
+    const fontSize = size === 'lg' ? 'var(--vetc-btn-font-size-lg)' : 'var(--vetc-btn-font-size-sm)';
+    const paddingX = size === 'lg' ? 'var(--vetc-btn-padding-x-lg)' : 'var(--vetc-btn-padding-x-sm)';
+    const radius = shape === 'pill' ? 'var(--vetc-btn-radius-pill)'
+        : size === 'lg' ? 'var(--vetc-btn-radius-lg)'
+            : 'var(--vetc-btn-radius-sm)';
+    let bg = tokens.bg;
+    let border = tokens.border;
+    let shadow = tokens.shadow;
+    if (isDisabled) {
+        bg = 'var(--vetc-btn-disabled-bg)';
+        border = 'var(--vetc-btn-disabled-border)';
+        shadow = 'none';
+    }
+    else if (pressed) {
+        bg = tokens.bgActive;
+    }
+    else if (hovered) {
+        bg = tokens.bgHover;
+    }
+    const textColor = isDisabled ? 'var(--vetc-btn-disabled-text)' : tokens.text;
+    const spinnerColor = isDisabled ? 'var(--vetc-gray-30)' : tokens.text;
+    return (_jsxs(_Fragment, { children: [_jsxs("button", { id: id, type: htmlType, disabled: isDisabled, onClick: onClick, onMouseEnter: () => setHovered(true), onMouseLeave: () => { setHovered(false); setPressed(false); }, onMouseDown: () => setPressed(true), onMouseUp: () => setPressed(false), className: `vetc-btn vetc-btn--${style} vetc-btn--${variant} vetc-btn--${size} ${className}`, style: {
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    gap: 'var(--vetc-space-8)',
+                    height,
+                    width: block ? '100%' : undefined,
+                    paddingInline: paddingX,
+                    borderRadius: radius,
+                    border: `1px solid ${border}`,
+                    backgroundColor: bg,
+                    boxShadow: shadow,
+                    color: textColor,
+                    fontSize,
+                    fontWeight: 'var(--vetc-btn-font-weight)',
+                    fontFamily: 'var(--vetc-font-family)',
+                    lineHeight: 'var(--vetc-line-height-relaxed)',
+                    cursor: isDisabled ? 'not-allowed' : 'pointer',
+                    transition: 'background-color var(--vetc-transition-fast), box-shadow var(--vetc-transition-fast)',
+                    userSelect: 'none',
+                    outline: 'none',
+                    whiteSpace: 'nowrap',
+                    ...css,
+                }, children: [loading ? _jsx(LoadingSpinner, { color: spinnerColor }) : icon && _jsx("span", { style: { display: 'inline-flex', flexShrink: 0 }, children: icon }), children && _jsx("span", { children: children }), iconRight && !loading && _jsx("span", { style: { display: 'inline-flex', flexShrink: 0 }, children: iconRight })] }), _jsx("style", { children: `@keyframes vetc-btn-spin { to { transform: rotate(360deg); } }` })] }));
+}
+export default Button;

package/dist/components/button/index.d.ts

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { ButtonProps, ButtonStyle, ButtonVariant, ButtonSize, ButtonShape } from './Button';

package/dist/components/button/index.js

@@ -0,0 +1 @@
+export { Button } from './Button';

package/dist/components/button-group/ButtonGroup.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+export type ButtonGroupLayout = 'inline' | 'stacked';
+export type ButtonGroupVariant = 'bounding' | 'none';
+export interface ButtonGroupAction {
+    label: React.ReactNode;
+    onClick?: () => void;
+    loading?: boolean;
+    disabled?: boolean;
+}
+export interface ButtonGroupProps {
+    /** Primary action — brand filled, rightmost (inline) or bottom (stacked). Required. */
+    primary: ButtonGroupAction & {
+        /** danger = red filled style */
+        danger?: boolean;
+        /** Override primary button color. Default: brand */
+        variant?: 'brand' | 'neutral';
+    };
+    /** Secondary actions — neutral outlined. Max 2. */
+    secondary?: ButtonGroupAction[];
+    /** Optional content rendered above the button row */
+    content?: React.ReactNode;
+    /** inline: buttons side by side | stacked: buttons stacked vertically */
+    layout?: ButtonGroupLayout;
+    /** bounding: top border + background | none: no container styling */
+    variant?: ButtonGroupVariant;
+}
+export declare function ButtonGroup({ primary, secondary, content, layout, variant, }: ButtonGroupProps): import("react/jsx-runtime").JSX.Element;
+export default ButtonGroup;

package/dist/components/button-group/ButtonGroup.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../button';
+export function ButtonGroup({ primary, secondary = [], content, layout = 'inline', variant = 'none', }) {
+    const isInline = layout === 'inline';
+    const isBounding = variant === 'bounding';
+    const containerStyle = isBounding
+        ? {
+            backgroundColor: 'var(--vetc-btn-group-bg)',
+            borderTop: `1px solid var(--vetc-btn-group-border-color)`,
+            padding: 'var(--vetc-btn-group-padding)',
+            fontFamily: 'var(--vetc-font-family)',
+        }
+        : { fontFamily: 'var(--vetc-font-family)' };
+    const rowStyle = isInline
+        ? { display: 'flex', gap: 'var(--vetc-btn-group-gap)', alignItems: 'stretch' }
+        : { display: 'flex', flexDirection: 'column', gap: 'var(--vetc-btn-group-gap)' };
+    const secondaryBtns = secondary.map((action, i) => (_jsx(Button, { style: "outlined", variant: "neutral", block: !isInline, loading: action.loading, disabled: action.disabled, onClick: action.onClick, css: isInline ? { flex: 1 } : undefined, children: action.label }, i)));
+    const primaryBtn = (_jsx(Button, { style: primary.danger ? 'danger' : 'filled', variant: primary.variant ?? 'brand', block: !isInline, loading: primary.loading, disabled: primary.disabled, onClick: primary.onClick, css: isInline ? { flex: 1 } : undefined, children: primary.label }));
+    return (_jsxs("div", { style: containerStyle, children: [content && (_jsx("div", { style: { marginBottom: 'var(--vetc-btn-group-padding)' }, children: content })), _jsx("div", { style: rowStyle, children: isInline ? (_jsxs(_Fragment, { children: [secondaryBtns, primaryBtn] })) : (_jsxs(_Fragment, { children: [primaryBtn, secondaryBtns] })) })] }));
+}
+export default ButtonGroup;

package/dist/components/button-group/index.d.ts

@@ -0,0 +1,2 @@
+export { ButtonGroup } from './ButtonGroup';
+export type { ButtonGroupProps, ButtonGroupAction, ButtonGroupLayout, ButtonGroupVariant } from './ButtonGroup';

package/dist/components/button-group/index.js

@@ -0,0 +1 @@
+export { ButtonGroup } from './ButtonGroup';

package/dist/components/card/Card.d.ts

@@ -0,0 +1,18 @@
+/**
+ * VETC Card — tokenized
+ */
+import React from 'react';
+export type CardElevation = 'flat' | 'raised' | 'outlined';
+export interface CardProps {
+    elevation?: CardElevation;
+    title?: React.ReactNode;
+    extra?: React.ReactNode;
+    children?: React.ReactNode;
+    onClick?: () => void;
+    className?: string;
+    style?: React.CSSProperties;
+    bodyStyle?: React.CSSProperties;
+    id?: string;
+}
+export declare function Card({ elevation, title, extra, children, onClick, className, style, bodyStyle, id, }: CardProps): import("react/jsx-runtime").JSX.Element;
+export default Card;

package/dist/components/card/Card.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Card as AntCard } from 'antd';
+export function Card({ elevation = 'outlined', title, extra, children, onClick, className = '', style, bodyStyle, id, }) {
+    const shadowMap = {
+        flat: 'var(--vetc-shadow-none)',
+        raised: 'var(--vetc-card-shadow-raised)',
+        outlined: 'var(--vetc-shadow-none)',
+    };
+    const borderMap = {
+        flat: 'none',
+        raised: 'none',
+        outlined: `1px solid var(--vetc-card-border)`,
+    };
+    return (_jsx(AntCard, { id: id, title: title, extra: extra, onClick: onClick, className: `vetc-card vetc-card--${elevation} ${className}`, styles: {
+            body: {
+                padding: 'var(--vetc-card-padding)',
+                fontFamily: 'var(--vetc-font-family)',
+                ...bodyStyle,
+            },
+            header: title
+                ? { borderBottom: `1px solid var(--vetc-card-border)`, padding: `var(--vetc-space-12) var(--vetc-card-padding)` }
+                : undefined,
+        }, style: {
+            borderRadius: 'var(--vetc-card-radius)',
+            border: borderMap[elevation],
+            boxShadow: shadowMap[elevation],
+            cursor: onClick ? 'pointer' : 'default',
+            overflow: 'hidden',
+            backgroundColor: 'var(--vetc-card-bg)',
+            fontFamily: 'var(--vetc-font-family)',
+            transition: `box-shadow var(--vetc-transition-fast)`,
+            ...style,
+        }, children: children }));
+}
+export default Card;

package/dist/components/card/index.d.ts

@@ -0,0 +1,2 @@
+export { Card } from './Card';
+export type { CardProps, CardElevation } from './Card';

package/dist/components/card/index.js

@@ -0,0 +1 @@
+export { Card } from './Card';

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

@@ -0,0 +1,41 @@
+/**
+ * VETC Checkbox & CheckboxGroup
+ * Figma: size=20px, touch-area=48px, states: default/hover/pressed/selected/indeterminate/disabled
+ * variant: neutral (gray-90) | brand (green-40)
+ */
+import React from 'react';
+export type CheckboxVariant = 'neutral' | 'brand';
+export interface CheckboxProps {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    variant?: CheckboxVariant;
+    onChange?: (checked: boolean) => void;
+    value?: any;
+    id?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function Checkbox({ label, description, checked, defaultChecked, indeterminate, disabled, variant, onChange, value, id, className, style, }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export interface CheckboxOption {
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    value: any;
+    disabled?: boolean;
+}
+export interface CheckboxGroupProps {
+    options: CheckboxOption[];
+    value?: any[];
+    defaultValue?: any[];
+    direction?: 'horizontal' | 'vertical';
+    disabled?: boolean;
+    variant?: CheckboxVariant;
+    onChange?: (values: any[]) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function CheckboxGroup({ options, value, defaultValue, direction, disabled, variant, onChange, className, style, }: CheckboxGroupProps): import("react/jsx-runtime").JSX.Element;
+export default Checkbox;

package/dist/components/checkbox/Checkbox.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * VETC Checkbox & CheckboxGroup
+ * Figma: size=20px, touch-area=48px, states: default/hover/pressed/selected/indeterminate/disabled
+ * variant: neutral (gray-90) | brand (green-40)
+ */
+import { useState } from 'react';
+const CheckIcon = () => (_jsx("svg", { width: "12", height: "9", viewBox: "0 0 12 9", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M1 4L4.5 7.5L11 1", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const IndeterminateIcon = () => (_jsx("svg", { width: "10", height: "2", viewBox: "0 0 10 2", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M1 1H9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
+export function Checkbox({ label, description, checked, defaultChecked = false, indeterminate = false, disabled = false, variant = 'brand', onChange, value, id, className = '', style, }) {
+    const [internalChecked, setInternalChecked] = useState(defaultChecked);
+    const [hovered, setHovered] = useState(false);
+    const isControlled = checked !== undefined;
+    const isChecked = isControlled ? checked : internalChecked;
+    const isActive = isChecked || indeterminate;
+    const handleChange = () => {
+        if (disabled)
+            return;
+        const next = !isChecked;
+        if (!isControlled)
+            setInternalChecked(next);
+        onChange?.(next);
+    };
+    const accentColor = variant === 'brand'
+        ? 'var(--vetc-color-brand)'
+        : 'var(--vetc-gray-90)';
+    const accentHover = variant === 'brand'
+        ? 'var(--vetc-color-brand-hover)'
+        : 'var(--vetc-gray-70)';
+    let boxBg = 'transparent';
+    let boxBorder = disabled ? 'var(--vetc-color-border-disabled)' : hovered ? accentColor : 'var(--vetc-color-border)';
+    let iconColor = 'var(--vetc-white)';
+    if (isActive) {
+        boxBg = disabled ? 'var(--vetc-color-bg-disabled)' : accentColor;
+        boxBorder = disabled ? 'var(--vetc-color-border-disabled)' : hovered ? accentHover : accentColor;
+        iconColor = disabled ? 'var(--vetc-color-text-disabled)' : 'var(--vetc-white)';
+        if (disabled)
+            boxBg = 'var(--vetc-color-bg-disabled)';
+    }
+    return (_jsxs("label", { htmlFor: id, className: `vetc-checkbox ${className}`, onMouseEnter: () => !disabled && setHovered(true), onMouseLeave: () => setHovered(false), style: {
+            display: 'inline-flex',
+            alignItems: description ? 'flex-start' : 'center',
+            gap: 'var(--vetc-space-12)',
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            userSelect: 'none',
+            fontFamily: 'var(--vetc-font-family)',
+            ...style,
+        }, children: [_jsx("input", { id: id, type: "checkbox", checked: isChecked, disabled: disabled, value: value, onChange: handleChange, style: { position: 'absolute', opacity: 0, width: 0, height: 0, pointerEvents: 'none' }, "aria-checked": indeterminate ? 'mixed' : isChecked }), _jsxs("span", { "aria-hidden": "true", style: {
+                    width: '20px',
+                    height: '20px',
+                    flexShrink: 0,
+                    borderRadius: 'var(--vetc-radius-xs)',
+                    border: `1.5px solid ${boxBorder}`,
+                    backgroundColor: boxBg,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    transition: 'background-color var(--vetc-transition-fast), border-color var(--vetc-transition-fast)',
+                    color: iconColor,
+                    marginTop: description ? '2px' : 0,
+                }, children: [isChecked && !indeterminate && _jsx(CheckIcon, {}), indeterminate && _jsx(IndeterminateIcon, {})] }), (label || description) && (_jsxs("span", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--vetc-space-2)' }, children: [label && (_jsx("span", { style: {
+                            fontSize: 'var(--vetc-font-size-base)',
+                            fontWeight: 'var(--vetc-font-weight-regular)',
+                            lineHeight: 'var(--vetc-line-height-relaxed)',
+                            color: disabled ? 'var(--vetc-color-text-disabled)' : 'var(--vetc-color-text-primary)',
+                        }, children: label })), description && (_jsx("span", { style: {
+                            fontSize: 'var(--vetc-font-size-sm)',
+                            fontWeight: 'var(--vetc-font-weight-regular)',
+                            lineHeight: 'var(--vetc-line-height-relaxed)',
+                            color: disabled ? 'var(--vetc-color-text-disabled)' : 'var(--vetc-color-text-secondary)',
+                        }, children: description }))] }))] }));
+}
+export function CheckboxGroup({ options, value, defaultValue = [], direction = 'vertical', disabled = false, variant = 'brand', onChange, className = '', style, }) {
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const isControlled = value !== undefined;
+    const currentValue = isControlled ? value : internalValue;
+    const handleChange = (optValue, checked) => {
+        const next = checked
+            ? [...currentValue, optValue]
+            : currentValue.filter((v) => v !== optValue);
+        if (!isControlled)
+            setInternalValue(next);
+        onChange?.(next);
+    };
+    return (_jsx("div", { className: `vetc-checkbox-group ${className}`, style: {
+            display: 'flex',
+            flexDirection: direction === 'vertical' ? 'column' : 'row',
+            flexWrap: direction === 'horizontal' ? 'wrap' : undefined,
+            gap: direction === 'vertical' ? 'var(--vetc-space-12)' : 'var(--vetc-space-16)',
+            fontFamily: 'var(--vetc-font-family)',
+            ...style,
+        }, children: options.map((opt) => (_jsx(Checkbox, { label: opt.label, description: opt.description, checked: currentValue.includes(opt.value), disabled: opt.disabled ?? disabled, variant: variant, value: opt.value, onChange: (chk) => handleChange(opt.value, chk) }, String(opt.value)))) }));
+}
+export default Checkbox;

package/dist/components/checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export { Checkbox, CheckboxGroup } from './Checkbox';
+export type { CheckboxProps, CheckboxGroupProps, CheckboxOption, CheckboxVariant } from './Checkbox';

package/dist/components/checkbox/index.js

@@ -0,0 +1 @@
+export { Checkbox, CheckboxGroup } from './Checkbox';

package/dist/components/chip/Chip.d.ts

@@ -0,0 +1,24 @@
+/**
+ * VETC Chip / Tag — tokenized
+ * Figma: Chip page (7 types × 3 styles)
+ */
+import React from 'react';
+export type ChipStyle = 'filled' | 'outlined' | 'tinted';
+export type ChipType = 'default' | 'brand' | 'positive' | 'negative' | 'warning' | 'info';
+export type ChipShape = 'pill' | 'rounded';
+export interface ChipProps {
+    style?: ChipStyle;
+    type?: ChipType;
+    shape?: ChipShape;
+    size?: 'md' | 'sm';
+    icon?: React.ReactNode;
+    closable?: boolean;
+    onClose?: () => void;
+    onClick?: () => void;
+    children?: React.ReactNode;
+    className?: string;
+    css?: React.CSSProperties;
+    id?: string;
+}
+export declare function Chip({ style, type, shape, size, icon, closable, onClose, onClick, children, className, css, id, }: ChipProps): import("react/jsx-runtime").JSX.Element;
+export default Chip;