@fuf-stack/pixels 0.0.5 → 0.0.8

package/dist/hooks/useLocalStorage.d.ts

@@ -0,0 +1,5 @@
+import { Dispatch, SetStateAction } from 'react';
+
+declare const useLocalStorage: <T>(key: string, initialValue: T | (() => T)) => [T, Dispatch<SetStateAction<T>>];
+
+export { useLocalStorage as default };

package/dist/hooks/useLocalStorage.js

@@ -0,0 +1,52 @@
+// src/hooks/useLocalStorage.ts
+import { useEffect, useState } from "react";
+var useLocalStorage = (key, initialValue) => {
+  const readValue = () => {
+    if (typeof window === "undefined") {
+      return initialValue;
+    }
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      console.warn(`Error reading localStorage key \u201C${key}\u201D:`, error);
+      return initialValue;
+    }
+  };
+  const [storedValue, setStoredValue] = useState(readValue);
+  const setValue = (value) => {
+    if (typeof window === "undefined") {
+      console.warn(
+        `Tried setting localStorage key \u201C${key}\u201D even though environment is not a client`
+      );
+    }
+    try {
+      const newValue = value instanceof Function ? value(storedValue) : value;
+      window.localStorage.setItem(key, JSON.stringify(newValue));
+      setStoredValue(newValue);
+      window.dispatchEvent(new Event("local-storage"));
+    } catch (error) {
+      console.warn(`Error setting localStorage key \u201C${key}\u201D:`, error);
+    }
+  };
+  useEffect(() => {
+    setStoredValue(readValue());
+  }, []);
+  useEffect(() => {
+    const handleStorageChange = () => {
+      setStoredValue(readValue());
+    };
+    window.addEventListener("storage", handleStorageChange);
+    window.addEventListener("local-storage", handleStorageChange);
+    return () => {
+      window.removeEventListener("storage", handleStorageChange);
+      window.removeEventListener("local-storage", handleStorageChange);
+    };
+  }, []);
+  return [storedValue, setValue];
+};
+var useLocalStorage_default = useLocalStorage;
+export {
+  useLocalStorage_default as default
+};
+//# sourceMappingURL=useLocalStorage.js.map

