@uni-design-system/uni-react 0.0.18 → 1.0.0

package/dist/{cjs/layouts → layouts}/parallax-hero/parallax-hero.component.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
 import { ParallaxHeroProps } from './parallax-hero.model';
 export declare const ParallaxHero: ({ layers, children }: ParallaxHeroProps) => JSX.Element;
+//# sourceMappingURL=parallax-hero.component.d.ts.map

package/dist/layouts/parallax-hero/parallax-hero.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parallax-hero.component.d.ts","sourceRoot":"","sources":["../../../src/layouts/parallax-hero/parallax-hero.component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1D,eAAO,MAAM,YAAY,GAAI,sBAAsB,iBAAiB,KAAG,GAAG,CAAC,OAqB1E,CAAC"}

package/dist/{cjs/layouts → layouts}/parallax-hero/parallax-hero.model.d.ts

@@ -8,3 +8,4 @@ export interface ParallaxHeroProps {
     layers: ImageLayer[];
     children: ReactNode;
 }
+//# sourceMappingURL=parallax-hero.model.d.ts.map

package/dist/layouts/parallax-hero/parallax-hero.model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parallax-hero.model.d.ts","sourceRoot":"","sources":["../../../src/layouts/parallax-hero/parallax-hero.model.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB"}

package/dist/stories/Button.d.ts

