@sqrzro/ui 4.0.0-alpha.14 → 4.0.0-alpha.16

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

@@ -1,7 +1,7 @@
-import type { ClassNameProps, StylableButtonClassName } from '../../../styles/classnames/interfaces';
-import { ButtonVariant } from '../../../utility/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
+import { StyleVariant } from '../../../utility/interfaces';
 export interface ButtonClassNames {
-    root: StylableButtonClassName;
+    root: string;
     icon: string;
 }
 export interface ButtonProps extends ClassNameProps<ButtonClassNames> {
@@ -40,7 +40,7 @@ export interface ButtonProps extends ClassNameProps<ButtonClassNames> {
     /** Used in situations where a button value needs to be submitted with a form */
     readonly value?: string;
     /** A set of predefined variants that can be passed to the classNames config to customize the button's appearance */
-    readonly variant?: ButtonVariant;
+    readonly variant?: StyleVariant[] | StyleVariant;
 }
 /**
  * Either a `Link` component or a `button` element, depending on whether a `href` prop is specified.

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

@@ -4,6 +4,7 @@ import { useRef } from 'react';
 import Link from '../../../components/utility/Link';
 import Loader from '../../../components/utility/Loader';
 import { getClassNames } from '../../../styles/classnames';
+import applyVariants from '../../../styles/classnames/apply-variants';
 import tw from '../../../styles/classnames/tw';
 /**
  * Either a `Link` component or a `button` element, depending on whether a `href` prop is specified.
@@ -26,7 +27,7 @@ import tw from '../../../styles/classnames/tw';
  */
 function Button({ children, classNames, classNameProps, form, hasAssistiveLabel, href, icon, id, isDisabled, isFullWidth, isLoading, isNewWindow, isText, name, onClick, popoverTarget, scroll, style, type, value, variant, }) {
     const ref = useRef(null);
-    const componentClassNames = getClassNames(isText ? 'textButton' : 'button', { props: { ...classNameProps } }, classNames);
+    const componentClassNames = getClassNames(isText ? 'textButton' : 'button', { props: { ...classNameProps, ...applyVariants(variant) } }, classNames);
     const className = tw('flex cursor-pointer items-center justify-center whitespace-nowrap', isDisabled || isLoading ? 'pointer-events-none opacity-30' : null, isFullWidth ? 'w-full' : null, componentClassNames?.root);
     /*
      *  Link uses classNames, whereas button uses className. This is because Link can also be used

package/dist/components/collections/Collection/index.d.ts

@@ -4,14 +4,18 @@ import type { EmptyMessageProps } from '../EmptyMessage';
 import type { ListFunctionConfig, Paginated } from '../interfaces';
 export interface CollectionComponentProps<Item, Transformed, Filters = null> {
     readonly data?: Item[] | Paginated<Item>;
+    readonly defaultFilters?: Partial<Filters>;
     readonly emptyMessageProps?: EmptyMessageProps;
     readonly filterMap?: FilterMap<Filters>;
     readonly fn?: (config: ListFunctionConfig<Filters>) => Promise<Item[]> | Promise<Paginated<Item>>;
     readonly pageProps?: NextPageProps;
+    readonly renderFilters?: (props: {
+        map: FilterMap<Filters>;
+    }) => React.ReactElement;
     readonly transformer: (item: Item) => Transformed;
 }
 export interface CollectionProps<Item, Transformed, Filters = null> extends CollectionComponentProps<Item, Transformed, Filters> {
     readonly render: (data: Transformed[]) => React.ReactElement;
 }
-declare function Collection<Item extends object, Transformed, Filters>({ filterMap, ...props }: CollectionProps<Item, Transformed, Filters>): React.ReactElement;
+declare function Collection<Item extends object, Transformed, Filters>({ filterMap, renderFilters, ...props }: CollectionProps<Item, Transformed, Filters>): React.ReactElement;
 export default Collection;

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

@@ -10,7 +10,7 @@ import EmptyMessage from '../EmptyMessage';
 import Pagination from '../Pagination';
 import isPaginated from '../utility/is-paginated';
 import { messages } from '../lang';
-async function CollectionComponent({ data, emptyMessageProps, filterMap, fn, pageProps, render, transformer, }) {
+async function CollectionComponent({ data, defaultFilters, emptyMessageProps, filterMap, fn, pageProps, render, transformer, }) {
     const EmptyIcon = getIcon('collection.empty');
     const awaitedParams = pageProps?.params ? await pageProps.params : null;
     const awaitedSearchParams = pageProps?.searchParams ? await pageProps.searchParams : null;
@@ -23,7 +23,7 @@ async function CollectionComponent({ data, emptyMessageProps, filterMap, fn, pag
         }
         const filters = parseFilters(awaitedSearchParams, filterMap);
         const page = parsePage(awaitedSearchParams);
-        return fn({ filters, page, params: awaitedParams });
+        return fn({ filters: { ...defaultFilters, ...filters }, page, params: awaitedParams });
     }
     const response = await getResponse();
     const dynamicData = (isPaginated(response) ? response.data : response).map(transformer);
@@ -39,7 +39,7 @@ async function CollectionComponent({ data, emptyMessageProps, filterMap, fn, pag
     }
     return (_jsxs(Fragment, { children: [render(dynamicData), isPaginated(response) ? (_jsx(Pagination, { ...response.meta, nextLabel: "Next \u2192", previousLabel: "\u2190 Previous" })) : null] }));
 }
-function Collection({ filterMap, ...props }) {
-    return (_jsxs(Fragment, { children: [filterMap ? _jsx(FilterBar, { map: filterMap }) : null, _jsx(Suspense, { fallback: _jsx("div", { className: "flex justify-center p-16", children: _jsx(Loader, {}) }), children: _jsx(CollectionComponent, { ...props, filterMap: filterMap }) })] }));
+function Collection({ filterMap, renderFilters = FilterBar, ...props }) {
+    return (_jsxs(Fragment, { children: [filterMap ? renderFilters({ map: filterMap }) : null, _jsx(Suspense, { fallback: _jsx("div", { className: "flex justify-center p-16", children: _jsx(Loader, {}) }), children: _jsx(CollectionComponent, { ...props, filterMap: filterMap }) })] }));
 }
 export default Collection;

package/dist/components/collections/DataTable/index.d.ts

@@ -8,7 +8,7 @@ export interface DataTableClassNames {
     value: string;
 }
 export interface DataTableProps extends ClassNameProps<DataTableClassNames> {
-    readonly data: DataTableObject[];
+    readonly data: (DataTableObject | null)[];
 }
 declare function DataTable({ classNameProps, classNames, data }: DataTableProps): React.ReactElement;
 export default DataTable;

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

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { filterNull } from '@sqrzro/utility';
 import { getClassNames } from '../../../styles/classnames';
 import tw from '../../../styles/classnames/tw';
 function DataTable({ classNameProps, classNames, data }) {
     const componentClassNames = getClassNames('dataTable', { props: classNameProps }, classNames);
-    return (_jsx("table", { className: tw('w-full', componentClassNames?.root), children: _jsx("tbody", { children: data.map(({ label, value }, index) => (_jsxs("tr", { className: componentClassNames?.row, children: [_jsx("th", { className: tw(componentClassNames?.cell, componentClassNames?.label), children: label }), _jsx("td", { className: tw(componentClassNames?.cell, componentClassNames?.value), children: value })] }, index))) }) }));
+    return (_jsx("table", { className: tw('w-full', componentClassNames?.root), children: _jsx("tbody", { children: filterNull(data).map(({ label, value }, index) => (_jsxs("tr", { className: componentClassNames?.row, children: [_jsx("th", { className: tw(componentClassNames?.cell, componentClassNames?.label), children: label }), _jsx("td", { className: tw(componentClassNames?.cell, componentClassNames?.value), children: value })] }, index))) }) }));
 }
 export default DataTable;

package/dist/components/collections/List/index.d.ts

@@ -1,5 +1,6 @@
 import { CollectionComponentProps } from '../Collection';
 import type { ListItemObject } from '../interfaces';
+export type { ListClassNames } from '../ListClientComponent';
 export type ListProps<Item, Filters = null, Data extends object | null = null> = CollectionComponentProps<Item, ListItemObject<Data>, Filters>;
-declare function List<Item extends object, Filters, Data extends object | null = null>(props: ListProps<Item, Filters, Data>): React.ReactElement;
+declare function List<Item extends object, Filters = null, Data extends object | null = null>(props: ListProps<Item, Filters, Data>): React.ReactElement;
 export default List;

package/dist/components/collections/ListClientComponent/index.d.ts

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

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

@@ -1,9 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment } from 'react';
+import { getClassNames } from '../../../styles/classnames';
 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))) }));
+classNameProps, classNames, data, renderItem = ListItem, }) {
+    const componentClassNames = getClassNames('list', { props: classNameProps }, classNames);
+    return (_jsx("ul", { className: componentClassNames?.root, children: data.map((item) => (_jsx(Fragment, { children: renderItem({ /*actions,*/ ...item }) }, item.id))) }));
 }
 export default ListClientComponent;

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

