@sqrzro/ui 4.0.0-alpha.0 → 4.0.0-alpha.2

package/dist/hooks/usePagination.js

@@ -0,0 +1,46 @@
+import { usePathname, useSearchParams } from 'next/navigation';
+export function getLink(pathname, searchParams, page) {
+    const newSearchParams = new URLSearchParams(searchParams.toString());
+    newSearchParams.set('page', page.toString());
+    return `${pathname}?${newSearchParams.toString()}`;
+}
+function getOffsetPage(pageCount, page) {
+    if (page === 1) {
+        return 2;
+    }
+    if (page === pageCount) {
+        return pageCount - 1;
+    }
+    return page;
+}
+function getLinks(pathname, searchParams, pageCount, page) {
+    const offsetPage = getOffsetPage(pageCount, page);
+    const set = new Set([1, offsetPage - 1, offsetPage, offsetPage + 1, pageCount]);
+    const array = Array.from(set).filter((item) => item > 0 && item <= pageCount);
+    const links = [];
+    for (let i = 0; i < array.length; i++) {
+        const current = array[i];
+        const next = array[i + 1];
+        links.push({ href: getLink(pathname, searchParams, current), label: String(current) });
+        if (next && next !== current + 1) {
+            links.push(null);
+        }
+    }
+    return links;
+}
+function usePagination({ limit, page, total }) {
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const pageCount = Math.ceil(total / limit);
+    if (pageCount <= 1) {
+        return { links: [], pageCount };
+    }
+    const links = getLinks(pathname, searchParams, pageCount, page);
+    return {
+        links,
+        nextLink: page === pageCount ? null : getLink(pathname, searchParams, page + 1),
+        pageCount,
+        previousLink: page === 1 ? null : getLink(pathname, searchParams, page - 1),
+    };
+}
+export default usePagination;

package/dist/hooks/useSearchParamsHref.d.ts

@@ -0,0 +1,6 @@
+interface UseSearchParamsHrefReturn {
+    getSearchParamsHref: (key: string | Record<string, string | null>, value?: string | null) => string;
+    setSearchParamsHref: (key: string | Record<string, string | null>, value?: string | null) => void;
+}
+declare function useSearchParamsHref(): UseSearchParamsHrefReturn;
+export default useSearchParamsHref;

package/dist/hooks/useSearchParamsHref.js

@@ -0,0 +1,33 @@
+'use client';
+import { usePathname, useSearchParams } from 'next/navigation';
+function useSearchParamsHref() {
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    function setParam(params, key, value) {
+        if (value === null) {
+            params.delete(key);
+        }
+        else {
+            params.set(key, value);
+        }
+        return params;
+    }
+    function getSearchParamsHref(key, value) {
+        let params = new URLSearchParams(searchParams?.toString());
+        if (typeof key === 'object') {
+            Object.entries(key).forEach(([k, v]) => {
+                params = setParam(params, k, v);
+            });
+        }
+        else {
+            params = setParam(params, key, value ?? null);
+        }
+        return `${pathname ?? ''}?${params.toString()}`;
+    }
+    function setSearchParamsHref(key, value) {
+        const href = getSearchParamsHref(key, value);
+        window.history.replaceState(null, '', href);
+    }
+    return { getSearchParamsHref, setSearchParamsHref };
+}
+export default useSearchParamsHref;

package/dist/hooks/useToast.d.ts

@@ -0,0 +1,18 @@
+export interface ToastObject {
+    message: string;
+}
+interface UseToastArgs {
+    channel?: string;
+}
+interface ToastFunctionOptions {
+    duration?: number;
+}
+type ToastFunction = (message: string, options?: ToastFunctionOptions) => void;
+interface UseToastReturn {
+    toastError: ToastFunction;
+    toastInfo: ToastFunction;
+    toastSuccess: ToastFunction;
+    toastWarning: ToastFunction;
+}
+declare function useToast(args?: UseToastArgs): UseToastReturn;
+export default useToast;

