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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sqrzro/ui",
   "type": "module",
-  "version": "4.0.0-alpha.2",
+  "version": "4.0.0-alpha.21",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "ISC",
@@ -30,6 +30,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"
@@ -45,7 +48,7 @@
     "react-dom": "^19.2.1",
     "tailwind-merge": "^3.4.0",
     "use-deep-compare-effect": "^1.8.1",
-    "@sqrzro/utility": "^4.0.0-alpha.1"
+    "@sqrzro/utility": "^4.0.0-alpha.8"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^10.1.7",
@@ -56,6 +59,7 @@
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "concurrently": "^9.2.1",
+    "cpx": "^1.5.0",
     "next-router-mock": "^1.0.4",
     "prettier": "^3.7.4",
     "rimraf": "^6.1.2",
@@ -66,9 +70,10 @@
     "@sqrzro/prettier-config": "^4.0.0-alpha.1"
   },
   "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/ListClientComponent/index.d.ts

@@ -1,7 +0,0 @@
-import type { ListItemObject } from '../interfaces';
-export interface ListClientComponentProps<Data extends object | null = null> {
-    data: ListItemObject<Data>[];
-    renderItem?: (props: ListItemObject<Data>) => React.ReactElement;
-}
-declare function ListClientComponent<Data extends object | null = null>({ data, renderItem, }: Readonly<ListClientComponentProps<Data>>): React.ReactElement;
-export default ListClientComponent;

package/dist/components/collections/ListClientComponent/index.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment } from 'react';
-import ListItem from '../ListItem';
-function ListClientComponent({ 
-// actions,
-data, renderItem = ListItem, }) {
-    return (_jsx("ul", { className: "", children: data.map((item) => (_jsx(Fragment, { children: renderItem({ /*actions,*/ ...item }) }, item.id))) }));
-}
-export default ListClientComponent;

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/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/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/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;
-};