@kazee-ds/react 0.0.0-stage → 0.4.0

package/dist/types/ToggleButtonGroup.d.ts

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react';
+import type { ButtonSize } from './Button.js';
+import { ButtonGroupSeparator } from './ButtonGroup.js';
+interface Common {
+    label: string;
+    children: ReactNode;
+    size?: ButtonSize;
+    isDisabled?: boolean;
+    isDetached?: boolean;
+    fullWidth?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+    dir?: 'ltr' | 'rtl';
+    disallowEmptySelection?: boolean;
+}
+export type ToggleButtonGroupProps = Common & ({
+    selectionMode?: 'single';
+    value?: string | null;
+    defaultValue?: string | null;
+    onChange?: (value: string | null) => void;
+} | {
+    selectionMode: 'multiple';
+    value?: string[];
+    defaultValue?: string[];
+    onChange?: (value: string[]) => void;
+});
+declare function Root(props: ToggleButtonGroupProps): import("react").JSX.Element;
+export declare const ToggleButtonGroup: typeof Root & {
+    Separator: typeof ButtonGroupSeparator;
+};
+export {};

package/dist/types/ToggleGroup.d.ts

@@ -0,0 +1,33 @@
+import { type ReactNode } from 'react';
+import { type ToggleGroupItem, type ToggleGroupVariant } from './toggle-group-model.js';
+import type { ButtonSize } from './Button.js';
+export type { ToggleGroupItem, ToggleGroupMode, ToggleGroupVariant } from './toggle-group-model.js';
+interface ToggleGroupCommonProps {
+    label: string;
+    items: ToggleGroupItem[];
+    isDisabled?: boolean;
+    isIconOnly?: boolean;
+    renderIcon?: (item: ToggleGroupItem) => ReactNode;
+    disallowEmptySelection?: boolean;
+    variant?: ToggleGroupVariant;
+    size?: ButtonSize;
+    orientation?: 'horizontal' | 'vertical';
+    dir?: 'ltr' | 'rtl';
+}
+export type ToggleGroupProps = ToggleGroupCommonProps & ({
+    selectionMode?: 'single';
+    value?: string | null;
+    defaultValue?: string | null;
+    onChange?: (value: string | null) => void;
+} | {
+    selectionMode: 'multiple';
+    value?: string[];
+    defaultValue?: string[];
+    onChange?: (value: string[]) => void;
+});
+export declare function ToggleGroup(props: Extract<ToggleGroupProps, {
+    selectionMode: 'multiple';
+}>): ReactNode;
+export declare function ToggleGroup(props: Exclude<ToggleGroupProps, {
+    selectionMode: 'multiple';
+}>): ReactNode;

package/dist/types/Tooltip.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+import type { ButtonVariant, ButtonSize } from './Button.js';
+export interface TooltipProps {
+    triggerLabel: string;
+    text: string;
+    triggerContent?: ReactNode;
+    triggerIconOnly?: boolean;
+    triggerVariant?: ButtonVariant;
+    triggerSize?: ButtonSize;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    isDisabled?: boolean;
+    dir?: 'ltr' | 'rtl';
+}
+export declare function Tooltip({ triggerLabel, text, triggerContent, triggerIconOnly, triggerVariant, triggerSize, open, defaultOpen, onOpenChange, isDisabled, dir, }: TooltipProps): import("react").JSX.Element;

package/dist/types/chart-model.d.ts

@@ -0,0 +1,12 @@
+import type { ChartDatum } from './dashboard-types.js';
+export declare function chartModel(data: ChartDatum[]): {
+    items: {
+        x: number;
+        y: number;
+        id: string;
+        label: string;
+        value: number;
+    }[];
+    baseline: number;
+    barWidth: number;
+};

package/dist/types/dashboard-types.d.ts

@@ -0,0 +1,27 @@
+export interface NavigationItem {
+    id: string;
+    label: string;
+    href: string;
+    isDisabled?: boolean;
+}
+export interface BreadcrumbItem {
+    label: string;
+    href?: string;
+}
+export interface ChartDatum {
+    id: string;
+    label: string;
+    value: number;
+}
+export interface DropdownMenuItem {
+    id: string;
+    label: string;
+    isDisabled?: boolean;
+    tone?: 'default' | 'danger';
+    description?: string;
+    /** Display hint only; the application handles keyboard shortcuts. */
+    shortcut?: string;
+    section?: string;
+    separatorBefore?: boolean;
+    children?: DropdownMenuItem[];
+}