package/dist/hooks/useToast.js

@@ -0,0 +1,25 @@
+'use client';
+function useToast(args) {
+    function setToast({ message, type }) {
+        const eventName = args?.channel ? `toast-${args.channel}` : 'toast';
+        const event = new CustomEvent(eventName, {
+            bubbles: false,
+            detail: { id: String(Math.random()), message, type },
+        });
+        document.dispatchEvent(event);
+    }
+    function toastError(message) {
+        setToast({ message, type: 'error' });
+    }
+    function toastInfo(message) {
+        setToast({ message, type: 'info' });
+    }
+    function toastSuccess(message) {
+        setToast({ message, type: 'success' });
+    }
+    function toastWarning(message) {
+        setToast({ message, type: 'warning' });
+    }
+    return { toastError, toastInfo, toastSuccess, toastWarning };
+}
+export default useToast;

package/dist/navigation/components/AppNavigation/index.d.ts

@@ -0,0 +1,13 @@
+import type { ClassNameProps, HighlightableClassName } from '../../../styles/interfaces';
+import type { NavigationObject } from '../../interfaces';
+export interface AppNavigationClassNames {
+    root: string;
+    list: string;
+    item: HighlightableClassName;
+    link: HighlightableClassName;
+}
+export interface AppNavigationProps extends ClassNameProps<AppNavigationClassNames> {
+    data: NavigationObject[];
+}
+declare function AppNavigation(props: Readonly<AppNavigationProps>): React.ReactElement;
+export default AppNavigation;

package/dist/navigation/components/AppNavigation/index.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense } from 'react';
+import { getClassNames } from '../../../styles/config';
+import useNavigation from '../../hooks/useNavigation';
+import AppNavigationItem from '../AppNavigationItem';
+function AppNavigationComponent({ classNameProps, classNames, data, }) {
+    const componentClassNames = classNames || getClassNames('appNavigation')?.(classNameProps);
+    const navigation = useNavigation(data);
+    return (_jsx("nav", { className: componentClassNames?.root, children: _jsx("ul", { className: componentClassNames?.list, children: navigation.map((item, index) => (_jsx(AppNavigationItem, { classNames: classNames, ...item }, index))) }) }));
+}
+function AppNavigation(props) {
+    return (_jsx(Suspense, { children: _jsx(AppNavigationComponent, { ...props }) }));
+}
+export default AppNavigation;

package/dist/navigation/components/AppNavigationItem/index.d.ts

@@ -0,0 +1,6 @@
+import type { NavigationObject } from '../../../navigation/interfaces';
+import type { ClassNameProps } from '../../../styles/interfaces';
+import type { AppNavigationClassNames } from '../AppNavigation';
+export type AppNavigationItemProps = NavigationObject & ClassNameProps<AppNavigationClassNames>;
+declare function AppNavigationItem({ classNameProps, classNames, href, isActive, label, }: Readonly<AppNavigationItemProps>): React.ReactElement;
+export default AppNavigationItem;

package/dist/navigation/components/AppNavigationItem/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Link from '../../../components/utility/Link';
+import { getClassNames } from '../../../styles/config';
+import tw from '../../../styles/tw';
+function AppNavigationItem({ classNameProps, classNames, href, isActive, label, }) {
+    const componentClassNames = classNames || getClassNames('appNavigation')?.(classNameProps);
+    return (_jsx("li", { className: tw(componentClassNames?.item?.default, isActive ? componentClassNames?.item?.highlighted : null), children: _jsx(Link, { className: tw(componentClassNames?.link?.default, isActive ? componentClassNames?.link?.highlighted : null), href: href, children: label }) }));
+}
+export default AppNavigationItem;

package/dist/navigation/components/Tabs/index.d.ts