@@ -23,6 +23,6 @@ classNames, classNameProps, description, href, id, isLoading, meta, secondary, t
     const hasTertiary = Boolean(tertiary);
     return (_jsx("li", { className: tw('@container relative grid', componentClassNames?.root, isLoading ? 'pointer-events-none animate-pulse' : null
         // typeof actions === 'function' ? 'grid-cols-[1fr_auto] gap-4' : 'grid-cols-1'
-        ), children: _jsx("article", { className: "contents", children: _jsxs("div", { className: tw('grid gap-x-6 gap-y-4', getLayout([hasPrimary, hasSecondary, hasTertiary])), children: [_jsxs("div", { className: componentClassNames?.primary, children: [title ? (_jsx("h2", { className: componentClassNames?.title, children: href ? (_jsx(Link, { className: "hover:text-link", href: href, children: title })) : (title) })) : null, description ? (_jsx("div", { className: componentClassNames?.description, children: description })) : null, _jsx(ListItemMeta, { classNameProps: classNameProps, data: meta?.data, id: id })] }), tertiary ? (_jsx("div", { className: componentClassNames?.tertiary, children: tertiary })) : null, _jsx(ListItemSecondary, { classNameProps: classNameProps, classNames: classNames, data: secondary?.data, variant: variant })] }) }) }));
+        ), children: _jsx("article", { className: "contents", children: _jsxs("div", { className: tw('grid gap-x-6 gap-y-4', getLayout([hasPrimary, hasSecondary, hasTertiary])), children: [_jsxs("div", { className: componentClassNames?.primary, children: [title ? (_jsx("h2", { className: componentClassNames?.title, children: href ? (_jsx(Link, { className: "hover:text-link", href: href, children: title })) : (title) })) : null, description ? (_jsx("div", { className: componentClassNames?.description, children: description })) : null, _jsx(ListItemMeta, { classNameProps: classNameProps, data: meta })] }), tertiary ? (_jsx("div", { className: componentClassNames?.tertiary, children: tertiary })) : null, _jsx(ListItemSecondary, { classNameProps: classNameProps, classNames: classNames, data: secondary?.data, variant: variant })] }) }) }));
 }
 export default ListItem;

