@uni-design-system/uni-react 0.0.19 → 2.0.0

package/src/stories/assets/tutorials.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="33" height="32" fill="none" viewBox="0 0 33 32"><g clip-path="url(#clip0_10031_177597)"><path fill="#B7F0EF" fill-rule="evenodd" d="M17 7.87059C17 6.48214 17.9812 5.28722 19.3431 5.01709L29.5249 2.99755C31.3238 2.64076 33 4.01717 33 5.85105V22.1344C33 23.5229 32.0188 24.7178 30.6569 24.9879L20.4751 27.0074C18.6762 27.3642 17 25.9878 17 24.1539L17 7.87059Z" clip-rule="evenodd" opacity=".7"/><path fill="#87E6E5" fill-rule="evenodd" d="M1 5.85245C1 4.01857 2.67623 2.64215 4.47507 2.99895L14.6569 5.01848C16.0188 5.28861 17 6.48354 17 7.87198V24.1553C17 25.9892 15.3238 27.3656 13.5249 27.0088L3.34311 24.9893C1.98119 24.7192 1 23.5242 1 22.1358V5.85245Z" clip-rule="evenodd"/><path fill="#61C1FD" fill-rule="evenodd" d="M15.543 5.71289C15.543 5.71289 16.8157 5.96289 17.4002 6.57653C17.9847 7.19016 18.4521 9.03107 18.4521 9.03107C18.4521 9.03107 18.4521 25.1106 18.4521 26.9629C18.4521 28.8152 19.3775 31.4174 19.3775 31.4174L17.4002 28.8947L16.2575 31.4174C16.2575 31.4174 15.543 29.0765 15.543 27.122C15.543 25.1674 15.543 5.71289 15.543 5.71289Z" clip-rule="evenodd"/></g><defs><clipPath id="clip0_10031_177597"><rect width="32" height="32" fill="#fff" transform="translate(0.5)"/></clipPath></defs></svg>

package/src/stories/assets/youtube.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32"><path fill="#ED1D24" d="M31.3313 8.44657C30.9633 7.08998 29.8791 6.02172 28.5022 5.65916C26.0067 5.00026 16 5.00026 16 5.00026C16 5.00026 5.99333 5.00026 3.4978 5.65916C2.12102 6.02172 1.03665 7.08998 0.668678 8.44657C0 10.9053 0 16.0353 0 16.0353C0 16.0353 0 21.1652 0.668678 23.6242C1.03665 24.9806 2.12102 26.0489 3.4978 26.4116C5.99333 27.0703 16 27.0703 16 27.0703C16 27.0703 26.0067 27.0703 28.5022 26.4116C29.8791 26.0489 30.9633 24.9806 31.3313 23.6242C32 21.1652 32 16.0353 32 16.0353C32 16.0353 32 10.9053 31.3313 8.44657Z"/><path fill="#fff" d="M12.7266 20.6934L21.0902 16.036L12.7266 11.3781V20.6934Z"/></svg>

package/src/stories/button.css