@@ -0,0 +1,7 @@
+import type { AppNavigationClassNames, AppNavigationProps } from '../AppNavigation';
+export type TabsClassNames = AppNavigationClassNames;
+export interface TabsProps extends Omit<AppNavigationProps, 'classNames'> {
+    classNames?: TabsClassNames;
+}
+declare function Tabs({ classNameProps, classNames, ...props }: Readonly<TabsProps>): React.ReactElement;
+export default Tabs;

package/dist/navigation/components/Tabs/index.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getClassNames } from '../../../styles/config';
+import AppNavigation from '../AppNavigation';
+function Tabs({ classNameProps, classNames, ...props }) {
+    const componentClassNames = classNames || getClassNames('tabs')?.(classNameProps);
+    return _jsx(AppNavigation, { classNames: componentClassNames ?? {}, ...props });
+}
+export default Tabs;

package/dist/navigation/hooks/useNavigation.d.ts

@@ -0,0 +1,10 @@
+import type { Action } from '../../utility/interfaces';
+import type { NavigationObject } from '../interfaces';
+interface NavigationAction extends Action {
+    children?: Action[];
+}
+interface UseNavigationOptions {
+    basePath?: string;
+}
+declare function useNavigation(data: NavigationAction[], options?: UseNavigationOptions): NavigationObject[];
+export default useNavigation;

package/dist/navigation/hooks/useNavigation.js

@@ -0,0 +1,38 @@
+import { joinUrl } from '@sqrzro/utility';
+import { usePathname, useSelectedLayoutSegments } from 'next/navigation';
+function getActivePath(pathname, hrefs) {
+    return (hrefs
+        .filter((href) => href && pathname.startsWith(`/${href.replace(/^\//u, '').split('?')[0]}`))
+        .sort((first, second) => {
+        if (!first || !second) {
+            return 0;
+        }
+        return second.length - first.length;
+    })[0] || '');
+}
+function getBasePath(pathname, segments) {
+    const segment = segments.join('/');
+    const regex = new RegExp(`/${segment}$`, 'u');
+    return pathname.replace(regex, '');
+}
+function transformChildren(children, basePath) {
+    return children.map(({ details, href, label }) => ({
+        details,
+        href: joinUrl(basePath, href),
+        label,
+    }));
+}
+function useNavigation(data, options) {
+    const pathname = usePathname();
+    const segments = useSelectedLayoutSegments();
+    const basePath = getBasePath(pathname, segments);
+    const hrefs = data.map(({ href }) => joinUrl(basePath, href));
+    const activePath = getActivePath(pathname, hrefs);
+    return data.map((item) => ({
+        ...item,
+        children: transformChildren(item.children || [], item.href),
+        href: joinUrl(basePath, item.href),
+        isActive: joinUrl(basePath, item.href) === activePath,
+    }));
+}
+export default useNavigation;

package/dist/navigation/index.d.ts

@@ -0,0 +1,5 @@
+export * from './interfaces';
+export type { AppNavigationClassNames, AppNavigationProps } from './components/AppNavigation';
+export { default as AppNavigation } from './components/AppNavigation';
+export type { TabsClassNames, TabsProps } from './components/Tabs';
+export { default as Tabs } from './components/Tabs';

package/dist/navigation/index.js

@@ -0,0 +1,3 @@
+export * from './interfaces';
+export { default as AppNavigation } from './components/AppNavigation';
+export { default as Tabs } from './components/Tabs';

package/dist/navigation/interfaces.d.ts

@@ -0,0 +1,7 @@
+export interface NavigationObject {
+    children?: Omit<NavigationObject, 'children'>[];
+    details?: React.ReactNode;
+    href?: string;
+    isActive?: boolean;
+    label: React.ReactNode;
+}

package/dist/navigation/interfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/styles/config.d.ts