@@ -0,0 +1,15 @@
+export interface ButtonProps {
+    /** Is this the principal call to action on the page? */
+    primary?: boolean;
+    /** What background color to use */
+    backgroundColor?: string;
+    /** How large should the button be? */
+    size?: 'small' | 'medium' | 'large';
+    /** Button contents */
+    label: string;
+    /** Optional click handler */
+    onClick?: () => void;
+}
+/** Primary UI component for user interaction */
+export declare const Button: ({ primary, size, backgroundColor, label, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Button.d.ts.map

package/dist/stories/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/stories/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,WAAW;IAC1B,wDAAwD;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mCAAmC;IACnC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sCAAsC;IACtC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,gDAAgD;AAChD,eAAO,MAAM,MAAM,GAAI,qDAMpB,WAAW,4CAYb,CAAC"}

package/dist/stories/Button.stories.d.ts

@@ -0,0 +1,24 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: ({ primary, size, backgroundColor, label, ...props }: import('./Button').ButtonProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        backgroundColor: {
+            control: "color";
+        };
+    };
+    args: {
+        onClick: import('storybook/test').Mock<(...args: any[]) => any>;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Large: Story;
+export declare const Small: Story;
+//# sourceMappingURL=Button.stories.d.ts.map

package/dist/stories/Button.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../src/stories/Button.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAO5D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;CAeqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAIvB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC"}

package/dist/stories/Header.d.ts

@@ -0,0 +1,12 @@
+type User = {
+    name: string;
+};
+export interface HeaderProps {
+    user?: User;
+    onLogin?: () => void;
+    onLogout?: () => void;
+    onCreateAccount?: () => void;
+}
+export declare const Header: ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Header.d.ts.map

package/dist/stories/Header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/stories/Header.tsx"],"names":[],"mappings":"AAGA,OAAO,cAAc,CAAC;AAEtB,KAAK,IAAI,GAAG;IACV,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,eAAO,MAAM,MAAM,GAAI,8CAA8C,WAAW,4CAuC/E,CAAC"}

package/dist/stories/Header.stories.d.ts

@@ -0,0 +1,19 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: ({ user, onLogin, onLogout, onCreateAccount }: import('./Header').HeaderProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    args: {
+        onLogin: import('storybook/test').Mock<(...args: any[]) => any>;
+        onLogout: import('storybook/test').Mock<(...args: any[]) => any>;
+        onCreateAccount: import('storybook/test').Mock<(...args: any[]) => any>;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const LoggedIn: Story;
+export declare const LoggedOut: Story;
+//# sourceMappingURL=Header.stories.d.ts.map

package/dist/stories/Header.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.stories.d.ts","sourceRoot":"","sources":["../../src/stories/Header.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAM5D,QAAA,MAAM,IAAI;;;;;;;;;;;;CAcqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAAU,CAAC"}

package/dist/stories/Page.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+export declare const Page: React.FC;
+//# sourceMappingURL=Page.d.ts.map

package/dist/stories/Page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Page.d.ts","sourceRoot":"","sources":["../../src/stories/Page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,YAAY,CAAC;AAMpB,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EA+DxB,CAAC"}

package/dist/stories/Page.stories.d.ts

@@ -0,0 +1,13 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import('react').FC<{}>;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const LoggedOut: Story;
+export declare const LoggedIn: Story;
+//# sourceMappingURL=Page.stories.d.ts.map

package/dist/stories/Page.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Page.stories.d.ts","sourceRoot":"","sources":["../../src/stories/Page.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAM5D,QAAA,MAAM,IAAI;;;;;;CAOmB,CAAC;AAE9B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,SAAS,EAAE,KAAU,CAAC;AAGnC,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC"}

package/dist/{cjs/tools → tools}/color-picker/color-picker.component.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface ColorPickerProps {
     imageUrl: string;
     imageWidth: number;
@@ -6,3 +5,4 @@ export interface ColorPickerProps {
     sampleSize: number;
 }
 export declare const ColorPicker: ({ imageUrl, imageWidth, imageHeight, sampleSize }: ColorPickerProps) => JSX.Element;
+//# sourceMappingURL=color-picker.component.d.ts.map

package/dist/tools/color-picker/color-picker.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.component.d.ts","sourceRoot":"","sources":["../../../src/tools/color-picker/color-picker.component.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,GAAI,mDAAwD,gBAAgB,KAAG,GAAG,CAAC,OAsI1G,CAAC"}

package/dist/tools/color-picker/color-picker.stories.d.ts

@@ -0,0 +1,14 @@
+import { ColorPickerProps } from './color-picker.component';
+declare const _default: {
+    title: string;
+    component: ({ imageUrl, imageWidth, imageHeight, sampleSize }: ColorPickerProps) => JSX.Element;
+    parameters: {
+        layout: string;
+    };
+};
+export default _default;
+export declare const ColorPickerPlayground: {
+    (args: ColorPickerProps): import("react/jsx-runtime").JSX.Element;
+    args: Partial<ColorPickerProps>;
+};
+//# sourceMappingURL=color-picker.stories.d.ts.map

package/dist/tools/color-picker/color-picker.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.stories.d.ts","sourceRoot":"","sources":["../../../src/tools/color-picker/color-picker.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;;;;;;;;AAEzE,wBAME;AAEF,eAAO,MAAM,qBAAqB;WAAU,gBAAgB;;CAA8B,CAAC"}

package/dist/{cjs/tools → tools}/color-swatch/color-swatch.component.d.ts

@@ -9,4 +9,5 @@ export interface ColorSwatchProps {
     width?: string | number;
     height?: string | number;
 }
-export declare function ColorSwatch({ rgba, children, cardType, elevation, width, height }: ColorSwatchProps): JSX.Element;
+export declare function ColorSwatch({ rgba, children, cardType, elevation, width, height }: ColorSwatchProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=color-swatch.component.d.ts.map

package/dist/tools/color-swatch/color-swatch.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-swatch.component.d.ts","sourceRoot":"","sources":["../../../src/tools/color-swatch/color-swatch.component.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAgB,GAAG,EAAY,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAG3F,MAAM,MAAM,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE1D,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,GAAG,CAAC;IACV,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAqB,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,gBAAgB,2CA6ChH"}

package/dist/{esm/utils → utils}/index.d.ts

@@ -1 +1,2 @@
 export * from './storage-manager';
+//# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}

package/dist/{cjs/utils → utils}/storage-manager.d.ts

@@ -5,3 +5,4 @@ export interface StorageManager<T> {
 }
 export declare const createLocalStorageManager: <T>(key: string) => StorageManager<T>;
 export declare const createCookieStorageManager: (key: string, cookie?: string) => StorageManager<string>;
+//# sourceMappingURL=storage-manager.d.ts.map

package/dist/utils/storage-manager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"storage-manager.d.ts","sourceRoot":"","sources":["../../src/utils/storage-manager.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,IAAI,EAAE,QAAQ,GAAG,cAAc,CAAC;IAChC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC;IAC7B,GAAG,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;CACrB;AAID,eAAO,MAAM,yBAAyB,GAAI,CAAC,EAAE,KAAK,MAAM,KAAG,cAAc,CAAC,CAAC,CAoBzE,CAAC;AASH,eAAO,MAAM,0BAA0B,GAAI,KAAK,MAAM,EAAE,SAAS,MAAM,KAAG,cAAc,CAAC,MAAM,CAU7F,CAAC"}

package/package.json

@@ -1,70 +1,62 @@
 {
   "name": "@uni-design-system/uni-react",
-  "version": "0.0.18",
-  "description": "React component library for the UNI Design System.",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "rm -rf dist/ && yarn build:esm && yarn build:cjs",
-    "build:esm": "tsc",
-    "build:cjs": "tsc --module CommonJS --outDir dist/cjs",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "rm -rf docs/ && build-storybook -o docs"
-  },
+  "version": "1.0.0",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/uni-design-system/uni-react.git"
+    "url": "https://github.com/uni-design-system/uni",
+    "directory": "packages/react"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
   },
-  "author": "George English",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/uni-design-system/uni-react/issues"
+  "private": false,
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "@uni-design-system/uni-core": ">=1.0.0"
   },
-  "keywords": [
-    "react",
-    "components",
-    "ui",
-    "ux",
-    "design system"
-  ],
-  "homepage": "https://github.com/uni-design-system/uni-react#readme",
-  "packageManager": "yarn@3.0.2",
   "dependencies": {
-    "@callstack/react-theme-provider": "^3.0.8",
-    "@dnd-kit/core": "^6.0.7",
-    "@dnd-kit/modifiers": "^6.0.1",
-    "@dnd-kit/sortable": "^7.0.2",
-    "@uni-design-system/uni-core": "^0.0.35",
-    "@uni-design-system/uni-react-icons": "^0.1.2",
-    "framer-motion": "4.1.17",
-    "use-ripple-hook": "^1.0.22"
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/react": "^0.4.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@uni-design-system/uni-react-icons": "^0.2.0",
+    "framer-motion": "^12.38.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "use-ripple-hook": "^2.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.5",
-    "@react-theming/storybook-addon": "^1.1.6",
-    "@storybook/addon-actions": "^6.5.6",
-    "@storybook/addon-docs": "^6.5.6",
-    "@storybook/addon-essentials": "^6.5.6",
-    "@storybook/addon-interactions": "^6.5.6",
-    "@storybook/addon-links": "^6.5.6",
-    "@storybook/addons": "^6.5.6",
-    "@storybook/react": "^6.5.6",
-    "@storybook/testing-library": "^0.0.11",
-    "@storybook/theming": "^6.5.6",
-    "@types/node": "^18.14.6",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.13",
-    "babel-loader": "^8.2.3",
-    "prettier": "2.7.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "typescript": "^4.6.2"
+    "@chromatic-com/storybook": "^5.1.2",
+    "@storybook/addon-a11y": "^10.3.6",
+    "@storybook/addon-docs": "^10.3.6",
+    "@storybook/addon-vitest": "^10.3.6",
+    "@storybook/react-vite": "^10.3.6",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "@vitest/browser-playwright": "^4.1.5",
+    "@vitest/coverage-v8": "^4.1.5",
+    "csstype": "^3.2.3",
+    "playwright": "^1.59.1",
+    "storybook": "^10.3.6",
+    "typescript": "^5.0.0",
+    "unplugin-dts": "^1.0.0",
+    "vite": "^7.0.0",
+    "vitest": "^4.1.5",
+    "@uni-design-system/uni-core": "1.0.1",
+    "@uni-design-system/tsconfig": "0.0.0"
   },
-  "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint src/",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "release": "pnpm build && pnpm changeset publish"
   }
-}
+}

package/src/components/button/button.component.tsx

@@ -0,0 +1,125 @@
+import React, { CSSProperties, ReactNode, useEffect, useState } from 'react';
+import { BoxShadow, Text, useLayout, useTheme } from '../../core';
+import { Theme, ButtonType, ColorToken, Size, ContentColorToken } from '@uni-design-system/uni-core';
+import { IconTextRow } from '../icon-text-row';
+import { IconName } from '../../core/icon';
+import { useRipple } from 'use-ripple-hook';
+
+export interface ButtonProps {
+  text?: string;
+  children?: ReactNode;
+  buttonType?: ButtonType;
+  active?: boolean;
+  disabled?: boolean;
+  iconName?: IconName;
+  contentColor?: ContentColorToken;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  disableRipple?: boolean;
+  style?: CSSProperties;
+}
+
+export const Button = ({
+  text,
+  children,
+  buttonType = 'filled',
+  disabled = false,
+  iconName,
+  contentColor: overrideContentColor,
+  onClick,
+  disableRipple = false,
+  style: userStyle,
+  ...rest
+}: ButtonProps): JSX.Element => {
+  const { deviceSize } = useLayout();
+  const theme = useTheme();
+  const [ref, createRipple] = useRipple({ disabled: disableRipple || buttonType === 'elevated' });
+  const buttonProps = theme.buttons[buttonType];
+
+  const getOnColorToken = (color: ColorToken) => `on-${color}` as ContentColorToken;
+  const contentColor = overrideContentColor || getOnColorToken(buttonProps.color);
+
+  const [hover, setHover] = useState<boolean>(false);
+  const [click, setClick] = useState<boolean>(false);
+
+  const style = Style(theme, buttonType, deviceSize, hover, disabled, click);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setClick(false);
+    }, 250);
+  }, [click]);
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    setClick(true);
+    onClick && onClick(event);
+  };
+
+  return (
+    <button
+      onMouseDown={createRipple}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+      onClick={handleClick}
+      disabled={disabled}
+      style={{ ...style, ...userStyle }}
+      ref={ref}
+      {...rest}
+    >
+      {iconName ? (
+        <IconTextRow iconName={iconName} color={contentColor} textRole="button">
+          {text || children}
+        </IconTextRow>
+      ) : (
+        <Text align="center" role="button" colorToken={contentColor}>
+          {text || children}
+        </Text>
+      )}
+    </button>
+  );
+};
+
+function Style(
+  theme: Theme,
+  buttonType: ButtonType,
+  size: Size = 'md',
+  hover: boolean,
+  disabled: boolean,
+  click: boolean,
+): CSSProperties {
+  const { color, horizontalPadding, verticalPadding, borderColor, borderWidth, borderRadius, contentColor } =
+    theme.buttons[buttonType];
+
+  const styles: CSSProperties = {
+    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 as ColorToken],
+    borderWidth: borderWidth + 'px',
+    borderStyle: buttonType === 'outlined' ? 'solid' : 'none',
+  };
+
+  if (buttonType === 'elevated' && !disabled) {
+    styles.boxShadow = BoxShadow(hover ? 'focussed' : 'raised');
+  }
+
+  if (disabled && buttonType === 'elevated') {
+    styles.boxShadow = BoxShadow('pressed');
+    styles.color = theme.colors[contentColor];
+  }
+
+  if (disabled) {
+    styles.cursor = 'not-allowed';
+  }
+
+  if (click && buttonType === 'elevated' && !disabled) {
+    styles.boxShadow = BoxShadow('pressed');
+  }
+
+  return styles;
+}