package/dist/types/data-table-types.d.ts

@@ -0,0 +1,13 @@
+export interface DataTableColumn {
+    id: string;
+    label: string;
+    sortable?: boolean;
+}
+export interface DataTableRow {
+    id: string;
+    cells: Record<string, string | number | null | undefined>;
+}
+export interface TableSort {
+    columnId: string;
+    direction: 'ascending' | 'descending';
+}

package/dist/types/date-range-model.d.ts

@@ -0,0 +1,69 @@
+export interface DateRange {
+    start: string;
+    end: string;
+}
+export interface DateRangePreset {
+    id: string;
+    label: string;
+    value: DateRange;
+}
+export interface DateRangeConstraints {
+    minDate?: string;
+    maxDate?: string;
+    minDays?: number;
+    maxDays?: number;
+    isDateUnavailable?: (date: string) => boolean;
+}
+export type DateRangeSize = 'sm' | 'md' | 'lg';
+export type DateRangeVariant = 'primary' | 'secondary' | 'outline';
+export interface DateRangeOptions extends DateRangeConstraints {
+    label: string;
+    defaultValue?: DateRange | null;
+    size?: DateRangeSize;
+    variant?: DateRangeVariant;
+    hideLabel?: boolean;
+    fullWidth?: boolean;
+    locale?: string;
+    dir?: 'ltr' | 'rtl';
+    visibleMonths?: 1 | 2;
+    weekStartsOn?: 0 | 1;
+    display?: 'popover' | 'inline';
+    showInputs?: boolean;
+    showMonthYearPicker?: boolean;
+    triggerDisplay?: 'text' | 'icon';
+    presets?: DateRangePreset[];
+    labels?: Partial<DateRangeLabels>;
+    formatRange?: (value: DateRange, locale: string) => string;
+    description?: string;
+    errorMessage?: string;
+    name?: string;
+    referenceDate?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+}
+export type DateRangeError = 'incomplete' | 'order' | 'bounds' | 'unavailable' | 'length';
+export interface DateRangeLabels {
+    title: string;
+    start: string;
+    end: string;
+    apply: string;
+    cancel: string;
+    clear: string;
+    previousMonth: string;
+    nextMonth: string;
+    presets: string;
+    placeholder: string;
+    incomplete: string;
+    order: string;
+    bounds: string;
+    unavailable: string;
+    length: string;
+    required: string;
+}
+export declare function dateRangeLabels(locale?: string): DateRangeLabels;
+export declare function validDate(value: string): boolean;
+export declare function asDate(value?: string): import("@internationalized/date").CalendarDate | undefined;
+export declare function currentDate(): string;
+export declare function rangeError(value: DateRange | null, constraints?: DateRangeConstraints): DateRangeError | null;
+export declare function rangeText(value: DateRange | null, locale?: string): string;
+export declare function createDateRangePresets(referenceDate?: string, locale?: string, weekStartsOn?: 0 | 1): DateRangePreset[];

package/dist/types/field.d.ts

@@ -0,0 +1,9 @@
+export interface FieldFeedbackProps {
+    description?: string;
+    errorMessage?: string;
+    isInvalid?: boolean;
+}
+export declare function useFeedback({ description, errorMessage, isInvalid }: FieldFeedbackProps): {
+    describedBy: string | undefined;
+    feedback: import("react").JSX.Element;
+};

package/dist/types/form-context.d.ts

@@ -0,0 +1,3 @@
+/** Application-owned errors, keyed by the Field name. Clear entries explicitly. */
+export type ValidationErrors = Readonly<Record<string, string | undefined>>;
+export declare const FormErrorsContext: import("react").Context<Readonly<Record<string, string | undefined>>>;

package/dist/types/icons.d.ts

@@ -0,0 +1,7 @@
+interface IconProps {
+    className?: string;
+}
+export declare function ChevronIcon({ className }: IconProps): import("react").JSX.Element;
+export declare function CheckIcon({ className }: IconProps): import("react").JSX.Element;
+export declare function CloseIcon({ className }: IconProps): import("react").JSX.Element;
+export {};

package/dist/types/index.d.ts