@@ -0,0 +1,64 @@
+import type { ButtonClassNames } from '../components/buttons/Button';
+import type { TextButtonClassNames } from '../components/buttons/TextButton';
+import type { EmptyMessageClassNames } from '../components/collections/EmptyMessage';
+import type { ListItemClassNames } from '../components/collections/ListItem';
+import type { ListItemMetaClassNames } from '../components/collections/ListItemMeta';
+import type { PaginationClassNames } from '../components/collections/Pagination';
+import type { TableClassNames } from '../components/collections/Table';
+import type { ModalClassNames } from '../components/modals/Modal';
+import type { ActionListClassNames } from '../components/utility/ActionList';
+import type { ContainerClassNames } from '../components/utility/Container';
+import type { LinkClassNames } from '../components/utility/Link';
+import type { LoaderClassNames } from '../components/utility/Loader';
+import type { PopoverClassNames } from '../components/utility/Popover';
+import type { RootLayoutClassNames } from '../components/utility/RootLayout';
+import type { ToastClassNames } from '../components/utility/Toast';
+import type { FilterBarClassNames } from '../filters/components/FilterBar';
+import type { FilterItemClassNames } from '../filters/components/FilterItem';
+import type { FilterPanelClassNames } from '../filters/components/FilterPanel';
+import type { DropdownClassNames } from '../forms/components/Dropdown';
+import type { EditableFormClassNames } from '../forms/components/EditableForm';
+import type { EditableFormFieldClassNames } from '../forms/components/EditableFormField';
+import type { FormClassNames } from '../forms/components/Form';
+import type { FormFieldClassNames } from '../forms/components/FormField';
+import type { PasswordInputClassNames } from '../forms/components/PasswordInput';
+import type { StaticTextInputClassNames } from '../forms/components/StaticTextInput';
+import type { SwitchClassNames } from '../forms/components/Switch';
+import type { TextInputClassNames } from '../forms/components/TextInput';
+import type { AppNavigationClassNames } from '../navigation/components/AppNavigation';
+import type { TabsClassNames } from '../navigation/components/Tabs';
+type ComponentClassNames<T> = Partial<T>;
+export interface RegisteredClassNames {
+    actionList?: ComponentClassNames<ActionListClassNames>;
+    appNavigation?: ComponentClassNames<AppNavigationClassNames>;
+    button?: ComponentClassNames<ButtonClassNames>;
+    container?: ComponentClassNames<ContainerClassNames>;
+    dropdown?: ComponentClassNames<DropdownClassNames>;
+    editableForm?: ComponentClassNames<EditableFormClassNames>;
+    editableFormField?: ComponentClassNames<EditableFormFieldClassNames>;
+    emptyMessage?: ComponentClassNames<EmptyMessageClassNames>;
+    filterBar?: ComponentClassNames<FilterBarClassNames>;
+    filterItem?: ComponentClassNames<FilterItemClassNames>;
+    filterPanel?: ComponentClassNames<FilterPanelClassNames>;
+    form?: ComponentClassNames<FormClassNames>;
+    formField?: ComponentClassNames<FormFieldClassNames>;
+    link?: ComponentClassNames<LinkClassNames>;
+    listItem?: ComponentClassNames<ListItemClassNames>;
+    listItemMeta?: ComponentClassNames<ListItemMetaClassNames>;
+    loader?: ComponentClassNames<LoaderClassNames>;
+    modal?: ComponentClassNames<ModalClassNames>;
+    pagination?: ComponentClassNames<PaginationClassNames>;
+    passwordInput?: ComponentClassNames<PasswordInputClassNames>;
+    popover?: ComponentClassNames<PopoverClassNames>;
+    rootLayout?: ComponentClassNames<RootLayoutClassNames>;
+    staticTextInput?: ComponentClassNames<StaticTextInputClassNames>;
+    switch?: ComponentClassNames<SwitchClassNames>;
+    table?: ComponentClassNames<TableClassNames>;
+    tabs?: ComponentClassNames<TabsClassNames>;
+    textButton?: ComponentClassNames<TextButtonClassNames>;
+    textInput?: ComponentClassNames<TextInputClassNames>;
+    toast?: ComponentClassNames<ToastClassNames>;
+}
+export declare function registerClassNames(data: RegisteredClassNames): void;
+export declare function getClassNames<K extends keyof RegisteredClassNames>(componentName: K): (props?: Record<string, unknown>) => RegisteredClassNames[K];
+export {};

