@sonic-equipment/ui 0.0.8 → 0.0.10

package/dist/index.js

@@ -0,0 +1,74 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { Button as Button$1, Checkbox as Checkbox$1 } from 'react-aria-components';
+
+var styles$3 = {"button":"button-module-V4meK","md":"button-module-GVTEW","lg":"button-module-nyNY8","solid":"button-module-AjvlY","primary":"button-module-tmyk8","outline":"button-module-vq9GI"};
+
+function Button({ children, variant = "solid", size = "md", color = "primary", className, ...props }) {
+    return (jsx(Button$1, { ...props, className: clsx(styles$3.button, styles$3[variant], styles$3[size], styles$3[color], className), children: children }));
+}
+
+function FavoriteFilledIcon(props) {
+    return (jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "M12 22a.667.667 0 0 1-.534-.267L3.227 10.72C2.411 9.599 2 8.46 2 7.327A5.336 5.336 0 0 1 7.333 2c1.892 0 3.669.982 4.667 2.468C12.998 2.982 14.775 2 16.667 2 19.607 2 22 4.39 22 7.327c0 1.133-.411 2.272-1.222 3.387l-8.244 11.019A.667.667 0 0 1 12 22", fill: "currentColor", fillRule: "evenodd" }) }));
+}
+
+function FavoriteOutlinedIcon(props) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", ...props, children: jsx("path", { d: "M7.333 3.33c-2.206 0-4 1.793-4 3.997 0 .857.316 1.71.967 2.604L12 20.223l7.705-10.299c.646-.888.962-1.74.962-2.597a4.003 4.003 0 0 0-4-3.996c-1.813 0-3.545 1.232-4.028 2.865a.666.666 0 0 1-1.278 0C10.878 4.563 9.146 3.33 7.333 3.33M12 22c-.21 0-.408-.1-.534-.267L3.227 10.72C2.411 9.599 2 8.46 2 7.327A5.336 5.336 0 0 1 7.333 2c1.892 0 3.669.982 4.667 2.468C12.998 2.982 14.775 2 16.667 2 19.607 2 22 4.39 22 7.327c0 1.133-.411 2.272-1.222 3.387l-8.245 11.019A.667.667 0 0 1 12 22", fill: "currentColor", fillRule: "evenodd" }) }));
+}
+
+var styles$2 = {"iconButton":"icon-button-module-HJm0i","md":"icon-button-module-k3s9J","lg":"icon-button-module-agk6Y","primary":"icon-button-module-fTeP4","secondary":"icon-button-module-dM0eo"};
+
+function IconButton({ size = "md", color = "primary", className, ...props }) {
+    return (jsx(Button$1, { ...props, className: clsx(styles$2.iconButton, styles$2[size], styles$2[color], className) }));
+}
+
+var styles$1 = {"isFavorite":"favorite-button-module-6FS3Q"};
+
+function FavoriteButton({ isFavorite, onPress }) {
+    return (jsx(IconButton, { color: "secondary", onPress: () => onPress(), className: clsx({ [styles$1.isFavorite]: isFavorite }), children: isFavorite ? jsx(FavoriteFilledIcon, {}) : jsx(FavoriteOutlinedIcon, {}) }));
+}
+
+function ProductCard({ product, favoriteButton: FavoriteButton, }) {
+    return (jsxs("div", { children: [jsx("div", { children: jsx(FavoriteButton, { productId: product.id }) }), jsx("h2", { children: product.title })] }));
+}
+
+var styles = {"checkbox":"checkbox-module-y3eBg","box":"checkbox-module-TqLux","checkmark":"checkbox-module-Yhrdp"};
+
+function Checkbox({ children, ...props }) {
+    return (jsxs(Checkbox$1, { ...props, className: styles.checkbox, children: [jsx("div", { className: styles.box, children: jsx("svg", { className: styles.checkmark, viewBox: "0 0 18 18", "aria-hidden": "true", children: jsx("polyline", { points: "1 9 7 14 15 4" }) }) }), children] }));
+}
+
+function Filter({ title, children }) {
+    return (jsxs("div", { children: [jsx("div", { children: jsx("h3", { children: title }) }), jsx("div", { children: children })] }));
+}
+
+function ColorFilter({ options, value, onChange }) {
+    return (jsx(Filter, { title: "Color", children: jsx("ul", { children: options.map((option) => (jsx("li", { children: jsx(Checkbox, { onChange: (isSelected) => onChange(isSelected
+                        ? [...value, option.value]
+                        : value.filter((v) => v !== option.value)), value: option.value, isSelected: value.includes(option.value), children: option.label }) }, option.value))) }) }));
+}
+
+function ProductListing({ productCard: ProductCard, products, filters, isLoading = false, activeFilters, onFilterChange, onSortChange, }) {
+    return (jsxs("div", { children: [jsx("h1", { children: "Product listing" }), jsxs("aside", { children: [jsx("h2", { children: "Filter" }), jsx("div", { children: jsx(ColorFilter, { options: filters.color.options, value: activeFilters.colors, onChange: (colors) => onFilterChange({ colors }) }) })] }), jsx("main", { children: jsxs("select", { onChange: (e) => onSortChange({ by: e.target.value, direction: "asc" }), children: [jsx("option", { value: "", children: "Sort By" }), jsx("option", { value: "price", children: "Price" }), jsx("option", { value: "title", children: "Title" })] }) }), isLoading ? (jsx("p", { children: "Loading..." })) : (jsx("ul", { children: products.map((product) => (jsx("li", { children: jsx(ProductCard, { product: product }) }, product.id))) }))] }));
+}
+
+function createProductListingSearchParams(state) {
+    const params = new URLSearchParams();
+    if (state.filters.colors.length > 0) {
+        params.set("colors", state.filters.colors.join(","));
+    }
+    params.set("sortBy", state.sort.by);
+    params.set("sortDirection", state.sort.direction);
+    return params;
+}
+function parseProductListingSearchParams(params) {
+    return {
+        filters: { colors: params.get("colors")?.split(",") ?? [] },
+        sort: {
+            by: params.get("sortBy") ?? "relevance",
+            direction: params.get("sortDirection") ?? "asc",
+        },
+    };
+}
+
+export { Button, Checkbox, FavoriteButton, FavoriteFilledIcon, FavoriteOutlinedIcon, IconButton, ProductCard, ProductListing, createProductListingSearchParams, parseProductListingSearchParams };