package/src/components/button/button.stories.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { Button, ButtonProps } from './button.component';
+
+export default {
+  title: 'Components/Buttons',
+  component: Button,
+};
+
+export const Filled = (args: ButtonProps) => <Button {...args} />;
+
+Filled.args = {
+  disabled: false,
+  buttonType: 'filled',
+  text: 'Filled Button',
+};
+
+Filled.story = {
+  name: 'Filled Button',
+};
+
+export const FilledSecondary = (args: ButtonProps) => <Button {...args} />;
+
+FilledSecondary.args = {
+  disabled: false,
+  buttonType: 'filled-secondary',
+  text: 'Secondary Button',
+};
+
+FilledSecondary.story = {
+  name: 'Secondary Filled Button',
+};
+
+export const Elevated = (args: ButtonProps) => <Button {...args} />;
+
+Elevated.args = {
+  disabled: false,
+  buttonType: 'elevated',
+  text: 'Elevated Button',
+};
+
+Elevated.story = {
+  name: 'Elevated Button',
+};
+
+export const DisabledElevated = (args: ButtonProps) => <Button {...args} />;
+
+DisabledElevated.args = {
+  disabled: true,
+  buttonType: 'elevated',
+  text: 'Elevated Button',
+};
+
+DisabledElevated.story = {
+  name: 'Disabled Elevated Button',
+};
+
+export const Outlined = (args: ButtonProps) => <Button {...args} />;
+
+Outlined.args = {
+  disabled: false,
+  buttonType: 'outlined',
+  text: 'Outlined Button',
+};
+
+Outlined.story = {
+  name: 'Outlined Button',
+};
+
+export const DisabledOutlined = (args: ButtonProps) => <Button {...args} />;
+
+DisabledOutlined.args = {
+  disabled: true,
+  buttonType: 'outlined',
+  text: 'Outlined Button',
+};
+
+DisabledOutlined.story = {
+  name: 'Disabled Outlined Button',
+};