package/dist/styles/config.js

@@ -0,0 +1,43 @@
+// import type { ActionListClassNames } from '../elements/ActionList';
+// import type { AppNavigationClassNames } from '../navigation/components/AppNavigation';
+// import type { BadgeClassNames } from '../elements/Badge';
+// import type { CalendarClassNames } from '../forms/Calendar';
+// import type { CalendarInputClassNames } from '../forms/CalendarInput';
+// import type { CalendarNavigationClassNames } from '../forms/CalendarNavigation';
+// import type { CheckboxInputClassNames } from '../forms/CheckboxInput';
+// import type { CodeInputClassNames } from '../forms/CodeInput';
+// import type { ColorInputClassNames } from '../forms/ColorInput';
+// import type { CSVInputClassNames } from '../forms/CSVInput';
+// import type { DefinitionListClassNames } from '../elements/DefinitionList';
+// import type { DropdownClassNames } from '../forms/Dropdown';
+// import type { EditableFormClassNames } from '../forms/EditableForm';
+// import type { EditableFormFieldClassNames } from '../forms/EditableFormField';
+// import type { FieldsetClassNames } from '../forms/Fieldset';
+// import type { FilterBarClassNames } from '../filters/components/FilterBar';
+// import type { FilterItemClassNames } from '../filters/components/FilterItem';
+// import type { FilterPanelClassNames } from '../filters/components/FilterPanel';
+// import type { FormClassNames } from '../forms/Form';
+// import type { ImageInputClassNames } from '../forms/ImageInput';
+// import type { InfoPanelClassNames } from '../elements/InfoPanel';
+// import type { ListMenuClassNames } from '../lists/ListMenu';
+// import type { ListMenuButtonClassNames } from '../lists/ListMenuButton';
+// import type { LoadingModalClassNames } from '../modals/LoadingModal';
+// import type { ModalClassNames } from '../modals/Modal';
+// import type { MultiInputClassNames } from '../forms/MultiInput';
+// import type { ObjectInputClassNames } from '../forms/ObjectInput';
+// import type { RadioInputClassNames } from '../forms/RadioInput';
+// import type { StaticTextInputClassNames } from '../forms/StaticTextInput';
+// import type { SwitchClassNames } from '../forms/Switch';
+// import type { PasswordInputClassNames } from '../forms/PasswordInput';
+// import type { TableClassNames } from '../tables/Table';
+// import type { TextAreaClassNames } from '../forms/TextArea';
+// import type { TextInputClassNames } from '../forms/TextInput';
+// import type { ToastClassNames } from '../elements/Toast';
+// import type { TooltipClassNames } from '../elements/Tooltip';
+let registeredClassNames = {};
+export function registerClassNames(data) {
+    registeredClassNames = { ...registeredClassNames, ...data };
+}
+export function getClassNames(componentName) {
+    return () => registeredClassNames[componentName];
+}

package/dist/styles/icons.d.ts

@@ -0,0 +1,15 @@
+type IconComponent = React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & {
+    title?: string;
+    titleId?: string;
+} & React.RefAttributes<SVGSVGElement>>;
+export interface RegisteredIcons {
+    'collection.empty'?: IconComponent;
+    'filter.panel'?: IconComponent;
+    'filter.search'?: IconComponent;
+    password?: IconComponent;
+    'utility.success'?: IconComponent;
+    'utility.error'?: IconComponent;
+}
+export declare function registerIcons(data: RegisteredIcons): void;
+export declare function getIcon(componentName: keyof RegisteredIcons): IconComponent | null;
+export {};