@@ -0,0 +1,83 @@
+export { Button } from './Button.js';
+export { ButtonGroup, ButtonGroupSeparator } from './ButtonGroup.js';
+export type { ButtonGroupProps } from './ButtonGroup.js';
+export { ToggleButton } from './ToggleButton.js';
+export type { ToggleButtonProps, ToggleButtonVariant, ToggleButtonRenderProps, } from './ToggleButton.js';
+export { ToggleButtonGroup } from './ToggleButtonGroup.js';
+export type { ToggleButtonGroupProps } from './ToggleButtonGroup.js';
+export type { ButtonPressEvent, ButtonProps, ButtonRenderProps, ButtonSize, ButtonVariant, } from './Button.js';
+export { Select } from './Select.js';
+export type { SelectOption, SelectProps, SelectSize, SelectVariant } from './Select.js';
+export { SelectGroup } from './SelectGroup.js';
+export type { SelectGroupProps } from './SelectGroup.js';
+export { Input } from './Input.js';
+export type { InputProps, InputSize, InputType, InputVariant, InputMode, InputEnterKeyHint, } from './Input.js';
+export { Textarea } from './Textarea.js';
+export type { TextareaProps } from './Textarea.js';
+export { Label } from './Label.js';
+export type { LabelProps } from './Label.js';
+export { Checkbox } from './Checkbox.js';
+export type { CheckboxProps } from './Checkbox.js';
+export { RadioGroup } from './RadioGroup.js';
+export type { RadioGroupProps } from './RadioGroup.js';
+export { Switch } from './Switch.js';
+export type { SwitchProps } from './Switch.js';
+export type { RadioOption } from './RadioGroup.js';
+export { Field } from './FieldComponent.js';
+export type { FieldProps, FieldControlProps, FieldRenderProps } from './FieldComponent.js';
+export { Form } from './Form.js';
+export type { FormProps } from './Form.js';
+export type { ValidationErrors } from './form-context.js';
+export { Listbox } from './Listbox.js';
+export type { ListboxProps } from './Listbox.js';
+export type { ListboxOption, ListboxSelectionMode } from './listbox-selection.js';
+export { NumberField } from './NumberField.js';
+export type { NumberFieldProps } from './NumberField.js';
+export { Card } from './Card.js';
+export type { CardProps } from './Card.js';
+export { Badge } from './Badge.js';
+export type { BadgeProps, BadgeTone } from './Badge.js';
+export { Skeleton } from './Skeleton.js';
+export type { SkeletonProps } from './Skeleton.js';
+export { Separator } from './Separator.js';
+export type { SeparatorProps } from './Separator.js';
+export { Tabs } from './Tabs.js';
+export type { TabsProps, TabItem, TabsVariant } from './Tabs.js';
+export { Pagination } from './Pagination.js';
+export type { PaginationProps } from './Pagination.js';
+export { Table } from './Table.js';
+export type { TableProps } from './Table.js';
+export { DataTable } from './DataTable.js';
+export type { DataTableProps } from './DataTable.js';
+export type { DataTableColumn, DataTableRow, TableSort } from './data-table-types.js';
+export { Alert } from './Alert.js';
+export type { AlertProps } from './Alert.js';
+export { Empty } from './Empty.js';
+export type { EmptyProps } from './Empty.js';
+export { Breadcrumb } from './Breadcrumb.js';
+export type { BreadcrumbProps } from './Breadcrumb.js';
+export { Sidebar } from './Sidebar.js';
+export type { SidebarProps } from './Sidebar.js';
+export { Chart } from './Chart.js';
+export type { ChartProps } from './Chart.js';
+export { Dialog } from './Dialog.js';
+export type { DialogProps } from './Dialog.js';
+export { DropdownMenu } from './DropdownMenu.js';
+export type { DropdownMenuProps } from './DropdownMenu.js';
+export { Popover } from './Popover.js';
+export type { PopoverProps } from './Popover.js';
+export { Tooltip } from './Tooltip.js';
+export type { TooltipProps } from './Tooltip.js';
+export type { NavigationItem, BreadcrumbItem, ChartDatum, DropdownMenuItem, } from './dashboard-types.js';
+export { Spinner } from './Spinner.js';
+export type { SpinnerProps, SpinnerSize, SpinnerColor } from './Spinner.js';
+export { Combobox } from './Combobox.js';
+export type { ComboboxProps } from './Combobox.js';
+export type { MenuSelectionMode, MenuPlacement, DialogSize, DialogPlacement, DialogScroll, DialogBackdrop, } from './overlay-model.js';
+export { ToggleGroup } from './ToggleGroup.js';
+export type { ToggleGroupProps, ToggleGroupItem, ToggleGroupMode, ToggleGroupVariant, } from './ToggleGroup.js';
+export { DateRangePicker } from './DateRangePicker.js';
+export type { DateRangePickerProps } from './DateRangePicker.js';
+export { createDateRangePresets } from './date-range-model.js';
+export { rangeText as formatDateRange } from './date-range-model.js';
+export type { DateRange, DateRangePreset, DateRangeLabels, DateRangeSize, DateRangeVariant, } from './date-range-model.js';