package/src/components/card/card.component.tsx

@@ -0,0 +1,56 @@
+import React, { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+import { ColorToken, ContainerColorToken, ShadowElevation, Size } from '@uni-design-system/uni-core';
+import { BoxShadow, Padding, useTheme } from '../../core';
+import { Property } from 'csstype';
+import Container from '../../core/container/container.component';
+
+export type CardType = 'elevated' | 'filled' | 'outlined';
+
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+  cardType?: CardType;
+  colorToken?: ContainerColorToken;
+  elevation?: ShadowElevation;
+  width?: Property.Width<number | string>;
+  height?: Property.Height<number | string>;
+  borderRadius?: Size | 'none';
+}
+
+export function Card({
+  children,
+  cardType,
+  elevation,
+  colorToken = 'surface',
+  width,
+  height,
+  borderRadius,
+  style,
+  ...rest
+}: CardProps) {
+  const { colors, containers } = useTheme();
+
+  const { borderRadii } = containers.card;
+
+  const styles: CSSProperties = {
+    height,
+    width,
+    backgroundColor: colors[colorToken || 'surface'],
+    color: colors[(`on-${colorToken}` as ColorToken) || 'on-surface'],
+    ...Padding('md', 'all'),
+    ...style,
+  };
+
+  if (cardType === 'elevated') {
+    styles.boxShadow = BoxShadow(elevation || 'raised');
+  }
+
+  if (borderRadii && borderRadius !== 'none') {
+    styles.borderRadius = borderRadii[borderRadius || 'md'];
+  }
+
+  return (
+    <Container colorToken={colorToken} style={styles} {...rest}>
+      {children}
+    </Container>
+  );
+}