package/dist/components/collections/ListItemMeta/index.d.ts

@@ -1,11 +1,13 @@
 import type { ClassNameProps } from '../../../styles/classnames/interfaces';
-import type { ListItemObject } from '../interfaces';
+import type { DataTableObject } from '../interfaces';
 export interface ListItemMetaClassNames {
     root: string;
     row: string;
     title: string;
     value: string;
 }
-export type ListItemMetaProps = ClassNameProps<ListItemMetaClassNames> & ListItemObject['meta'];
-declare function ListItemMeta({ classNameProps, classNames, id, data, }: Readonly<ListItemMetaProps>): React.ReactElement | null;
+export type ListItemMetaProps = ClassNameProps<ListItemMetaClassNames> & {
+    data?: React.ReactNode[] | (DataTableObject | null)[];
+};
+declare function ListItemMeta({ classNameProps, classNames, data, }: Readonly<ListItemMetaProps>): React.ReactElement | null;
 export default ListItemMeta;

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

@@ -1,7 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { isValidElement } from 'react';
 import { filterNull } from '@sqrzro/utility';
 import { getClassNames } from '../../../styles/classnames';
+import DataTable from '../DataTable';
+import isDataTableArray from '../utility/is-data-table-array';
 function getKey(item) {
     if (isValidElement(item)) {
         return item.key || '-';
@@ -11,11 +13,15 @@ function getKey(item) {
     }
     return String(item);
 }
-function ListItemMeta({ classNameProps, classNames, id, data, }) {
+function ListItemMeta({ classNameProps, classNames, data, }) {
     const componentClassNames = getClassNames('listItemMeta', { props: classNameProps }, classNames);
-    if (!data) {
+    if (!data?.length) {
         return null;
     }
-    return Array.isArray(data) ? (_jsx("ul", { className: componentClassNames?.root, children: filterNull(data).map((item) => (_jsx("li", { className: "whitespace-nowrap", children: item }, getKey(item)))) })) : (_jsx("table", { className: "w-full", children: _jsx("tbody", { children: Object.entries(data).map(([key, value]) => (_jsxs("tr", { className: componentClassNames?.row, children: [_jsx("th", { className: componentClassNames?.title, children: key }), _jsx("td", { className: componentClassNames?.value, children: value || '-' })] }, key))) }) }));
+    const filteredData = filterNull(data);
+    if (isDataTableArray(filteredData)) {
+        return _jsx(DataTable, { data: filteredData });
+    }
+    return (_jsx("ul", { className: componentClassNames?.root, children: filteredData.map((item) => (_jsx("li", { className: "whitespace-nowrap", children: item }, getKey(item)))) }));
 }
 export default ListItemMeta;

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

@@ -10,6 +10,6 @@ function ListItemSecondary({ classNameProps, classNames, data, variant, }) {
     if (isValidElement(data)) {
         return _jsx("div", { className: componentClassNames?.secondary, children: data });
     }
-    return (_jsxs("div", { className: componentClassNames?.secondary, children: [data.title ? _jsx("p", { className: componentClassNames?.title, children: data.title }) : null, data.description ? (_jsx("div", { className: componentClassNames?.description, children: data.description })) : null, _jsx(ListItemMeta, { classNameProps: { ...classNameProps, isSecondary: true }, data: data.meta?.data, id: "secondary" })] }));
+    return (_jsxs("div", { className: componentClassNames?.secondary, children: [data.title ? _jsx("p", { className: componentClassNames?.title, children: data.title }) : null, data.description ? (_jsx("div", { className: componentClassNames?.description, children: data.description })) : null, _jsx(ListItemMeta, { classNameProps: { ...classNameProps, isSecondary: true }, data: data.meta })] }));
 }
 export default ListItemSecondary;

package/dist/components/collections/interfaces.d.ts

@@ -8,26 +8,19 @@ export type ListFunctionConfig<Filters = null> = CollectionFunctionConfig<Filter
 export interface ListItemObject<Data extends object | null = null> {
     $data?: Data;
     actions?: Action[];
-    description?: React.ReactNode | null;
+    description?: React.ReactNode;
     href?: string;
     id: string;
-    isMinimal?: boolean;
     image?: string | null;
     imageHref?: string | null;
     isLoading?: boolean;
-    meta?: {
-        data?: React.ReactNode[] | Record<string, React.ReactNode>;
-        id: string;
-    };
+    meta?: React.ReactNode[] | (DataTableObject | null)[];
     permission?: string;
     secondary?: {
         data?: React.ReactElement | {
-            description?: string;
-            meta?: {
-                data?: React.ReactNode[] | Record<string, React.ReactNode>;
-                id: string;
-            };
-            title?: string;
+            description?: React.ReactNode;
+            meta?: React.ReactNode[] | (DataTableObject | null)[];
+            title?: React.ReactNode;
         } | null;
         variant?: StyleVariant | null;
     };

package/dist/components/collections/utility/is-data-table-array.d.ts

@@ -0,0 +1,3 @@
+import type { DataTableObject } from '../interfaces';
+declare function isDataTableArray(item: unknown): item is DataTableObject[];
+export default isDataTableArray;

package/dist/components/collections/utility/is-data-table-array.js

@@ -0,0 +1,5 @@
+import isDataTableObject from './is-data-table-object';
+function isDataTableArray(item) {
+    return Array.isArray(item) && item.every(isDataTableObject);
+}
+export default isDataTableArray;

package/dist/components/collections/utility/is-data-table-object.d.ts

@@ -0,0 +1,3 @@
+import type { DataTableObject } from '../interfaces';
+declare function isDataTableObject(item: unknown): item is DataTableObject;
+export default isDataTableObject;

package/dist/components/collections/utility/is-data-table-object.js

@@ -0,0 +1,4 @@
+function isDataTableObject(item) {
+    return typeof item === 'object' && item !== null && 'label' in item && 'value' in item;
+}
+export default isDataTableObject;

package/dist/components/modals/ConfirmModal/index.js

@@ -9,7 +9,7 @@ function ConfirmModal({ confirmable, ...modalProps }) {
         setConfirmText(event.target.value?.toUpperCase() || '');
     }
     return (_jsxs(Modal, { ...modalProps, actions: [
-            { label: 'Cancel', variant: 'link' },
+            { label: 'Cancel' },
             ...(confirmable.actions || []),
             {
                 isDisabled: Boolean(confirmable.confirmText &&

package/dist/filters/index.d.ts

@@ -1,2 +1,3 @@
 export * from './interfaces';
+export { default as FilterBar } from './components/FilterBar';
 export { default as filter } from './utility/filter';

package/dist/filters/index.js

@@ -1,2 +1,3 @@
 export * from './interfaces';
+export { default as FilterBar } from './components/FilterBar';
 export { default as filter } from './utility/filter';

package/dist/forms/components/ModalForm/index.js

@@ -10,7 +10,7 @@ function ModalForm({ children, formProps, hasServerError, hasSubmit = true, isDi
         setSearchParamsHref('action', null);
     }
     return (_jsx(Modal, { ...modalProps, children: _jsxs(Form, { ...formProps, children: [children, hasServerError ? _jsx("div", { children: "SERVER ERROR" }) : null, _jsx(ModalActions, { actions: [
-                        { label: 'Cancel', onClick: handleCancel, variant: 'link' },
+                        { label: 'Cancel', onClick: handleCancel },
                         ...(modalProps.actions || []),
                         hasSubmit
                             ? {

package/dist/styles/classnames/apply-variants.d.ts

@@ -0,0 +1,3 @@
+import type { StyleVariant } from '../../utility/interfaces';
+declare function applyVariants(variants?: StyleVariant[] | StyleVariant): Record<string, boolean>;
+export default applyVariants;

package/dist/styles/classnames/apply-variants.js

@@ -0,0 +1,25 @@
+const keyMap = {
+    bordered: 'isBordered',
+    danger: 'isDanger',
+    error: 'isError',
+    info: 'isInfo',
+    primary: 'isPrimary',
+    secondary: 'isSecondary',
+    success: 'isSuccess',
+    tertiary: 'isTertiary',
+    warning: 'isWarning',
+};
+function applyVariants(variants) {
+    if (!variants) {
+        return {};
+    }
+    const variantArray = Array.isArray(variants) ? variants : [variants];
+    return variantArray.reduce((acc, variant) => {
+        const key = keyMap[variant];
+        if (key) {
+            acc[key] = true;
+        }
+        return acc;
+    }, {});
+}
+export default applyVariants;

package/dist/styles/classnames/config.d.ts

@@ -2,6 +2,7 @@ import type { ButtonClassNames } from '../../components/buttons/Button';
 import type { TextButtonClassNames } from '../../components/buttons/TextButton';
 import type { DataTableClassNames } from '../../components/collections/DataTable';
 import type { EmptyMessageClassNames } from '../../components/collections/EmptyMessage';
+import type { ListClassNames } from '../../components/collections/ListClientComponent';
 import type { ListItemClassNames } from '../../components/collections/ListItem';
 import type { ListItemMetaClassNames } from '../../components/collections/ListItemMeta';
 import type { PaginationClassNames } from '../../components/collections/Pagination';
@@ -47,6 +48,7 @@ export interface RegisteredClassNames {
     form?: ComponentClassNames<FormClassNames>;
     formField?: ComponentClassNames<FormFieldClassNames>;
     link?: ComponentClassNames<LinkClassNames>;
+    list?: ComponentClassNames<ListClassNames>;
     listItem?: ComponentClassNames<ListItemClassNames>;
     listItemMeta?: ComponentClassNames<ListItemMetaClassNames>;
     loader?: ComponentClassNames<LoaderClassNames>;

package/dist/styles/classnames/interfaces.d.ts

@@ -42,6 +42,15 @@ export type SizableClassName = string | StatefulClassName<{
     isMedium?: string;
     isSmall?: string;
 }>;
-export type StylableClassName = string | StatefulClassName;
-export type StylableButtonClassName = string | StatefulClassName;
+export type StylableClassName = string | StatefulClassName<{
+    isBordered?: string;
+    isDanger?: string;
+    isError?: string;
+    isInfo?: string;
+    isPrimary?: string;
+    isSecondary?: string;
+    isSuccess?: string;
+    isTertiary?: string;
+    isWarning?: string;
+}>;
 export {};

package/dist/styles/styles.css

@@ -0,0 +1,59 @@
+@theme {
+    /* These are defaults that will (probably) be overwritten by the consuming application */
+    --color-primary: var(--color-teal-600);
+    --color-primary-dark: var(--color-teal-700);
+    --color-on-primary: var(--color-white);
+    /* End defaults */
+
+    --color-button-bg: var(--color-primary);
+    --color-button-bg-hover: var(--color-primary-dark);
+    --color-button-text: var(--color-on-primary);
+    --color-link: var(--color-primary);
+    --color-panel: var(--color-white);
+
+    --color-error: var(--color-red-600);
+}
+
+@layer base {
+    button {
+        @apply cursor-pointer;
+    }
+    
+    hr {
+        @apply border-slate-200;
+    }
+
+    input::-webkit-inner-spin-button {
+        @apply appearance-none m-0;
+    }
+
+    input[type=number] {
+        -moz-appearance: textfield;
+    }
+
+    small {
+        @apply text-xs;
+    }
+
+    strong {
+        @apply font-semibold;
+    }
+}
+
+@layer utilities {
+    .fade-closed {
+        @apply invisible opacity-0 ease-in-out;
+    }
+
+    .fade-open {
+        @apply transition-discrete transition-all duration-100 starting:opacity-0 visible opacity-100;
+    }
+
+    .show-closed {
+        @apply invisible opacity-0 ease-in-out scale-90;
+    }
+
+    .show-open {
+        @apply transition-discrete transition-all duration-100 starting:opacity-0 starting:scale-90 visible opacity-100 scale-100;
+    }
+}

package/dist/utility/interfaces.d.ts

@@ -21,7 +21,7 @@ export interface Action {
     isSubmittable?: boolean;
     label: React.ReactNode;
     onClick?: () => void;
-    variant?: ButtonVariant;
+    variant?: StyleVariant[] | StyleVariant;
 }
 export interface NextLayoutProps {
     children: React.ReactNode;
@@ -32,4 +32,3 @@ export interface NextPageProps {
     searchParams?: Promise<Record<string, string>> | null;
 }
 export type StyleVariant = 'bordered' | 'danger' | 'error' | 'info' | 'primary' | 'secondary' | 'success' | 'tertiary' | 'warning';
-export type ButtonVariant = StyleVariant | 'link';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sqrzro/ui",
   "type": "module",
-  "version": "4.0.0-alpha.14",
+  "version": "4.0.0-alpha.16",
   "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.3"
+    "@sqrzro/utility": "^4.0.0-alpha.4"
   },
   "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\"",