package/dist/types/listbox-selection.d.ts

@@ -0,0 +1,8 @@
+export interface ListboxOption {
+    id: string;
+    label: string;
+    isDisabled?: boolean;
+}
+export type ListboxSelectionMode = 'single' | 'multiple';
+/** Stable option order, unique enabled IDs, and at most one ID in single mode. */
+export declare function listboxSelection(value: readonly string[], options: ListboxOption[], mode: ListboxSelectionMode): string[];

package/dist/types/overlay-model.d.ts

@@ -0,0 +1,14 @@
+import type { DropdownMenuItem } from './dashboard-types.js';
+export type MenuSelectionMode = 'none' | 'single' | 'multiple';
+export type MenuPlacement = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end';
+export declare function menuGroups(items: DropdownMenuItem[]): {
+    key: string;
+    label?: string;
+    items: DropdownMenuItem[];
+}[];
+export declare function menuLeaves(items: DropdownMenuItem[], disabled?: boolean): DropdownMenuItem[];
+export declare function menuSelection(keys: string[], items: DropdownMenuItem[], mode: MenuSelectionMode): string[];
+export type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'cover' | 'full';
+export type DialogPlacement = 'auto' | 'top' | 'center' | 'bottom';
+export type DialogScroll = 'inside' | 'outside';
+export type DialogBackdrop = 'opaque' | 'blur' | 'transparent';

package/dist/types/pagination-model.d.ts

@@ -0,0 +1,5 @@
+export declare function paginationModel(totalItems: number, pageSize: number, value: number, siblingCount?: number): {
+    current: number;
+    count: number;
+    entries: (string | number)[];
+};

package/dist/types/selection-options.d.ts

@@ -0,0 +1,8 @@
+export interface SelectOption {
+    id: string;
+    label: string;
+    description?: string;
+    isDisabled?: boolean;
+}
+export declare function selectionIds(value: unknown, options: SelectOption[], multiple: boolean): string[];
+export declare function filterOptions(options: SelectOption[], query: string): SelectOption[];

package/dist/types/tabs-indicator.d.ts

@@ -0,0 +1 @@
+export declare function mountTabsIndicator(container: HTMLElement): () => void;

package/dist/types/toggle-group-model.d.ts

@@ -0,0 +1,9 @@
+export interface ToggleGroupItem {
+    id: string;
+    label: string;
+    isDisabled?: boolean;
+}
+export type ToggleGroupMode = 'single' | 'multiple';
+export type ToggleGroupVariant = 'outline' | 'ghost';
+/** Normalize IDs without discarding existing disabled selections. */
+export declare function toggleIds(value: unknown, items: ToggleGroupItem[], multiple: boolean): string[];

package/dist/types/useDisclosure.d.ts

@@ -0,0 +1,4 @@
+export declare function useDisclosure(open?: boolean, defaultOpen?: boolean, onOpenChange?: (open: boolean) => void): {
+    visible: boolean;
+    change: (next: boolean) => void;
+};

package/package.json

@@ -1,6 +1,59 @@
 {
   "name": "@kazee-ds/react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.4.0",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0"
+  },
+  "dependencies": {
+    "@internationalized/date": "3.12.4",
+    "react-aria-components": "^1.21.1"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.5",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.7",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.1.2",
+    "jsdom": "^29.1.1",
+    "publint": "^0.3.25",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "vite": "^8.3.3"
+  },
+  "sideEffects": false,
+  "license": "UNLICENSED",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/types/index.d.ts",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.com/kazee.indonesia/kazee-design-system.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://kazee-design-system-023417.gitlab.io",
+  "scripts": {
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit",
+    "build": "vite build && tsc -p tsconfig.build.json",
+    "lint:package": "publint --strict && attw --pack . --profile esm-only"
+  }
 }

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.