package/dist/hooks/useLocalStorage.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useLocalStorage.ts"],"sourcesContent":["import type { Dispatch, SetStateAction } from 'react';\n\nimport { useEffect, useState } from 'react';\n\nconst useLocalStorage = <T>(\n  key: string,\n  initialValue: T | (() => T),\n): [T, Dispatch<SetStateAction<T>>] => {\n  // Get from local storage then\n  // parse stored json or return initialValue\n  const readValue = () => {\n    // Prevent build error \"window is undefined\" but keep keep working\n    if (typeof window === 'undefined') {\n      return initialValue;\n    }\n\n    try {\n      const item = window.localStorage.getItem(key);\n      return item ? JSON.parse(item) : initialValue;\n    } catch (error) {\n      console.warn(`Error reading localStorage key “${key}”:`, error);\n      return initialValue;\n    }\n  };\n\n  // State to store our value\n  // Pass initial state function to useState so logic is only executed once\n  const [storedValue, setStoredValue] = useState<T>(readValue);\n\n  // Return a wrapped version of useState's setter function that ...\n  // ... persists the new value to localStorage.\n  const setValue: Dispatch<SetStateAction<T>> = (value) => {\n    // Prevent build error \"window is undefined\" but keeps working\n    if (typeof window === 'undefined') {\n      console.warn(\n        `Tried setting localStorage key “${key}” even though environment is not a client`,\n      );\n    }\n\n    try {\n      // Allow value to be a function so we have the same API as useState\n      const newValue = value instanceof Function ? value(storedValue) : value;\n\n      // Save to local storage\n      window.localStorage.setItem(key, JSON.stringify(newValue));\n\n      // Save state\n      setStoredValue(newValue);\n\n      // We dispatch a custom event so every useLocalStorage hook are notified\n      window.dispatchEvent(new Event('local-storage'));\n    } catch (error) {\n      console.warn(`Error setting localStorage key “${key}”:`, error);\n    }\n  };\n\n  useEffect(() => {\n    setStoredValue(readValue());\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    const handleStorageChange = () => {\n      setStoredValue(readValue());\n    };\n\n    // this only works for other documents, not the current one\n    window.addEventListener('storage', handleStorageChange);\n\n    // this is a custom event, triggered in writeValueToLocalStorage\n    window.addEventListener('local-storage', handleStorageChange);\n\n    return () => {\n      window.removeEventListener('storage', handleStorageChange);\n      window.removeEventListener('local-storage', handleStorageChange);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return [storedValue, setValue];\n};\n\nexport default useLocalStorage;\n"],"mappings":";AAEA,SAAS,WAAW,gBAAgB;AAEpC,IAAM,kBAAkB,CACtB,KACA,iBACqC;AAGrC,QAAM,YAAY,MAAM;AAEtB,QAAI,OAAO,WAAW,aAAa;AACjC,aAAO;AAAA,IACT;AAEA,QAAI;AACF,YAAM,OAAO,OAAO,aAAa,QAAQ,GAAG;AAC5C,aAAO,OAAO,KAAK,MAAM,IAAI,IAAI;AAAA,IACnC,SAAS,OAAO;AACd,cAAQ,KAAK,wCAAmC,GAAG,WAAM,KAAK;AAC9D,aAAO;AAAA,IACT;AAAA,EACF;AAIA,QAAM,CAAC,aAAa,cAAc,IAAI,SAAY,SAAS;AAI3D,QAAM,WAAwC,CAAC,UAAU;AAEvD,QAAI,OAAO,WAAW,aAAa;AACjC,cAAQ;AAAA,QACN,wCAAmC,GAAG;AAAA,MACxC;AAAA,IACF;AAEA,QAAI;AAEF,YAAM,WAAW,iBAAiB,WAAW,MAAM,WAAW,IAAI;AAGlE,aAAO,aAAa,QAAQ,KAAK,KAAK,UAAU,QAAQ,CAAC;AAGzD,qBAAe,QAAQ;AAGvB,aAAO,cAAc,IAAI,MAAM,eAAe,CAAC;AAAA,IACjD,SAAS,OAAO;AACd,cAAQ,KAAK,wCAAmC,GAAG,WAAM,KAAK;AAAA,IAChE;AAAA,EACF;AAEA,YAAU,MAAM;AACd,mBAAe,UAAU,CAAC;AAAA,EAE5B,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,UAAM,sBAAsB,MAAM;AAChC,qBAAe,UAAU,CAAC;AAAA,IAC5B;AAGA,WAAO,iBAAiB,WAAW,mBAAmB;AAGtD,WAAO,iBAAiB,iBAAiB,mBAAmB;AAE5D,WAAO,MAAM;AACX,aAAO,oBAAoB,WAAW,mBAAmB;AACzD,aAAO,oBAAoB,iBAAiB,mBAAmB;AAAA,IACjE;AAAA,EAEF,GAAG,CAAC,CAAC;AAEL,SAAO,CAAC,aAAa,QAAQ;AAC/B;AAEA,IAAO,0BAAQ;","names":[]}

package/package.json

@@ -2,11 +2,10 @@
   "name": "@fuf-stack/pixels",
   "description": "fuf react component library",
   "author": "Hannes Tiede",
-  "version": "0.0.5",
+  "version": "0.0.8",
   "type": "module",
   "exports": {
-    "./": "./dist/",
-    "./components/*": "./dist/components/*/index.js"
+    "./": "./dist/"
   },
   "typesVersions": {
     "*": {
@@ -15,7 +14,10 @@
       ]
     }
   },
-  "homepage": "https://github.com/fuf-stack/uniforms#readme",
+  "files": [
+    "./dist"
+  ],
+  "homepage": "https://github.com/fuf-stack/uniform/tree/main/packages/pixels",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -54,7 +56,6 @@
     "@types/debug": "4.1.12",
     "@types/react": "18.2.69",
     "@types/react-dom": "18.2.22",
-    "tsup": "8.0.2",
     "storybook-config": "0.0.1",
     "tailwind-config": "0.0.1"
   },

package/.eslintrc

@@ -1,16 +0,0 @@
-{
-  "overrides": [
-    {
-      "files": ["*.ts", "*.tsx"],
-      "rules": {
-        "import/no-unresolved": "off"
-      }
-    },
-    {
-      "files": ["*.stories.tsx"],
-      "rules": {
-        "import/no-extraneous-dependencies": "off"
-      }
-    }
-  ]
-}

package/.storybook/main.ts