@@ -0,0 +1,30 @@
+.storybook-button {
+  display: inline-block;
+  cursor: pointer;
+  border: 0;
+  border-radius: 3em;
+  font-weight: 700;
+  line-height: 1;
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+.storybook-button--primary {
+  background-color: #555ab9;
+  color: white;
+}
+.storybook-button--secondary {
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+  background-color: transparent;
+  color: #333;
+}
+.storybook-button--small {
+  padding: 10px 16px;
+  font-size: 12px;
+}
+.storybook-button--medium {
+  padding: 11px 20px;
+  font-size: 14px;
+}
+.storybook-button--large {
+  padding: 12px 24px;
+  font-size: 16px;
+}

package/src/stories/header.css

@@ -0,0 +1,32 @@
+.storybook-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 15px 20px;
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.storybook-header svg {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.storybook-header h1 {
+  display: inline-block;
+  vertical-align: top;
+  margin: 6px 0 6px 10px;
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 1;
+}
+
+.storybook-header button + button {
+  margin-left: 10px;
+}
+
+.storybook-header .welcome {
+  margin-right: 10px;
+  color: #333;
+  font-size: 14px;
+}

package/src/stories/page.css

@@ -0,0 +1,68 @@
+.storybook-page {
+  margin: 0 auto;
+  padding: 48px 20px;
+  max-width: 600px;
+  color: #333;
+  font-size: 14px;
+  line-height: 24px;
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.storybook-page h2 {
+  display: inline-block;
+  vertical-align: top;
+  margin: 0 0 4px;
+  font-weight: 700;
+  font-size: 32px;
+  line-height: 1;
+}
+
+.storybook-page p {
+  margin: 1em 0;
+}
+
+.storybook-page a {
+  color: inherit;
+}
+
+.storybook-page ul {
+  margin: 1em 0;
+  padding-left: 30px;
+}
+
+.storybook-page li {
+  margin-bottom: 8px;
+}
+
+.storybook-page .tip {
+  display: inline-block;
+  vertical-align: top;
+  margin-right: 10px;
+  border-radius: 1em;
+  background: #e7fdd8;
+  padding: 4px 12px;
+  color: #357a14;
+  font-weight: 700;
+  font-size: 11px;
+  line-height: 12px;
+}
+
+.storybook-page .tip-wrapper {
+  margin-top: 40px;
+  margin-bottom: 40px;
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.storybook-page .tip-wrapper svg {
+  display: inline-block;
+  vertical-align: top;
+  margin-top: 3px;
+  margin-right: 4px;
+  width: 12px;
+  height: 12px;
+}
+
+.storybook-page .tip-wrapper svg path {
+  fill: #1ea7fd;
+}

package/src/tools/color-picker/color-picker.component.tsx

@@ -0,0 +1,151 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { ColorSwatch } from '../color-swatch/color-swatch.component';
+import { RGBA } from '@uni-design-system/uni-core';
+
+export interface ColorPickerProps {
+  imageUrl: string;
+  imageWidth: number;
+  imageHeight: number;
+  sampleSize: number;
+}
+
+export const ColorPicker = ({
+  imageUrl,
+  imageWidth,
+  imageHeight,
+  sampleSize = 41,
+}: ColorPickerProps): JSX.Element => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  const [pixelColor, setPixelColor] = useState<RGBA>({ red: 0, green: 0, blue: 0, alpha: 1 });
+  const [averageColor, setAverageColor] = useState<RGBA>({ red: 0, green: 0, blue: 0, alpha: 1 });
+
+  let canvas: HTMLCanvasElement | null;
+  let ctx: CanvasRenderingContext2D | null;
+
+  let img: HTMLImageElement;
+
+  useEffect(() => {
+    canvas = canvasRef.current;
+
+    if (canvas) {
+      ctx = canvas.getContext('2d');
+      canvas.width = imageWidth;
+      canvas.style.width = `${imageWidth}px`;
+      canvas.height = imageHeight;
+      canvas.style.height = `${imageHeight}px`;
+    }
+
+    img = document.createElement('img');
+    img.crossOrigin = 'Anonymous';
+    img.src = imageUrl;
+
+    //once the image is loaded, add it to the canvas
+    img.onload = (ev) => {
+      ctx?.drawImage(img, 0, 0);
+      //call the context.getImageData method to get the array of [r,g,b,a] values
+
+      let imgDataObj = ctx?.getImageData(0, 0, canvas?.width || 0, canvas?.height || 0);
+
+      const data = imgDataObj?.data; //data prop is an array
+
+      if (!!data && !!canvas) {
+        canvas?.addEventListener('mousemove', (ev: MouseEvent) => {
+          getPixel(data, ev);
+        });
+      }
+
+      // canvas?.addEventListener('click', addBox);
+    };
+  }, []);
+
+  const getPixel = (data: Uint8ClampedArray, ev: MouseEvent) => {
+    if (!canvas) return;
+    //as the mouse moves around the image
+    // let canvas = ev.target;
+    let cols = canvas.width;
+
+    // let rows = canvas.height;
+    let { offsetX, offsetY } = ev;
+
+    //call the method to get the r,g,b,a values for current pixel
+    let c = getPixelColor(data, cols, offsetY, offsetX);
+
+    //save the string to use elsewhere
+    // pixel = clr;
+    setPixelColor(c);
+
+    //now get the average of the surrounding pixel colours
+    setAverageColor(getAverage(data, ev));
+  };
+
+  const getAverage = (data: Uint8ClampedArray, ev: { offsetX: any; offsetY: any }): RGBA => {
+    if (!ctx) return { red: 0, green: 0, blue: 0, alpha: 1 };
+    //create a 41px by 41px average colour square
+    //replace everything in the canvas with the original image
+    // let canvas = ev.target;
+    let cols = canvas?.width || 0;
+    let rows = canvas?.height || 0;
+
+    //remove the current contents of the canvas to draw the image and box again
+    ctx.clearRect(0, 0, cols, rows);
+
+    //add the image from memory
+    ctx.drawImage(img, 0, 0);
+    let { offsetX, offsetY } = ev;
+    const inset = Math.round(sampleSize / 2);
+    //inset by 20px as our workable range
+    offsetX = Math.min(offsetX, cols - inset);
+    offsetX = Math.max(inset, offsetX);
+    offsetY = Math.min(offsetY, rows - inset);
+    offsetY = Math.max(offsetY, inset);
+    //create a 41 x 41 pixel square for the average
+    let reds = 0; //total for all the red values in the 41x41 square
+    let greens = 0;
+    let blues = 0;
+    //for anything in the range (x-20, y-20) to (x+20, y+20)
+    for (let x = -1 * inset; x <= inset; x++) {
+      for (let y = -1 * inset; y <= inset; y++) {
+        let c = getPixelColor(data, cols, offsetY + y, offsetX + x);
+        reds += c.red;
+        greens += c.green;
+        blues += c.blue;
+      }
+    }
+    let nums = inset * inset * 4; //total number of pixels in the box
+    let red = Math.round(reds / nums);
+    let green = Math.round(greens / nums);
+    let blue = Math.round(blues / nums);
+
+    //now draw an overlaying square of that colour
+    //make the square twice as big as the sample area
+    ctx.fillStyle = `rgb(${red}, ${green}, ${blue})`;
+    ctx.strokeStyle = 'solid 2px #FFFFFF';
+    ctx.strokeRect(offsetX - inset, offsetY - inset, inset * 2, inset * 2);
+    ctx.fillRect(offsetX - inset, offsetY - inset, inset * 2, inset * 2);
+
+    return { red, green, blue, alpha: 1 };
+  };
+
+  const getPixelColor = (data: Uint8ClampedArray, cols: number, x: number, y: number): RGBA => {
+    let pixel = cols * x + y;
+    let arrayPos = pixel * 4;
+
+    return {
+      red: data[arrayPos],
+      green: data[arrayPos + 1],
+      blue: data[arrayPos + 2],
+      alpha: data[arrayPos + 3],
+    };
+  };
+
+  return (
+    <div style={{ padding: 16 }}>
+      <div style={{ marginBottom: 16 }}>
+        <canvas ref={canvasRef} />
+      </div>
+      <ColorSwatch rgba={pixelColor}>Pixel Color</ColorSwatch>
+      <ColorSwatch rgba={averageColor}>Average Color</ColorSwatch>
+    </div>
+  );
+};

package/src/tools/color-picker/color-picker.stories.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ColorPicker, ColorPickerProps } from './color-picker.component';
+
+export default {
+  title: 'Tools/Color Picker',
+  component: ColorPicker,
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const ColorPickerPlayground = (args: ColorPickerProps) => <ColorPicker {...args} />;
+
+const ColorPickerPlaygroundProps: Partial<ColorPickerProps> = {
+  imageUrl: 'promenade.webp',
+  imageHeight: 683,
+  imageWidth: 1024,
+  sampleSize: 40,
+};
+
+ColorPickerPlayground.args = ColorPickerPlaygroundProps;

package/src/tools/color-swatch/color-swatch.component.tsx

@@ -0,0 +1,68 @@
+import React, { CSSProperties, ReactNode } from 'react';
+import { HSLAToString, RGB, RGBToHSL, ShadowElevation } from '@uni-design-system/uni-core';
+import { BoxShadow, Padding, Text, useTheme } from '../../core';
+
+export type CardType = 'elevated' | 'filled' | 'outlined';
+
+export interface ColorSwatchProps {
+  rgba: RGB;
+  children?: ReactNode;
+  cardType?: CardType;
+  elevation?: ShadowElevation;
+  width?: string | number;
+  height?: string | number;
+}
+
+export function ColorSwatch({
+  rgba,
+  children,
+  cardType = 'elevated',
+  elevation,
+  width,
+  height,
+}: ColorSwatchProps) {
+  const theme = useTheme();
+
+  const { borderRadii } = theme.containers.card;
+
+  const cardStyle: CSSProperties = {
+    height,
+    width,
+    display: 'inline-block',
+    backgroundColor: theme.colors['background'],
+    color: theme.colors['on-background'],
+    borderRadius: borderRadii?.sm,
+    ...Padding('xs', 'all'),
+    margin: 8,
+  };
+
+  if (cardType === 'elevated') {
+    cardStyle.boxShadow = BoxShadow(elevation || 'pressed');
+  }
+
+  const hsla = RGBToHSL(rgba);
+
+  const HSLColor = HSLAToString({
+    hue: Math.round(hsla.hue || 0),
+    saturation: Math.round(hsla.hue || 0),
+    lightness: Math.round(hsla.lightness || 0),
+  });
+  const swatchColor = `rgb(${rgba.red}, ${rgba.green}, ${rgba.blue})`;
+
+  const swatchStyle: CSSProperties = {
+    backgroundColor: swatchColor,
+    height: 200,
+    width: 200,
+    display: 'inline-block',
+    borderRadius: borderRadii?.xs,
+  };
+
+  return (
+    <div style={cardStyle}>
+      <div style={swatchStyle} />
+      <Text role="headline-medium">{children}</Text>
+      <Text role="title-small">{swatchColor}</Text>
+      <Text role="title-small">{HSLColor}</Text>
+    </div>
+  );
+}

package/src/utils/storage-manager.ts

@@ -0,0 +1,51 @@
+export interface StorageManager<T> {
+  type: 'cookie' | 'localStorage';
+  get(init?: T): T | undefined;
+  set(value: T): void;
+}
+
+// Usage
+// export const localStorageManager = createLocalStorageManager(STORAGE_KEY);
+export const createLocalStorageManager = <T>(key: string): StorageManager<T> => ({
+  type: 'localStorage',
+  get(init?) {
+    if (!globalThis?.document) return init;
+    let value: any;
+    try {
+      value = localStorage.getItem(key) || init;
+    } catch (e) {
+      // no op
+    }
+
+    return JSON.parse(value) || init;
+  },
+  set(value) {
+    try {
+      localStorage.setItem(key, JSON.stringify(value));
+    } catch (e) {
+      // no op
+    }
+  },
+});
+
+const parseCookie = (cookie: string, key: string): string | undefined => {
+  const match = cookie.match(new RegExp(`(^| )${key}=([^;]+)`));
+  return match?.[2];
+};
+
+// Usage
+// export const cookieStorageManager = createCookieStorageManager(STORAGE_KEY);
+export const createCookieStorageManager = (
+  key: string,
+  cookie?: string
+): StorageManager<string> => ({
+  type: 'cookie',
+  get(init?): string | undefined {
+    if (cookie) return parseCookie(cookie, key);
+    if (!globalThis?.document) return init;
+    return parseCookie(document.cookie, key) || init;
+  },
+  set(value) {
+    document.cookie = `${key}=${value}; max-age=31536000; path=/`;
+  },
+});

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "@uni-design-system/tsconfig/base.json",
+  "compilerOptions": {
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "noEmit": true, // Ensures 'tsc' only checks types and doesn't write files
+    "outDir": "dist", // If you DO emit, they go here
+    "rootDir": "src"
+  },
+  "include": ["src"],
+  "exclude": ["dist", "node_modules", ".storybook"]
+}

package/vite.config.ts

@@ -0,0 +1,29 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'unplugin-dts/vite'; // Essential for shipping types
+import { resolve } from 'path';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    dts({ insertTypesEntry: true }), // Automatically generates .d.ts files
+  ],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'UniReact',
+      formats: ['es'], // Modern libraries typically only need ES modules
+      fileName: 'index',
+    },
+    rollupOptions: {
+      // CRITICAL: Do not bundle React or Core into your library
+      external: ['react', 'react-dom', 'react/jsx-runtime', '@repo/core'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+        },
+      },
+    },
+  },
+});