package/dist/styles/icons.js

@@ -0,0 +1,7 @@
+let registeredIcons = {};
+export function registerIcons(data) {
+    registeredIcons = { ...registeredIcons, ...data };
+}
+export function getIcon(componentName) {
+    return registeredIcons[componentName] ?? null;
+}

package/dist/styles/index.d.ts

@@ -0,0 +1,2 @@
+export type { RegisteredClassNames } from './config';
+export { default as tw, twx } from './tw';

package/dist/styles/index.js

@@ -0,0 +1 @@
+export { default as tw, twx } from './tw';

package/dist/styles/interfaces.d.ts

@@ -0,0 +1,41 @@
+import type { ButtonVariant, StyleVariant } from "../utility/interfaces";
+export interface ClassNameProps<T> {
+    classNames?: Partial<T>;
+    classNameProps?: Record<string, unknown>;
+}
+export interface CheckableClassName {
+    default?: string;
+    checked?: string;
+}
+export interface ErrorableClassName {
+    default?: string;
+    error?: string;
+}
+export interface FocusableClassName {
+    default?: string;
+    focused?: string;
+}
+export interface HighlightableClassName {
+    default?: string;
+    highlighted?: string;
+}
+export interface LoadableClassName {
+    default?: string;
+    loading?: string;
+}
+export interface SelectableClassName {
+    default?: string;
+    selected?: string;
+}
+export interface SizableClassName {
+    default?: string;
+    lg?: string;
+    md?: string;
+    sm?: string;
+}
+export type StylableClassName = Partial<Record<StyleVariant, string>> & {
+    default?: string;
+};
+export type StylableButtonClassName = Partial<Record<ButtonVariant, string>> & {
+    default?: string;
+};

package/dist/styles/interfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/styles/tw.d.ts

@@ -0,0 +1,9 @@
+/**
+ * This function does nothing other than return the object it was given. It's used to 'trick' the
+ * `prettier-plugin-tailwind` into sorting the order of the classes in the `classNames` object that
+ * is passed to the `ClassNames` component. The `@sqrzro/prettier-config` object then has a rule for
+ * `tailwindFunctions` that includes `twx`.
+ */
+export declare function twx<T extends object>(object: T): T;
+declare function tw(...inputs: (string | null | undefined)[]): string;
+export default tw;

package/dist/styles/tw.js

@@ -0,0 +1,15 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+/**
+ * This function does nothing other than return the object it was given. It's used to 'trick' the
+ * `prettier-plugin-tailwind` into sorting the order of the classes in the `classNames` object that
+ * is passed to the `ClassNames` component. The `@sqrzro/prettier-config` object then has a rule for
+ * `tailwindFunctions` that includes `twx`.
+ */
+export function twx(object) {
+    return object;
+}
+function tw(...inputs) {
+    return twMerge(clsx(inputs));
+}
+export default tw;

package/dist/utility/index.d.ts

@@ -0,0 +1 @@
+export type { NextLayoutProps, NextPageProps } from './interfaces';

package/dist/utility/index.js

@@ -0,0 +1 @@
+export {};

package/dist/utility/interfaces.d.ts

@@ -0,0 +1,35 @@
+export interface ConfirmableObject {
+    actions?: Omit<Action, 'confirmable'>[];
+    confirmText?: string;
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
+    isLoading?: boolean;
+    modalIcon?: React.ReactNode;
+    onBeforeConfirm?: () => void;
+    onConfirm: () => void;
+    submitLabel?: string;
+    title?: string;
+}
+export interface Action {
+    action?: string;
+    confirmable?: ConfirmableObject;
+    details?: React.ReactNode;
+    href?: string;
+    icon?: React.ReactNode;
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    isSubmittable?: boolean;
+    label: React.ReactNode;
+    onClick?: () => void;
+    variant?: ButtonVariant;
+}
+export interface NextLayoutProps {
+    children: React.ReactNode;
+    params?: Promise<Record<string, string>> | null;
+}
+export interface NextPageProps {
+    params?: Promise<Record<string, string>> | null;
+    searchParams?: Promise<Record<string, string>> | null;
+}
+export type StyleVariant = 'bordered' | 'danger' | 'error' | 'info' | 'primary' | 'secondary' | 'success' | 'tertiary' | 'warning';
+export type ButtonVariant = StyleVariant | 'link';

