@sqrzro/ui 4.0.0-alpha.13 → 4.0.0-alpha.15

package/dist/styles/icons/index.d.ts

@@ -0,0 +1,4 @@
+import type { RegisteredIcons } from './config';
+import type { IconComponent } from './interfaces';
+export declare function registerIcons(data: RegisteredIcons): void;
+export declare function getIcon(componentName: keyof RegisteredIcons): IconComponent | null;

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

@@ -0,0 +1,4 @@
+export type IconComponent = React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & {
+    title?: string;
+    titleId?: string;
+} & React.RefAttributes<SVGSVGElement>>;

package/dist/styles/icons/interfaces.js

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

package/dist/styles/index.d.ts

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

package/dist/styles/index.js

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

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.13",
+  "version": "4.0.0-alpha.15",
   "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.2"
+    "@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\"",

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,66 +0,0 @@
-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 { 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>;
-    dataTable?: ComponentClassNames<DataTableClassNames>;
-    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;
-};