package/vitest.config.ts

@@ -0,0 +1,36 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { defineConfig } from 'vitest/config';
+
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+
+import { playwright } from '@vitest/browser-playwright';
+
+const dirname =
+  typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+
+// More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
+export default defineConfig({
+  test: {
+    projects: [
+      {
+        extends: true,
+        plugins: [
+          // The plugin will run tests for the stories defined in your Storybook config
+          // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+          storybookTest({ configDir: path.join(dirname, '.storybook') }),
+        ],
+        test: {
+          name: 'storybook',
+          browser: {
+            enabled: true,
+            headless: true,
+            provider: playwright({}),
+            instances: [{ browser: 'chromium' }],
+          },
+        },
+      },
+    ],
+  },
+});

package/vitest.shims.d.ts

@@ -0,0 +1 @@
+/// <reference types="@vitest/browser-playwright" />

package/README.md

@@ -1,22 +0,0 @@
-<p align="center">
-  <a href="https://uni-design-system.github.io/uni-react/" target="_blank">
-    <img src="https://github.com/uni-design-system/uni-react/raw/v0.0.17/.github/uni-logo.png" alt="UNI Design System">
-  </a>
-</p>
-
-<p align="center">
-  UNI React is a themed based component library built atop of UNI Design System Core Concepts.
-<p>
-
-<p align="center">
-  <a href="https://uni-design-system.github.io/uni-react/"><strong>Browse the component library &rarr;</strong></a>
-</p>
-
-
-
-
-## Local Development
-If you would like to run the UNI React component library on your local machine, 
-```
-yarn && yarn storybook
-```