@@ -1,8 +0,0 @@
-import sharedConfig, { StorybookConfig } from 'storybook-config/main';
-
-const config: StorybookConfig = {
-  ...sharedConfig,
-  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
-};
-
-export default config;

package/.storybook/preview-head.html

@@ -1,3 +0,0 @@
-<script>
-  window.global = window;
-</script>

package/.storybook/preview.tsx

@@ -1,7 +0,0 @@
-import sharedPreview, { Preview } from 'storybook-config/preview';
-
-const preview: Preview = {
-  ...sharedPreview,
-};
-
-export default preview;

package/CHANGELOG.md

@@ -1,36 +0,0 @@
-# Changelog
-
-## [0.0.5](https://github.com/fuf-stack/uniform/compare/pixels-v0.0.4...pixels-v0.0.5) (2024-04-12)
-
-
-### Bug Fixes
-
-* **pixels:** move components into components folder ([9da42b1](https://github.com/fuf-stack/uniform/commit/9da42b10afe5a65351c93850139531659d1f6780))
-
-## [0.0.4](https://github.com/fuf-stack/uniform/compare/pixels-v0.0.3...pixels-v0.0.4) (2024-04-12)
-
-
-### Bug Fixes
-
-* **pixels:** fix exports definition ([ab58ff9](https://github.com/fuf-stack/uniform/commit/ab58ff9464fe41327fce7fd03b083e57b9fbfaaf))
-
-## [0.0.3](https://github.com/fuf-stack/uniform/compare/pixels-v0.0.2...pixels-v0.0.3) (2024-04-12)
-
-
-### Bug Fixes
-
-* **pixels:** add exports definition ([052874c](https://github.com/fuf-stack/uniform/commit/052874c5d6709b5aa31e10f6f4a34ac40dd20c3d))
-
-## [0.0.2](https://github.com/fuf-stack/uniform/compare/pixels-v0.0.1...pixels-v0.0.2) (2024-04-12)
-
-
-### Bug Fixes
-
-* **pixels:** add npm publish config ([e148803](https://github.com/fuf-stack/uniform/commit/e148803d5259943dd53e059d1fa1c506556f03d9))
-
-## 0.0.1 (2024-04-12)
-
-
-### Features
-
-* **pixels:** add inital package ([ad580ee](https://github.com/fuf-stack/uniform/commit/ad580eec37a2fefc5a61e08ce25c8e0328ba582f))

package/Globals.d.ts

@@ -1,3 +0,0 @@
-declare module '*.module.css';
-declare module '*.png';
-declare module '*.svg';

package/dist/chunk-WQN756O7.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import type { ButtonProps as NextButtonProps } from '@nextui-org/button';\nimport type { ReactNode } from 'react';\n\nimport { Button as NextButton } from '@nextui-org/button';\nimport cn from 'classnames';\n\nimport LoadingSpinner from './subcomponents/LoadingSpinner';\n\nexport interface ButtonProps {\n  /** sets HTML aria-label attribute */\n  ariaLabel?: string;\n  /** child components */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: string | string[];\n  /** next ui button color  */\n  color?: NextButtonProps['color'];\n  /** disables function of the button. */\n  disabled?: boolean;\n  /** If set loading animation is shown */\n  loading?: boolean;\n  /** optional icon */\n  icon?: ReactNode;\n  /** on click event */\n  onClick?: NextButtonProps['onPress'];\n  /** 3 size options */\n  size?: NextButtonProps['size'];\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** sets the button type. */\n  type?: 'button' | 'submit' | 'reset' | undefined;\n  /** next ui button variants */\n  variant?: NextButtonProps['variant'];\n}\n\n/**\n * Button component based on [NextUI Button](https://nextui.org/docs/components/button)\n */\nconst Button = ({\n  ariaLabel = undefined,\n  children = undefined,\n  className = undefined,\n  color = 'default',\n  disabled = false,\n  icon = undefined,\n  loading = false,\n  onClick = undefined,\n  size = undefined,\n  testId = undefined,\n  type = undefined,\n  variant = 'solid',\n}: ButtonProps) => {\n  return (\n    <NextButton\n      aria-label={ariaLabel}\n      className={cn(className)}\n      color={color}\n      data-testid={testId}\n      isDisabled={disabled}\n      isIconOnly={!!(icon && !children)}\n      isLoading={loading}\n      onPress={onClick}\n      size={size}\n      spinner={<LoadingSpinner />}\n      type={type}\n      variant={variant}\n    >\n      {icon}\n      {children}\n    </NextButton>\n  );\n};\n\nexport default Button;\n"],"mappings":";;;;;AAGA,SAAS,UAAU,kBAAkB;AACrC,OAAO,QAAQ;AAiDX,SAUW,KAVX;AAfJ,IAAM,SAAS,CAAC;AAAA,EACd,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,OAAO;AAAA,EACP,SAAS;AAAA,EACT,OAAO;AAAA,EACP,UAAU;AACZ,MAAmB;AACjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ,WAAW,GAAG,SAAS;AAAA,MACvB;AAAA,MACA,eAAa;AAAA,MACb,YAAY;AAAA,MACZ,YAAY,CAAC,EAAE,QAAQ,CAAC;AAAA,MACxB,WAAW;AAAA,MACX,SAAS;AAAA,MACT;AAAA,MACA,SAAS,oBAAC,0BAAe;AAAA,MACzB;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,QACA;AAAA;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,iBAAQ;","names":[]}

package/dist/chunk-XWTXH2TR.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/Card/Card.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { VariantProps } from 'tailwind-variants';\n\nimport {\n  Card as NextCard,\n  CardBody as NextCardBody,\n  CardFooter as NextCardFooter,\n  CardHeader as NextCardHeader,\n} from '@nextui-org/card';\nimport { Divider as NextDivider } from '@nextui-org/divider';\nimport createDebug from 'debug';\nimport { tv } from 'tailwind-variants';\n\nconst debug = createDebug('component:Card');\n\n// card styling variants\nexport const cardVariants = tv({\n  slots: {\n    base: 'border border-slate-300',\n    body: '',\n    divider: 'my-0 bg-slate-300',\n    footer: '',\n    header: 'text-base font-semibold',\n  },\n});\n\ntype CardVariantProps = VariantProps<typeof cardVariants>;\ntype CardVariantSlots = Partial<\n  Record<keyof ReturnType<typeof cardVariants>, string>\n>;\n\nexport interface CardProps extends CardVariantProps {\n  /** child components */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: string | CardVariantSlots;\n  /** footer content */\n  footer?: ReactNode;\n  /** header content */\n  header?: ReactNode;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * Card component based on [NextUI Card](https://nextui.org/docs/components/card)\n */\nconst Card = ({\n  children = null,\n  className = undefined,\n  testId = undefined,\n  header = undefined,\n  footer = undefined,\n}: CardProps) => {\n  debug('Card', { className, testId });\n  const {\n    base: baseSlot,\n    body: bodySlot,\n    divider: dividerSlot,\n    footer: footerSlot,\n    header: headerSlot,\n  } = cardVariants();\n\n  return (\n    <NextCard\n      data-testid={testId && `card_${testId}`}\n      className={baseSlot({\n        className: typeof className === 'object' ? className.base : className,\n      })}\n      fullWidth\n      radius=\"sm\"\n      shadow=\"none\"\n    >\n      {header && (\n        <>\n          <NextCardHeader\n            data-testid={testId && `card_header_${testId}`}\n            className={headerSlot({\n              className: typeof className === 'object' && className.header,\n            })}\n          >\n            {header}\n          </NextCardHeader>\n          <NextDivider\n            className={dividerSlot({\n              className: typeof className === 'object' && className.divider,\n            })}\n          />\n        </>\n      )}\n      <NextCardBody\n        data-testid={testId && `card_body_${testId}`}\n        className={bodySlot({\n          className: typeof className === 'object' && className.body,\n        })}\n      >\n        {children}\n      </NextCardBody>\n      {footer && (\n        <>\n          <NextDivider\n            className={dividerSlot({\n              className: typeof className === 'object' && className.divider,\n            })}\n          />\n          <NextCardFooter\n            data-testid={testId && `card_footer_${testId}`}\n            className={footerSlot({\n              className: typeof className === 'object' && className.footer,\n            })}\n          >\n            {footer}\n          </NextCardFooter>\n        </>\n      )}\n    </NextCard>\n  );\n};\n\nexport default Card;\n"],"mappings":";AAGA;AAAA,EACE,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,cAAc;AAAA,OACT;AACP,SAAS,WAAW,mBAAmB;AACvC,OAAO,iBAAiB;AACxB,SAAS,UAAU;AA+DX,mBACE,KADF;AA7DR,IAAM,QAAQ,YAAY,gBAAgB;AAGnC,IAAM,eAAe,GAAG;AAAA,EAC7B,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,EACV;AACF,CAAC;AAuBD,IAAM,OAAO,CAAC;AAAA,EACZ,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AACX,MAAiB;AACf,QAAM,QAAQ,EAAE,WAAW,OAAO,CAAC;AACnC,QAAM;AAAA,IACJ,MAAM;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,EACV,IAAI,aAAa;AAEjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,UAAU,QAAQ,MAAM;AAAA,MACrC,WAAW,SAAS;AAAA,QAClB,WAAW,OAAO,cAAc,WAAW,UAAU,OAAO;AAAA,MAC9D,CAAC;AAAA,MACD,WAAS;AAAA,MACT,QAAO;AAAA,MACP,QAAO;AAAA,MAEN;AAAA,kBACC,iCACE;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,eAAa,UAAU,eAAe,MAAM;AAAA,cAC5C,WAAW,WAAW;AAAA,gBACpB,WAAW,OAAO,cAAc,YAAY,UAAU;AAAA,cACxD,CAAC;AAAA,cAEA;AAAA;AAAA,UACH;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,YAAY;AAAA,gBACrB,WAAW,OAAO,cAAc,YAAY,UAAU;AAAA,cACxD,CAAC;AAAA;AAAA,UACH;AAAA,WACF;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC,eAAa,UAAU,aAAa,MAAM;AAAA,YAC1C,WAAW,SAAS;AAAA,cAClB,WAAW,OAAO,cAAc,YAAY,UAAU;AAAA,YACxD,CAAC;AAAA,YAEA;AAAA;AAAA,QACH;AAAA,QACC,UACC,iCACE;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,YAAY;AAAA,gBACrB,WAAW,OAAO,cAAc,YAAY,UAAU;AAAA,cACxD,CAAC;AAAA;AAAA,UACH;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,eAAa,UAAU,eAAe,MAAM;AAAA,cAC5C,WAAW,WAAW;AAAA,gBACpB,WAAW,OAAO,cAAc,YAAY,UAAU;AAAA,cACxD,CAAC;AAAA,cAEA;AAAA;AAAA,UACH;AAAA,WACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,IAAO,eAAQ;","names":[]}

package/dist/chunk-YOPQSZ46.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/Button/subcomponents/LoadingSpinner.tsx"],"sourcesContent":["/**\n * svg loading spinner for button\n * @see https://nextui.org/docs/components/button#loading\n * */\nexport default () => (\n  <svg\n    className=\"animate-spin h-5 w-5 text-current\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <circle\n      className=\"opacity-25\"\n      cx=\"12\"\n      cy=\"12\"\n      r=\"10\"\n      stroke=\"currentColor\"\n      strokeWidth=\"4\"\n    />\n    <path\n      className=\"opacity-75\"\n      d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n"],"mappings":";AAKE,SAME,KANF;AADF,IAAO,yBAAQ,MACb;AAAA,EAAC;AAAA;AAAA,IACC,WAAU;AAAA,IACV,MAAK;AAAA,IACL,SAAQ;AAAA,IACR,OAAM;AAAA,IAEN;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,IAAG;AAAA,UACH,IAAG;AAAA,UACH,GAAE;AAAA,UACF,QAAO;AAAA,UACP,aAAY;AAAA;AAAA,MACd;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,GAAE;AAAA,UACF,MAAK;AAAA;AAAA,MACP;AAAA;AAAA;AACF;","names":[]}

package/src/components/Button/Button.stories.tsx

@@ -1,75 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import type { ButtonProps } from './Button';
-
-import Button from './Button';
-
-const meta: Meta<typeof Button> = {
-  title: 'pixels/Button',
-  component: Button,
-};
-
-export default meta;
-type Story = StoryObj<typeof Button>;
-
-export const Default: Story = {
-  args: {
-    children: 'Button',
-    testId: 'some-test-id',
-  },
-};
-
-export const Disabled: StoryObj<typeof Button> = {
-  args: {
-    children: 'Button',
-    disabled: true,
-  },
-};
-
-export const Loading: StoryObj<typeof Button> = {
-  args: {
-    children: 'Button',
-    loading: true,
-  },
-};
-
-export const AllColors: StoryObj<typeof Button> = {
-  render: () => (
-    <>
-      {['default', 'primary', 'secondary', 'success', 'warning', 'danger'].map(
-        (color) => (
-          <div key={color} style={{ marginTop: '10px' }}>
-            <Button color={color as ButtonProps['color']}>{color}</Button>
-          </div>
-        ),
-      )}
-    </>
-  ),
-};
-
-export const AllSizes: StoryObj<typeof Button> = {
-  render: () => (
-    <>
-      {['sm', 'md', 'lg'].map((size) => (
-        <div key={size} style={{ marginTop: '10px' }}>
-          <Button size={size as ButtonProps['size']}>{size}</Button>
-        </div>
-      ))}
-    </>
-  ),
-};
-
-export const AllVariants: StoryObj<typeof Button> = {
-  render: () => (
-    <>
-      {['solid', 'bordered', 'light', 'flat', 'faded', 'shadow', 'ghost'].map(
-        (variant) => (
-          <div key={variant} style={{ marginTop: '10px' }}>
-            <Button variant={variant as ButtonProps['variant']}>
-              {variant}
-            </Button>
-          </div>
-        ),
-      )}
-    </>
-  ),
-};

package/src/components/Button/Button.test.tsx

@@ -1,9 +0,0 @@
-import { describe } from 'vitest';
-
-import storySnapshots from 'storybook-config/story-snapshots';
-
-import * as stories from './Button.stories';
-
-describe('Story Snapshots', () => {
-  storySnapshots(stories);
-});

package/src/components/Button/Button.tsx

@@ -1,74 +0,0 @@
-import type { ButtonProps as NextButtonProps } from '@nextui-org/button';
-import type { ReactNode } from 'react';
-
-import { Button as NextButton } from '@nextui-org/button';
-import cn from 'classnames';
-
-import LoadingSpinner from './subcomponents/LoadingSpinner';
-
-export interface ButtonProps {
-  /** sets HTML aria-label attribute */
-  ariaLabel?: string;
-  /** child components */
-  children?: ReactNode;
-  /** CSS class name */
-  className?: string | string[];
-  /** next ui button color  */
-  color?: NextButtonProps['color'];
-  /** disables function of the button. */
-  disabled?: boolean;
-  /** If set loading animation is shown */
-  loading?: boolean;
-  /** optional icon */
-  icon?: ReactNode;
-  /** on click event */
-  onClick?: NextButtonProps['onPress'];
-  /** 3 size options */
-  size?: NextButtonProps['size'];
-  /** HTML data-testid attribute used in e2e tests */
-  testId?: string;
-  /** sets the button type. */
-  type?: 'button' | 'submit' | 'reset' | undefined;
-  /** next ui button variants */
-  variant?: NextButtonProps['variant'];
-}
-
-/**
- * Button component based on [NextUI Button](https://nextui.org/docs/components/button)
- */
-const Button = ({
-  ariaLabel = undefined,
-  children = undefined,
-  className = undefined,
-  color = 'default',
-  disabled = false,
-  icon = undefined,
-  loading = false,
-  onClick = undefined,
-  size = undefined,
-  testId = undefined,
-  type = undefined,
-  variant = 'solid',
-}: ButtonProps) => {
-  return (
-    <NextButton
-      aria-label={ariaLabel}
-      className={cn(className)}
-      color={color}
-      data-testid={testId}
-      isDisabled={disabled}
-      isIconOnly={!!(icon && !children)}
-      isLoading={loading}
-      onPress={onClick}
-      size={size}
-      spinner={<LoadingSpinner />}
-      type={type}
-      variant={variant}
-    >
-      {icon}
-      {children}
-    </NextButton>
-  );
-};
-
-export default Button;

package/src/components/Button/__snapshots__/Button.test.tsx.snap

@@ -1,235 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`Story Snapshots > AllColors 1`] = `
-<div>
-  <div
-    style="margin-top: 10px;"
-  >
-    <button
-      class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 px-unit-4 min-w-unit-20 h-unit-10 text-small gap-unit-2 rounded-medium [&>svg]:max-w-[theme(spacing.unit-8)] data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none bg-default text-default-foreground data-[hover=true]:opacity-hover"
-      type="button"
-    >
-      default
-    </button>
-  </div>
-  <div
-    style="margin-top: 10px;"
-  >
-    <button
-      class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 px-unit-4 min-w-unit-20 h-unit-10 text-small gap-unit-2 rounded-medium [&>svg]:max-w-[theme(spacing.unit-8)] data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none bg-primary text-primary-foreground data-[hover=true]:opacity-hover"
-      type="button"
-    >
-      primary
-    </button>
-  </div>
-  <div
-    style="margin-top: 10px;"
-  >
-    <button
-      class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 px-unit-4 min-w-unit-20 h-unit-10 text-small gap-unit-2 rounded-medium [&>svg]:max-w-[theme(spacing.unit-8)] data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none bg-secondary text-secondary-foreground data-[hover=true]:opacity-hover"
-      type="button"
-    >
-      secondary
-    </button>
-  </div>
-  <div
-    style="margin-top: 10px;"
-  >
-    <button
-      class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 px-unit-4 min-w-unit-20 h-unit-10 text-small gap-unit-2 rounded-medium [&>svg]:max-w-[theme(spacing.unit-8)] data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none bg-success text-success-foreground data-[hover=true]:opacity-hover"
-      type="button"
-    >
-      success
-    </button>
-  </div>
-  <div
-    style="margin-top: 10px;"
-  >
-    <button
-      class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 px-unit-4 min-w-unit-20 h-unit-10 text-small gap-unit-2 rounded-medium [&>svg]:max-w-[theme(spacing.unit-8)] data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none bg-warning text-warning-foreground data-[hover=true]:opacity-hover"
-      type="button"
-    >
-      warning
-    </button>
-  </div>
-  <div
-    style="margin-top: 10px;"
-  >
-    <button
-      class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 px-unit-4 min-w-unit-20 h-unit-10 text-small gap-unit-2 rounded-medium [&>svg]:max-w-[theme(spacing.unit-8)] data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none bg-danger text-danger-foreground data-[hover=true]:opacity-hover"
-      type="button"
-    >
-      danger
-    </button>
-  </div>
-</div>
-`;
-
-exports[`Story Snapshots > AllSizes 1`] = `
-<div>
-  <div
-    style="margin-top: 10px;"
-  >
-    <button
-      class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 px-unit-3 min-w-unit-16 h-unit-8 text-tiny gap-unit-2 rounded-small [&>svg]:max-w-[theme(spacing.unit-8)] data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none bg-default text-default-foreground data-[hover=true]:opacity-hover"
-      type="button"
-    >
-      sm
-    </button>
-  </div>
-  <div
-    style="margin-top: 10px;"
-  >
-    <button
-      class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 px-unit-4 min-w-unit-20 h-unit-10 text-small gap-unit-2 rounded-medium [&>svg]:max-w-[theme(spacing.unit-8)] data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none bg-default text-default-foreground data-[hover=true]:opacity-hover"
-      type="button"
-    >
-      md
-    </button>
-  </div>
-  <div
-    style="margin-top: 10px;"
-  >
-    <button
-      class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 px-unit-6 min-w-unit-24 h-unit-12 text-medium gap-unit-3 rounded-large [&>svg]:max-w-[theme(spacing.unit-8)] data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none bg-default text-default-foreground data-[hover=true]:opacity-hover"
-      type="button"
-    >
-      lg
-    </button>
-  </div>
-</div>
-`;
-
-exports[`Story Snapshots > AllVariants 1`] = `
-<div>
-  <div
-    style="margin-top: 10px;"
-  >
-    <button
-      class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 px-unit-4 min-w-unit-20 h-unit-10 text-small gap-unit-2 rounded-medium [&>svg]:max-w-[theme(spacing.unit-8)] data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none bg-default text-default-foreground data-[hover=true]:opacity-hover"
-      type="button"
-    >
-      solid
-    </button>
-  </div>
-  <div
-    style="margin-top: 10px;"
-  >
-    <button
-      class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 border-medium px-unit-4 min-w-unit-20 h-unit-10 text-small gap-unit-2 rounded-medium [&>svg]:max-w-[theme(spacing.unit-8)] data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none bg-transparent border-default text-foreground data-[hover=true]:opacity-hover"
-      type="button"
-    >
-      bordered
-    </button>
-  </div>
-  <div
-    style="margin-top: 10px;"
-  >
-    <button
-      class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 px-unit-4 min-w-unit-20 h-unit-10 text-small gap-unit-2 rounded-medium [&>svg]:max-w-[theme(spacing.unit-8)] data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none bg-transparent text-default-foreground data-[hover=true]:bg-default/40"
-      type="button"
-    >
-      light
-    </button>
-  </div>
-  <div
-    style="margin-top: 10px;"
-  >
-    <button
-      class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 px-unit-4 min-w-unit-20 h-unit-10 text-small gap-unit-2 rounded-medium [&>svg]:max-w-[theme(spacing.unit-8)] data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none bg-default/40 text-default-foreground data-[hover=true]:opacity-hover"
-      type="button"
-    >
-      flat
-    </button>
-  </div>
-  <div
-    style="margin-top: 10px;"
-  >
-    <button
-      class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 border-medium px-unit-4 min-w-unit-20 h-unit-10 text-small gap-unit-2 rounded-medium [&>svg]:max-w-[theme(spacing.unit-8)] data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none border-default bg-default-100 text-default-foreground data-[hover=true]:opacity-hover"
-      type="button"
-    >
-      faded
-    </button>
-  </div>
-  <div
-    style="margin-top: 10px;"
-  >
-    <button
-      class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 px-unit-4 min-w-unit-20 h-unit-10 text-small gap-unit-2 rounded-medium [&>svg]:max-w-[theme(spacing.unit-8)] data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none shadow-lg shadow-default/50 bg-default text-default-foreground data-[hover=true]:opacity-hover"
-      type="button"
-    >
-      shadow
-    </button>
-  </div>
-  <div
-    style="margin-top: 10px;"
-  >
-    <button
-      class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 border-medium bg-transparent px-unit-4 min-w-unit-20 h-unit-10 text-small gap-unit-2 rounded-medium [&>svg]:max-w-[theme(spacing.unit-8)] data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none border-default text-default-foreground hover:!bg-default"
-      type="button"
-    >
-      ghost
-    </button>
-  </div>
-</div>
-`;
-
-exports[`Story Snapshots > Default 1`] = `
-<div>
-  <button
-    class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 px-unit-4 min-w-unit-20 h-unit-10 text-small gap-unit-2 rounded-medium [&>svg]:max-w-[theme(spacing.unit-8)] data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none bg-default text-default-foreground data-[hover=true]:opacity-hover"
-    data-testid="some-test-id"
-    type="button"
-  >
-    Button
-  </button>
-</div>
-`;
-
-exports[`Story Snapshots > Disabled 1`] = `
-<div>
-  <button
-    class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 px-unit-4 min-w-unit-20 h-unit-10 text-small gap-unit-2 rounded-medium opacity-disabled pointer-events-none [&>svg]:max-w-[theme(spacing.unit-8)] data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none bg-default text-default-foreground data-[hover=true]:opacity-hover"
-    data-disabled="true"
-    disabled=""
-    type="button"
-  >
-    Button
-  </button>
-</div>
-`;
-
-exports[`Story Snapshots > Loading 1`] = `
-<div>
-  <button
-    class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 px-unit-4 min-w-unit-20 h-unit-10 text-small gap-unit-2 rounded-medium opacity-disabled pointer-events-none [&>svg]:max-w-[theme(spacing.unit-8)] data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none bg-default text-default-foreground data-[hover=true]:opacity-hover"
-    data-disabled="true"
-    data-loading="true"
-    disabled=""
-    type="button"
-  >
-    <svg
-      class="animate-spin h-5 w-5 text-current"
-      fill="none"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <circle
-        class="opacity-25"
-        cx="12"
-        cy="12"
-        r="10"
-        stroke="currentColor"
-        stroke-width="4"
-      />
-      <path
-        class="opacity-75"
-        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-        fill="currentColor"
-      />
-    </svg>
-    Button
-  </button>
-</div>
-`;

package/src/components/Button/index.ts

@@ -1,7 +0,0 @@
-import type { ButtonProps } from './Button';
-
-import Button from './Button';
-
-export default Button;
-
-export type { ButtonProps };

package/src/components/Button/subcomponents/LoadingSpinner.tsx

@@ -1,26 +0,0 @@
-/**
- * svg loading spinner for button
- * @see https://nextui.org/docs/components/button#loading
- * */
-export default () => (
-  <svg
-    className="animate-spin h-5 w-5 text-current"
-    fill="none"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <circle
-      className="opacity-25"
-      cx="12"
-      cy="12"
-      r="10"
-      stroke="currentColor"
-      strokeWidth="4"
-    />
-    <path
-      className="opacity-75"
-      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-      fill="currentColor"
-    />
-  </svg>
-);