@sqrzro/ui 4.0.0-alpha.4 → 4.0.0-alpha.41

package/package.json

@@ -1,11 +1,15 @@
 {
   "name": "@sqrzro/ui",
   "type": "module",
-  "version": "4.0.0-alpha.4",
+  "version": "4.0.0-alpha.41",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "ISC",
   "exports": {
+    "./addon": {
+      "types": "./dist/addon/index.d.ts",
+      "default": "./dist/addon/index.js"
+    },
     "./components": {
       "types": "./dist/components/index.d.ts",
       "default": "./dist/components/index.js"
@@ -30,6 +34,9 @@
       "types": "./dist/styles/index.d.ts",
       "default": "./dist/styles/index.js"
     },
+    "./styles.css": {
+      "default": "./dist/styles/styles.css"
+    },
     "./utility": {
       "types": "./dist/utility/index.d.ts",
       "default": "./dist/utility/index.js"
@@ -40,35 +47,40 @@
   ],
   "dependencies": {
     "clsx": "^2.1.1",
+    "drizzle-orm": "^0.45.1",
     "next": "^16.1.6",
     "react": "^19.2.4",
-    "react-dom": "^19.2.1",
-    "tailwind-merge": "^3.4.0",
+    "react-dom": "^19.2.4",
+    "tailwind-merge": "^3.5.0",
     "use-deep-compare-effect": "^1.8.1",
-    "@sqrzro/utility": "^4.0.0-alpha.1"
+    "@sqrzro/addons": "^4.0.0-alpha.5",
+    "@sqrzro/utility": "^4.0.0-alpha.15",
+    "@sqrzro/config": "^4.0.0-alpha.3"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^10.1.7",
-    "@storybook/addon-docs": "^10.1.7",
-    "@storybook/nextjs": "^10.1.7",
-    "@testing-library/react": "^16.3.0",
+    "@storybook/addon-a11y": "^10.2.14",
+    "@storybook/addon-docs": "^10.2.14",
+    "@storybook/nextjs": "^10.2.14",
+    "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/react": "^19.2.7",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "concurrently": "^9.2.1",
-    "next-router-mock": "^1.0.4",
-    "prettier": "^3.7.4",
-    "rimraf": "^6.1.2",
-    "storybook": "^10.1.7",
+    "cpx": "^1.5.0",
+    "next-router-mock": "^1.0.5",
+    "prettier": "^3.8.1",
+    "rimraf": "^6.1.3",
+    "storybook": "^10.2.14",
     "tsc-alias": "^1.8.16",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
-    "@sqrzro/prettier-config": "^4.0.0-alpha.1"
+    "@sqrzro/prettier-config": "^4.0.0-alpha.3"
   },
   "scripts": {
-    "build": "pnpm clean && tsc -p tsconfig.build.json && tsc-alias",
+    "build": "pnpm clean && tsc -p tsconfig.build.json && tsc-alias && pnpm build:css",
+    "build:css": "cpx \"./src/**/*.css\" ./dist",
     "clean": "rimraf ./dist",
-    "dev": "(concurrently \"tsc -p tsconfig.build.json --watch\" \"tsc-alias -w\")",
+    "dev": "pnpm build:css && (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\"",

package/dist/components/buttons/ConfirmableButton/index.d.ts

@@ -1,7 +0,0 @@
-import type { ConfirmableObject } from '../../../utility/interfaces';
-import type { ButtonProps } from '../Button';
-export type ConfirmableButtonProps = ButtonProps & {
-    confirmable: ConfirmableObject;
-};
-declare function ConfirmableButton({ confirmable, ...buttonProps }: Readonly<ConfirmableButtonProps>): React.ReactElement;
-export default ConfirmableButton;

package/dist/components/buttons/ConfirmableButton/index.js

@@ -1,13 +0,0 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment } from 'react';
-import Button from '../Button';
-function ConfirmableButton({ confirmable, ...buttonProps }) {
-    // const { handle, modalProps } = useConfirmable<HTMLButtonElement>({
-    //     isLoading,
-    //     onBeforeConfirm,
-    //     onConfirm: (event) => onClick?.(event),
-    // });
-    return (_jsx(Fragment, { children: _jsx(Button, { ...buttonProps, icon: confirmable.icon, isLoading: confirmable.isLoading }) }));
-}
-export default ConfirmableButton;

package/dist/components/collections/utility/filter-columns.d.ts

@@ -1,3 +0,0 @@
-import type { TableColumnObject } from '../interfaces';
-declare function filterColumns(columns: TableColumnObject[], isSelectable?: boolean): TableColumnObject[];
-export default filterColumns;

package/dist/components/collections/utility/filter-columns.js

@@ -1,8 +0,0 @@
-function filterColumns(columns, isSelectable) {
-    const filtered = columns.filter((column) => column.type !== 'id');
-    if (isSelectable) {
-        return [{ id: 'select', type: 'selectable' }, ...filtered];
-    }
-    return filtered;
-}
-export default filterColumns;

package/dist/components/collections/utility/get-selected-from-search-params.d.ts

@@ -1,2 +0,0 @@
-declare function getSelectedFromSearchParams(searchParams: URLSearchParams): string[];
-export default getSelectedFromSearchParams;

package/dist/components/collections/utility/get-selected-from-search-params.js

@@ -1,5 +0,0 @@
-function getSelectedFromSearchParams(searchParams) {
-    const selected = searchParams.get('selected');
-    return selected ? selected.split('|') : [];
-}
-export default getSelectedFromSearchParams;

package/dist/components/collections/utility/set-selected-to-search-params.d.ts

@@ -1,2 +0,0 @@
-declare function setSelectedToSearchParams(selected: string[]): string;
-export default setSelectedToSearchParams;

package/dist/components/collections/utility/set-selected-to-search-params.js

@@ -1,4 +0,0 @@
-function setSelectedToSearchParams(selected) {
-    return selected.join('|');
-}
-export default setSelectedToSearchParams;

package/dist/components/utility/ClassNames/index.d.ts

@@ -1,6 +0,0 @@
-import type { RegisteredClassNames } from '../../../styles/config';
-export interface ClassNamesProps {
-    data: RegisteredClassNames;
-}
-declare function ClassNames({ data }: Readonly<ClassNamesProps>): null;
-export default ClassNames;

package/dist/components/utility/ClassNames/index.js

@@ -1,7 +0,0 @@
-'use client';
-import { registerClassNames } from '../../../styles/config';
-function ClassNames({ data }) {
-    registerClassNames(data);
-    return null;
-}
-export default ClassNames;

package/dist/components/utility/Page/index.d.ts

@@ -1,18 +0,0 @@
-import React from 'react';
-import type { NavigationObject } from '../../../navigation/interfaces';
-import type { NextPageProps } from '../../../utility/interfaces';
-interface PageTemplateProps {
-    children: React.ReactNode;
-    tabs: NavigationObject[] | null;
-    title: React.ReactNode;
-}
-export interface PageProps<T> {
-    readonly children: React.ReactNode | ((data: T) => React.ReactNode);
-    readonly fn?: (params?: Promise<Record<string, string>> | null) => Promise<T>;
-    readonly pageProps?: NextPageProps;
-    readonly tabs?: NavigationObject[] | ((data: T) => NavigationObject[] | null);
-    readonly template?: (props: PageTemplateProps) => React.ReactElement;
-    readonly title?: React.ReactNode | ((data: T) => React.ReactNode);
-}
-declare function Page<T>(props: PageProps<T>): React.ReactElement;
-export default Page;

package/dist/components/utility/Page/index.js

@@ -1,34 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Suspense } from 'react';
-function getChildren(props, data) {
-    if (typeof props.children === 'function') {
-        return data ? props.children(data) : null;
-    }
-    return props.children;
-}
-function getTabs(props, data) {
-    if (typeof props.tabs === 'function') {
-        return data ? props.tabs(data) : null;
-    }
-    return props.tabs ?? null;
-}
-function getTitle(props, data) {
-    if (typeof props.title === 'function') {
-        return data ? props.title(data) : null;
-    }
-    return props.title;
-}
-async function PageComponent(props) {
-    const data = props.fn ? await props.fn(props.pageProps?.params) : null;
-    const children = getChildren(props, data);
-    const tabs = getTabs(props, data);
-    const title = getTitle(props, data);
-    if (props.template) {
-        return props.template({ children, tabs, title });
-    }
-    return children;
-}
-function Page(props) {
-    return (_jsx(Suspense, { fallback: props.template?.({ children: null, tabs: null, title: '•••' }), children: _jsx(PageComponent, { ...props }) }));
-}
-export default Page;

package/dist/components/utility/RootLayout/index.d.ts

@@ -1,12 +0,0 @@
-import { type RegisteredClassNames } from '../../../styles/config';
-import type { ClassNameProps } from '../../../styles/interfaces';
-export interface RootLayoutClassNames {
-    root: string;
-    content: string;
-}
-export interface RootLayoutProps extends ClassNameProps<RootLayoutClassNames> {
-    readonly children: React.ReactNode;
-    readonly classNameConfig?: RegisteredClassNames;
-}
-declare function RootLayout({ children, classNameConfig, classNameProps, classNames, }: RootLayoutProps): React.ReactElement;
-export default RootLayout;

package/dist/components/utility/RootLayout/index.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getClassNames, registerClassNames } from '../../../styles/config';
-import ClassNames from '../ClassNames';
-import Toaster from '../Toaster';
-function RootLayout({ children, classNameConfig, classNameProps, classNames, }) {
-    if (classNameConfig) {
-        registerClassNames(classNameConfig);
-    }
-    const componentClassNames = classNames || getClassNames('rootLayout')?.(classNameProps);
-    return (_jsxs("html", { lang: "en", children: [_jsx("head", { children: _jsx("link", { href: "/images/favicon.svg", rel: "icon" }) }), _jsxs("body", { className: componentClassNames?.root, children: [_jsx("script", { dangerouslySetInnerHTML: {
-                            __html: "(function(d){var v=d.createElement('div'),t=d.createElement('style'),s=v.style;s.overflowY='scroll';s.width='50';s.height='50';d.body.append(v);t.innerHTML='body:has([data-modal][open]){padding-right:'+(v.offsetWidth-v.clientWidth)+'px}';d.body.append(t);v.remove()}(document))",
-                        } }), classNameConfig ? _jsx(ClassNames, { data: classNameConfig }) : null, _jsx("div", { className: componentClassNames?.content, children: children }), _jsx(Toaster, {})] })] }));
-}
-export default RootLayout;

package/dist/styles/config.d.ts

@@ -1,64 +0,0 @@
-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

@@ -1,43 +0,0 @@
-// 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

@@ -1,15 +0,0 @@
-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

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

package/dist/styles/interfaces.d.ts

@@ -1,41 +0,0 @@
-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;
-};