package/dist/cjs/components/button/button.component.js

@@ -1,98 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = void 0;
-const react_1 = __importStar(require("react"));
-const core_1 = require("../../core");
-const icon_text_row_1 = require("../icon-text-row");
-const use_ripple_hook_1 = __importDefault(require("use-ripple-hook"));
-const Button = (_a) => {
-    var { text, children, buttonType = 'filled', disabled = false, iconName, contentColor: overrideContentColor, onClick, disableRipple = false, style: userStyle } = _a, rest = __rest(_a, ["text", "children", "buttonType", "disabled", "iconName", "contentColor", "onClick", "disableRipple", "style"]);
-    const { deviceSize } = (0, core_1.useLayout)();
-    const theme = (0, core_1.useTheme)();
-    const [ref, createRipple] = (0, use_ripple_hook_1.default)({ disabled: disableRipple || buttonType === 'elevated' });
-    const buttonProps = theme.buttons[buttonType];
-    const getOnColorToken = (color) => `on-${color}`;
-    const contentColor = overrideContentColor || getOnColorToken(buttonProps.color);
-    const [hover, setHover] = (0, react_1.useState)(false);
-    const [click, setClick] = (0, react_1.useState)(false);
-    const style = Style(theme, buttonType, deviceSize, hover, disabled, click);
-    (0, react_1.useEffect)(() => {
-        setTimeout(() => {
-            setClick(false);
-        }, 250);
-    }, [click]);
-    const handleClick = (event) => {
-        setClick(true);
-        onClick && onClick(event);
-    };
-    return (react_1.default.createElement("button", Object.assign({ onMouseDown: createRipple, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), onClick: handleClick, disabled: disabled, style: Object.assign(Object.assign({}, style), userStyle), ref: ref }, rest), iconName ? (react_1.default.createElement(icon_text_row_1.IconTextRow, { iconName: iconName, color: contentColor, textRole: "button" }, text || children)) : (react_1.default.createElement(core_1.Text, { align: "center", role: "button", colorToken: contentColor }, text || children))));
-};
-exports.Button = Button;
-function Style(theme, buttonType, size = 'md', hover, disabled, click) {
-    const { color, horizontalPadding, verticalPadding, borderColor, borderWidth, borderRadius, contentColor } = theme.buttons[buttonType];
-    const styles = {
-        overflow: 'hidden',
-        transition: 'all 0.3s cubic-bezier(.25,.8,.25,1)',
-        cursor: 'pointer',
-        paddingTop: verticalPadding[size] + 'px',
-        paddingBottom: verticalPadding[size] + 'px',
-        paddingLeft: horizontalPadding[size] + 'px',
-        paddingRight: horizontalPadding[size] + 'px',
-        borderRadius: borderRadius + 'px',
-        backgroundColor: theme.colors[color],
-        borderColor: theme.colors[borderColor],
-        borderWidth: borderWidth + 'px',
-        borderStyle: buttonType === 'outlined' ? 'solid' : 'none',
-    };
-    if (buttonType === 'elevated' && !disabled) {
-        styles.boxShadow = (0, core_1.BoxShadow)(hover ? 'focussed' : 'raised');
-    }
-    if (disabled && buttonType === 'elevated') {
-        styles.boxShadow = (0, core_1.BoxShadow)('pressed');
-        styles.color = theme.colors[contentColor];
-    }
-    if (disabled) {
-        styles.cursor = 'not-allowed';
-    }
-    if (click && buttonType === 'elevated' && !disabled) {
-        styles.boxShadow = (0, core_1.BoxShadow)('pressed');
-    }
-    return styles;
-}

package/dist/cjs/components/button/index.js

@@ -1,17 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./button.component"), exports);