package/src/components/card/card.stories.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Card, CardProps } from './card.component';
+import { Text } from '../../core';
+
+export default {
+  title: 'Components/Cards',
+  component: Card,
+};
+
+export const Elevated = (args: CardProps) => {
+  return (
+    <Card {...args}>
+      <Text role="title-large">Sample Content</Text>
+    </Card>
+  );
+};
+
+const ElevatedArgs: CardProps = {
+  cardType: 'elevated',
+};
+
+Elevated.args = ElevatedArgs;

package/src/components/draggable/SortableList/components/DragHandle/dragHandle.component.tsx

@@ -0,0 +1,20 @@
+import React, { useContext } from 'react';
+import { SortableItemContext } from '../SortableItem/sortableItem.context';
+import { Button, ButtonProps } from '../../../../button';
+import { useDndContext } from '@dnd-kit/core';
+
+export const DragHandle = ({ ...rest }: ButtonProps): JSX.Element => {
+  const { attributes, listeners } = useContext(SortableItemContext);
+  const dndContext = useDndContext();
+
+  return (
+    <Button
+      style={{ cursor: dndContext.activatorEvent ? 'grabbing' : 'grab' }}
+      iconName="barsSolid"
+      buttonType="icon"
+      {...attributes}
+      {...listeners}
+      {...rest}
+    />
+  );
+};