package/dist/{dts → inputs}/checkbox/checkbox.d.ts

@@ -2,4 +2,3 @@ import { Checkbox as AriaCheckbox } from "react-aria-components";
 import { ComponentPropsWithoutRef } from "react";
 export type CheckboxProps = ComponentPropsWithoutRef<typeof AriaCheckbox>;
 export declare function Checkbox({ children, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=checkbox.d.ts.map

package/dist/inputs/checkbox/checkbox.stories.d.ts

@@ -0,0 +1,17 @@
+import type { StoryObj } from "@storybook/react";
+import { Checkbox } from "./checkbox";
+declare const meta: {
+    title: string;
+    component: typeof Checkbox;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    args: {
+        onChange: import("@storybook/test").Mock<[isSelected: boolean], void>;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+export declare const Unchecked: Story;
+export declare const Checked: Story;

package/dist/{dts/color-filter → product-listing/filters/colors}/color-filter.d.ts

@@ -1,14 +1,11 @@
 import { FilterProps } from "../filter/filter";
 export type ColorFilterProps = FilterProps & {
-    options: [
-        {
-            value: string;
-            label: string;
-            count: number;
-        }
-    ];
+    options: {
+        value: string;
+        label: string;
+        count: number;
+    }[];
     value: string[];
     onChange: (value: string[]) => void;
 };
 export declare function ColorFilter({ options, value, onChange }: ColorFilterProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=color-filter.d.ts.map

package/dist/product-listing/filters/filter/filter.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from "react";
+export type FilterProps = PropsWithChildren<{
+    title?: string;
+    isCollapseable?: boolean;
+    initialIsCollapsed?: boolean;
+}>;
+export declare function Filter({ title, children }: FilterProps): import("react/jsx-runtime").JSX.Element;

package/dist/{dts/product-listing → product-listing}/product-listing.d.ts

@@ -1,5 +1,4 @@
 import { ComponentType } from "react";
-import { ProductCardProps } from "../product-card/product-card";
 export type Filters = {
     color: {
         options: {
@@ -17,7 +16,7 @@ export type Sort = {
     direction: string;
 };
 export type ProductListingProps = {
-    productCard: ComponentType<ProductCardProps>;
+    productCard: ComponentType<any>;
     products: {
         id: string;
         title: string;
@@ -34,4 +33,3 @@ export type ProductListingProps = {
     onSortChange: (sort: Sort) => void;
 };
 export declare function ProductListing({ productCard: ProductCard, products, filters, isLoading, activeFilters, onFilterChange, onSortChange, }: ProductListingProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=product-listing.d.ts.map

package/dist/product-listing/product-listing.stories.d.ts

@@ -0,0 +1,16 @@
+import { StoryObj } from "@storybook/react";
+import { ProductListing } from "./product-listing";
+declare const meta: {
+    title: string;
+    component: typeof ProductListing;
+    tags: string[];
+    args: {
+        onFilterChange: import("@storybook/test").Mock<[filters: import("./product-listing").ActiveFilters], void>;
+        onSortChange: import("@storybook/test").Mock<[sort: import("./product-listing").Sort], void>;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof ProductListing>;
+export declare const Default: Story;
+export declare const Loading: Story;
+export declare const WithActiveFilters: Story;

package/dist/{dts/product-listing → product-listing}/search-params.d.ts

@@ -1,4 +1,4 @@
-export declare function createSearchParams(state: {
+export declare function createProductListingSearchParams(state: {
     sort: {
         by: string;
         direction: string;
@@ -7,7 +7,7 @@ export declare function createSearchParams(state: {
         colors: string[];
     };
 }): URLSearchParams;
-export declare function parseSearchParams(params: URLSearchParams): {
+export declare function parseProductListingSearchParams(params: URLSearchParams): {
     filters: {
         colors: string[];
     };
@@ -16,4 +16,3 @@ export declare function parseSearchParams(params: URLSearchParams): {
         direction: string;
     };
 };
-//# sourceMappingURL=search-params.d.ts.map

package/dist/reset.css

@@ -306,7 +306,6 @@ menu {
 /*
 Reset default styling for dialogs.
 */
-
 dialog {
   padding: 0;
 }
@@ -347,7 +346,6 @@ button,
 /*
 Make sure disabled buttons don't get the pointer cursor.
 */
-
 :disabled {
   cursor: default;
 }
@@ -381,7 +379,6 @@ video {
 }
 
 /* Make elements with the HTML hidden attribute stay hidden by default */
-
 [hidden] {
   display: none;
 }

package/dist/styles.css

@@ -0,0 +1,297 @@
+:root {   
+  --font-family-sonic: 'Pancetta', sans-serif;  
+
+  --font-size-20: 0.75rem; /* 12px */
+  --font-size-24: 0.875rem; /* 14px */
+  --font-size-28: 1rem; /* 16px */
+  --font-size-32: 1.125rem; /* 18px */
+  --font-size-36: 1.25rem; /* 20px */
+  --font-size-40: 1.5rem; /* 24px */
+  --font-size-48: 1.875rem;/* 30px */ 
+  --font-size-56: 2.25rem; /* 36px */
+  --font-size-64: 3rem; /* 48px */
+  --font-size-72: 3.75rem; /* 60px */
+  --font-size-80: 4.5rem; /* 72px */
+  --font-size-96: 6rem; /* 96px */
+  --font-size-112: 8rem; /* 128px */
+  --font-size-base: var(--font-size-28);
+
+  --font-weight-thin: 100;
+  --font-weight-extralight: 200;
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+  --font-weight-black: 900;
+}
+:root {
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-xxl: 1536px;
+}
+:root {
+  --space-1: 2px;
+  --space-2: 4px;
+  --space-3: 6px;
+  --space-4: 8px;
+  --space-5: 12px;
+  --space-6: 16px;
+  --space-8: 20px;
+  --space-10: 24px; 
+  --space-12: 28px; 
+  --space-14: 32px; 
+  --space-17: 36px; 
+  --space-20: 40px; 
+  --space-24: 48px; 
+  --space-28: 56px; 
+  --space-32: 64px; 
+  --space-38: 72px; 
+  --space-44: 80px; 
+  --space-52: 96px; 
+  --space-60: 112px;
+  --space-70: 128px;
+  --space-80: 144px;
+  --space-92: 160px;
+  --space-104: 192px;
+  --space-120: 224px;
+}
+:root {
+  /*********************************************************
+  *
+  *  Global color tokens
+  *
+  *********************************************************/
+
+  --color-white: #ffffff;
+
+  --color-red-50: #fff0f1;
+  --color-red-100: #ffdee0;
+  --color-red-200: #ffc3c7;
+  --color-red-300: #ff999f;
+  --color-red-400: #ff5e67;
+  --color-red-500: #ff2b37;
+  --color-red-600: #f60c1a;
+  --color-red-700: #e30613;
+  --color-red-800: #ab0913;
+  --color-red-900: #8d0f16;
+  --color-red-950: #4d0206;
+
+  --color-gray-100: #ededed;
+  --color-gray-500: #bcbcbc;
+  --color-gray-900: #6f6f6f;
+
+  --color-black: #000000;
+
+  /*********************************************************
+  *
+  *  Alias color tokens
+  *
+  *********************************************************/
+
+  --color-brand-black: var(--color-black);
+
+  --color-brand-red: var(--color-red-700);
+  --color-brand-dark-red: var(--color-red-800);
+
+  --color-brand-light-gray: var(--color-gray-100);
+  --color-brand-medium-gray: var(--color-gray-500);
+  --color-brand-dark-gray: var(--color-gray-900);
+
+  --color-focus-ring: var(--color-brand-red);
+}
+:root {
+  --border-radius-0: 0px;
+  --border-radius-1: 2px;
+  --border-radius-2: 4px;
+  --border-radius-4: 6px;
+  --border-radius-6: 8px;
+  --border-radius-8: 12px;
+  --border-radius-12: 16px;
+  --border-radius-16: 20px;
+  --border-radius-20: 22px;
+  --border-radius-24: 30px;
+  --border-radius-full: 9999px;
+  
+  
+
+  --border-width-0: 0px;
+  --border-width-1: 1px;
+  --border-width-2: 2px;
+  --border-width-3: 4px;
+}
+.button-module-V4meK {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  vertical-align: top;
+  text-transform: uppercase;
+  font-style: italic;
+  font-weight: var(--font-weight-bold);
+}
+
+/*********************************************************
+ *
+ *  Sizes
+ *
+*********************************************************/
+
+.button-module-GVTEW {
+  min-height: 40px;
+  border-radius: var(--border-radius-16);
+  padding-inline: var(--space-8);
+}
+
+.button-module-nyNY8 {
+  min-height: 44px;  
+  border-radius: var(--border-radius-20);
+  padding-inline: var(--space-8);
+}
+
+/*********************************************************
+ *
+ *  Variants
+ *
+*********************************************************/
+
+/* Primary */
+
+.button-module-AjvlY:where(.button-module-tmyk8) {
+    background-color: var(--color-brand-red);
+    color: var(--color-white);
+  }
+
+.button-module-AjvlY:where(.button-module-tmyk8):where([data-hovered]),
+    .button-module-AjvlY:where(.button-module-tmyk8):where([data-pressed]) {
+      background-color: var(--color-brand-dark-red);
+    }
+
+/* Primary */
+
+.button-module-vq9GI:where(.button-module-tmyk8) {
+    background-color: var(--color-white);
+    color: var(--color-black);
+    border: 1px solid var(--color-brand-medium-gray);
+  }
+
+.button-module-vq9GI:where(.button-module-tmyk8):where([data-hovered]),
+    .button-module-vq9GI:where(.button-module-tmyk8):where([data-pressed]) {
+      background-color: var(--color-brand-light-gray);
+    }
+.icon-button-module-HJm0i {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+/*********************************************************
+ *
+ *  Sizes
+ *
+*********************************************************/
+
+.icon-button-module-k3s9J svg {
+    width: 24px;
+    height: 24px;
+  }
+
+.icon-button-module-agk6Y svg {
+    width: 32px;
+    height: 32px;
+  }
+
+/*********************************************************
+ *
+ *  Variants
+ *
+*********************************************************/
+
+.icon-button-module-fTeP4 {
+  color: var(--color-brand-black);
+}
+
+.icon-button-module-dM0eo {
+  color: var(--color-brand-dark-gray);
+}
+
+.icon-button-module-fTeP4:where([data-hovered]), .icon-button-module-dM0eo:where([data-hovered]) {
+    color: var(--color-brand-red);
+  }
+
+.icon-button-module-fTeP4:where([data-pressed]), .icon-button-module-dM0eo:where([data-pressed]) {
+    color: var(--color-brand-dark-red);
+  }
+.favorite-button-module-6FS3Q {
+  color: var(--color-brand-red);
+}
+.checkbox-module-y3eBg {
+  --selected-color: var(--color-brand-red);
+  --selected-color-pressed: var(--color-brand-dark-red);
+  --checkmark-color: var(--color-white);
+
+  display: flex;
+  align-items: center;
+  gap: 0.571rem;
+  font-size: var(--font-size-24);
+  line-height: 14px;
+  color: var(--color-brand-black);
+  forced-color-adjust: none;
+}
+
+  .checkbox-module-y3eBg .checkbox-module-TqLux {
+    width: 16px;
+    height: 16px;
+    border: 2px solid var(--color-brand-medium-gray);
+    border-radius: var(--border-radius-1);
+    transition: all 200ms;
+    display: flex;
+    align-items: center;
+    justify-content: center;    
+  }
+
+  .checkbox-module-y3eBg .checkbox-module-Yhrdp {
+    width: 1rem;
+    height: 1rem;
+    fill: none;
+    stroke: var(--checkmark-color);
+    stroke-width: 3px;
+    stroke-dasharray: 22px;
+    stroke-dashoffset: 66;
+    transition: all 200ms;
+  }
+
+  .checkbox-module-y3eBg[data-pressed] .checkbox-module-TqLux {
+    border-color: var(--color-brand-dark-gray);
+  }
+
+  .checkbox-module-y3eBg[data-focus-visible] .checkbox-module-TqLux {
+    outline: 2px solid var(--color-focus-ring);
+    outline-offset: 2px;
+  }
+
+  .checkbox-module-y3eBg[data-selected] .checkbox-module-TqLux, .checkbox-module-y3eBg[data-indeterminate] .checkbox-module-TqLux {
+      border-color: var(--selected-color);
+      background: var(--selected-color);
+    }
+
+  .checkbox-module-y3eBg[data-selected][data-pressed] .checkbox-module-TqLux, .checkbox-module-y3eBg[data-indeterminate][data-pressed] .checkbox-module-TqLux {
+      border-color: var(--selected-color-pressed);
+      background: var(--selected-color-pressed);
+    }
+
+  .checkbox-module-y3eBg[data-selected] .checkbox-module-Yhrdp, .checkbox-module-y3eBg[data-indeterminate] .checkbox-module-Yhrdp {
+      stroke-dashoffset: 44;
+    }
+
+  .checkbox-module-y3eBg[data-indeterminate] .checkbox-module-Yhrdp {
+      stroke: none;
+      fill: var(--checkmark-color);
+    }

package/package.json

@@ -1,75 +1,75 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "type": "module",
-  "sideEffects": false,
   "license": "MIT",
   "exports": {
     "./reset.css": "./dist/reset.css",
-    "./base.css": "./dist/base.css",
-    "./app.css": "./dist/app.css",
-    "./button": {
-      "types": "./src/button/button.tsx",
-      "default": "./dist/button.js"
-    },
-    "./button.css": "./dist/button.css",
-    "./checkbox": {
-      "types": "./src/checkbox/checkbox.tsx",
-      "default": "./dist/checkbox.js"
-    },
-    "./checkbox.css": "./dist/checkbox.css",
-    "./product-listing": {
-      "types": "./src/product-listing/product-listing.tsx",
-      "default": "./dist/product-listing.js"
-    },
-    "./search-params": {
-      "types": "./src/product-listing/search-params.ts",
-      "default": "./dist/search-params.js"
-    },
-    "./product-listing.css": "./dist/product-listing.css",
-    "./product-card": {
-      "types": "./src/product-card/product-card.tsx",
-      "default": "./dist/product-card.js"
-    },
-    "./product-card.css": "./dist/product-card.css"
+    "./fonts.css": "./dist/fonts.css",
+    "./styles.css": "./dist/styles.css",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
   },
   "files": [
     "dist",
     "README.md"
   ],
-  "scripts": {
-    "build": "rollup --config",
-    "dev": "pnpm run build --watch",
-    "lint": "eslint . --max-warnings 0",
-    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@repo/eslint-config": "workspace:*",
-    "@repo/typescript-config": "workspace:*",
+    "@chromatic-com/storybook": "^1.2.26",
+    "@csstools/postcss-global-data": "^2.1.1",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@types/react": "^18.2.61",
-    "@types/react-dom": "^18.2.19",
-    "autoprefixer": "^10.4.18",
+    "@storybook/addon-essentials": "^8.0.5",
+    "@storybook/addon-interactions": "^8.0.5",
+    "@storybook/addon-links": "^8.0.5",
+    "@storybook/blocks": "^8.0.5",
+    "@storybook/react": "^8.0.5",
+    "@storybook/react-vite": "^8.0.5",
+    "@storybook/test": "^8.0.5",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
-    "postcss": "^8.4.36",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "eslint-plugin-storybook": "^0.8.0",
+    "http-server": "^14.1.1",
+    "postcss": "^8.4.38",
     "postcss-custom-media": "^10.0.4",
-    "postcss-each": "^1.1.0",
-    "postcss-import": "^16.0.1",
+    "postcss-import": "^16.1.0",
     "postcss-nested": "^6.0.1",
-    "rollup": "^4.12.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup": "^4.14.1",
+    "rollup-plugin-dts": "^6.1.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
-    "tslib": "^2.6.2",
-    "tsup": "^8.0.2",
-    "typescript": "^5.3.3"
+    "storybook": "^8.0.5",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0"
   },
-  "peerDependencies": {
-    "react": "18.0.0",
-    "react-dom": "18.0.0"
+  "dependencies": {
+    "clsx": "^2.1.0",
+    "react-aria-components": "^1.1.1"
   },
   "publishConfig": {
     "access": "restricted"
   },
-  "dependencies": {
-    "clsx": "^2.1.0"
+  "scripts": {
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "dev": "storybook dev -p 6006",
+    "build": "rollup --config",
+    "build-storybook": "storybook build",
+    "start": "http-server ./storybook-static"
   }
-}
+}

package/dist/app.css

@@ -1,12 +0,0 @@
-html {
-  font-family: var(--font-family-sonic);
-  font-size: var(--font-size-base);
-  -webkit-text-size-adjust: none;
-     -moz-text-size-adjust: none;
-          text-size-adjust: none;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}

package/dist/dts/button/button.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/button/button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAE7D,OAAO,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAGjD,MAAM,MAAM,WAAW,GAAG,wBAAwB,CAAC,OAAO,UAAU,CAAC,GAAG;IACtE,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;IACxC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,YAAY,CAAC;CAC7D,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,OAAiB,EACjB,IAAW,EACX,KAAiB,EACjB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,WAAW,2CAeb;yBAtBe,MAAM"}

package/dist/dts/checkbox/checkbox.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAEjE,OAAO,EAAE,wBAAwB,EAAa,MAAM,OAAO,CAAC;AAG5D,MAAM,MAAM,aAAa,GAAG,wBAAwB,CAAC,OAAO,YAAY,CAAC,CAAC;AAE1E,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CAW7D"}

package/dist/dts/color-filter/color-filter.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"color-filter.d.ts","sourceRoot":"","sources":["../../../src/color-filter/color-filter.tsx"],"names":[],"mappings":"AACA,OAAO,EAAU,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEvD,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG;IAC3C,OAAO,EAAE;QACP;YACE,KAAK,EAAE,MAAM,CAAC;YACd,KAAK,EAAE,MAAM,CAAC;YACd,KAAK,EAAE,MAAM,CAAC;SACf;KACF,CAAC;IACF,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACrC,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,gBAAgB,2CAwBzE"}

package/dist/dts/filter/filter.d.ts

@@ -1,8 +0,0 @@
-import { PropsWithChildren } from "react";
-export type FilterProps = PropsWithChildren<{
-    title?: string;
-    isCollapseable?: boolean;
-    initialIsCollapsed?: boolean;
-}>;
-export declare function Filter({ title, children, isCollapseable, initialIsCollapsed, }: FilterProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=filter.d.ts.map

package/dist/dts/filter/filter.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"filter.d.ts","sourceRoot":"","sources":["../../../src/filter/filter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,MAAM,WAAW,GAAG,iBAAiB,CAAC;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC,CAAC;AAEH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,QAAQ,EACR,cAAqB,EACrB,kBAA0B,GAC3B,EAAE,WAAW,2CASb"}