package/dist/utility/interfaces.js

@@ -1 +1 @@
-"use strict";
+export {};

package/package.json

@@ -1,30 +1,77 @@
 {
   "name": "@sqrzro/ui",
   "type": "module",
-  "version": "4.0.0-alpha.0",
+  "version": "4.0.0-alpha.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "ISC",
   "exports": {
-    ".": "./dist/index.js"
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "default": "./dist/components/index.js"
+    },
+    "./filters": {
+      "types": "./dist/filters/index.d.ts",
+      "default": "./dist/filters/index.js"
+    },
+    "./forms": {
+      "types": "./dist/forms/index.d.ts",
+      "default": "./dist/forms/index.js"
+    },
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "default": "./dist/hooks/index.js"
+    },
+    "./navigation": {
+      "types": "./dist/navigation/index.d.ts",
+      "default": "./dist/navigation/index.js"
+    },
+    "./styles": {
+      "types": "./dist/styles/index.d.ts",
+      "default": "./dist/styles/index.js"
+    },
+    "./utility": {
+      "types": "./dist/utility/index.d.ts",
+      "default": "./dist/utility/index.js"
+    }
   },
   "files": [
     "dist/**/*"
   ],
   "dependencies": {
-    "next": "^16.0.5",
-    "react": "^19.2.0"
+    "clsx": "^2.1.1",
+    "next": "^16.1.6",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.1",
+    "tailwind-merge": "^3.4.0",
+    "use-deep-compare-effect": "^1.8.1",
+    "@sqrzro/utility": "^4.0.0-alpha.1"
   },
   "devDependencies": {
-    "@sqrzro/prettier-config": "r19",
+    "@storybook/addon-a11y": "^10.1.7",
+    "@storybook/addon-docs": "^10.1.7",
+    "@storybook/nextjs": "^10.1.7",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "concurrently": "^9.2.1",
+    "next-router-mock": "^1.0.4",
+    "prettier": "^3.7.4",
     "rimraf": "^6.1.2",
-    "typescript": "^5.9.3"
+    "storybook": "^10.1.7",
+    "tsc-alias": "^1.8.16",
+    "tslib": "^2.8.1",
+    "typescript": "^5.9.3",
+    "@sqrzro/prettier-config": "^4.0.0-alpha.1"
   },
   "scripts": {
-    "build": "pnpm clean && tsc",
+    "build": "pnpm clean && tsc -p tsconfig.build.json && tsc-alias",
     "clean": "rimraf ./dist",
-    "dev": "tsc --watch",
+    "dev": "(concurrently \"tsc -p tsconfig.build.json --watch\" \"tsc-alias -w\")",
+    "docs:start": "storybook dev -p 6006",
+    "docs:build": "storybook build",
+    "lint": "tsc --noEmit && eslint \"./src/**/*.ts\"",
     "prettier": "prettier --write \"./src/**/*.tsx\" \"./src/**/*.ts\"",
     "start": "pnpm dev"
   }

package/dist/index.d.ts

@@ -1,2 +0,0 @@
-export { ListProps } from "./lists/List";
-export { default as List } from "./lists/List";

package/dist/index.js

@@ -1 +0,0 @@
-export { default as List } from "./lists/List";

package/dist/lists/List/index.d.ts

@@ -1,5 +0,0 @@
-export interface ListProps {
-    children?: React.ReactNode;
-}
-declare function List({ children }: Readonly<ListProps>): React.ReactElement;
-export default List;