@visio-io/design-system 1.0.0

package/dist/style.css

@@ -0,0 +1 @@
+.button{transition:all .2s ease-in-out}.button:disabled{cursor:not-allowed}.borderRadiusNone{border-radius:0}.borderRadiusSmall{border-radius:4px}.borderRadiusMedium{border-radius:8px}.borderRadiusLarge{border-radius:16px}.borderRadiusRound{border-radius:50px}._button_1x96v_1{transition:all .2s ease-in-out}._button_1x96v_1:disabled{cursor:not-allowed}._borderRadiusNone_1x96v_8{border-radius:0}._borderRadiusSmall_1x96v_12{border-radius:4px}._borderRadiusMedium_1x96v_16{border-radius:8px}._borderRadiusLarge_1x96v_20{border-radius:16px}._borderRadiusRound_1x96v_24{border-radius:50px}

package/dist/types/components/Button/Button.d.ts

@@ -0,0 +1,2 @@
+import { ButtonProps } from './types';
+export declare const Button: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from './Button';
+import '../../styles/index.scss';
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof Button>;
+export declare const Default: Story;
+export declare const Variants: Story;
+export declare const Sizes: Story;
+export declare const Colors: Story;
+export declare const States: Story;
+export declare const WithIcons: Story;
+export declare const BorderRadius: Story;
+export declare const FullWidth: Story;
+export declare const Combinations: Story;
+export declare const Interactive: Story;

package/dist/types/components/Button/handlers.d.ts

@@ -0,0 +1,3 @@
+import { MouseEvent } from 'react';
+import { ButtonProps } from './types';
+export declare const createClickHandler: (isDisabled: boolean, onClick?: ButtonProps["onClick"], onAction?: ButtonProps["onAction"]) => ((event: MouseEvent<HTMLButtonElement>) => void) | undefined;

package/dist/types/components/Button/index.d.ts

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { ButtonProps, ButtonVariant, ButtonSize, ButtonColor, ButtonBorderRadius, } from './types';

package/dist/types/components/Button/types.d.ts

@@ -0,0 +1,19 @@
+import { ButtonProps as MuiButtonProps } from '@mui/material';
+import { ReactNode, MouseEvent } from 'react';
+export type ButtonVariant = 'contained' | 'outlined' | 'text';
+export type ButtonSize = 'small' | 'medium' | 'large';
+export type ButtonColor = 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success' | 'inherit';
+export type ButtonBorderRadius = 'none' | 'small' | 'medium' | 'large' | 'round' | number;
+export interface ButtonProps extends Omit<MuiButtonProps, 'variant' | 'size' | 'color' | 'type' | 'startIcon' | 'endIcon' | 'onClick'> {
+    loading?: boolean;
+    loadingText?: string;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    color?: ButtonColor;
+    type?: 'button' | 'submit' | 'reset';
+    borderRadius?: ButtonBorderRadius;
+    startIcon?: ReactNode;
+    endIcon?: ReactNode;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    onAction?: (event: MouseEvent<HTMLButtonElement>) => void;
+}

package/dist/types/components/Button/utils.d.ts

@@ -0,0 +1,3 @@
+import { ButtonBorderRadius } from './types';
+export declare const getBorderRadiusClass: (borderRadius: ButtonBorderRadius | undefined, defaultBorderRadius?: ButtonBorderRadius) => string;
+export declare const getBorderRadiusValue: (borderRadius: ButtonBorderRadius | undefined) => string | undefined;

package/dist/types/components/index.d.ts

@@ -0,0 +1,2 @@
+export { Button } from "./Button/Button";
+export type { ButtonProps } from "./Button/types";

package/dist/types/index.d.ts

@@ -0,0 +1,4 @@
+import "./styles/index.scss";
+export { lightTheme, darkTheme, spacingScale } from "./theme/theme";
+export * from "./components";
+export * from "./styles/tokens";

package/dist/types/styles/tokens/colors.d.ts

@@ -0,0 +1,52 @@
+export declare const lightColors: {
+    readonly primary: "#006399";
+    readonly onPrimary: "#ffffff";
+    readonly primaryContainer: "#cfe5ff";
+    readonly onPrimaryContainer: "#001d33";
+    readonly secondary: "#526070";
+    readonly onSecondary: "#ffffff";
+    readonly secondaryContainer: "#d5e4f7";
+    readonly onSecondaryContainer: "#0f1d2a";
+    readonly tertiary: "#68587a";
+    readonly onTertiary: "#ffffff";
+    readonly tertiaryContainer: "#eedcff";
+    readonly onTertiaryContainer: "#231533";
+    readonly error: "#ba1a1a";
+    readonly onError: "#ffffff";
+    readonly errorContainer: "#ffdad6";
+    readonly onErrorContainer: "#410002";
+    readonly surface: "#fdfcff";
+    readonly onSurface: "#1a1c1e";
+    readonly surfaceVariant: "#dee3eb";
+    readonly onSurfaceVariant: "#42474e";
+    readonly outline: "#72787e";
+    readonly inverseSurface: "#2f3033";
+    readonly inverseOnSurface: "#f1f0f4";
+    readonly inversePrimary: "#98cbff";
+};
+export declare const darkColors: {
+    readonly primary: "#98cbff";
+    readonly onPrimary: "#003354";
+    readonly primaryContainer: "#004a78";
+    readonly onPrimaryContainer: "#cfe5ff";
+    readonly secondary: "#b9c8da";
+    readonly onSecondary: "#233241";
+    readonly secondaryContainer: "#3a4a58";
+    readonly onSecondaryContainer: "#d5e4f7";
+    readonly tertiary: "#d3bee5";
+    readonly onTertiary: "#382a4a";
+    readonly tertiaryContainer: "#4f4062";
+    readonly onTertiaryContainer: "#eedcff";
+    readonly error: "#ffb4ab";
+    readonly onError: "#690005";
+    readonly errorContainer: "#93000a";
+    readonly onErrorContainer: "#ffdad6";
+    readonly surface: "#1a1c1e";
+    readonly onSurface: "#e2e2e6";
+    readonly surfaceVariant: "#42474e";
+    readonly onSurfaceVariant: "#c2c7cf";
+    readonly outline: "#8c9198";
+    readonly inverseSurface: "#e2e2e6";
+    readonly inverseOnSurface: "#2f3033";
+    readonly inversePrimary: "#006399";
+};

package/dist/types/styles/tokens/index.d.ts

@@ -0,0 +1,4 @@
+export { lightColors, darkColors } from "./colors";
+export { typographyTokens } from "./typography";
+export { spacingTokens } from "./spacing";
+export { radiiTokens } from "./radii";

package/dist/types/styles/tokens/radii.d.ts

@@ -0,0 +1,7 @@
+export declare const radiiTokens: {
+    readonly sm: 4;
+    readonly md: 8;
+    readonly lg: 12;
+    readonly xl: 16;
+    readonly pill: 999;
+};

package/dist/types/styles/tokens/spacing.d.ts

@@ -0,0 +1,9 @@
+export declare const spacingTokens: {
+    readonly xxs: 2;
+    readonly xs: 4;
+    readonly sm: 8;
+    readonly md: 12;
+    readonly lg: 16;
+    readonly xl: 24;
+    readonly xxl: 32;
+};

package/dist/types/styles/tokens/typography.d.ts

@@ -0,0 +1,22 @@
+export declare const typographyTokens: {
+    readonly fontFamily: "\"Inter\", \"Helvetica\", \"Arial\", sans-serif";
+    readonly fontSize: {
+        readonly xs: 12;
+        readonly sm: 14;
+        readonly md: 16;
+        readonly lg: 18;
+        readonly xl: 20;
+        readonly xxl: 24;
+    };
+    readonly fontWeight: {
+        readonly regular: 400;
+        readonly medium: 500;
+        readonly semibold: 600;
+        readonly bold: 700;
+    };
+    readonly lineHeight: {
+        readonly tight: 1.2;
+        readonly normal: 1.5;
+        readonly relaxed: 1.7;
+    };
+};

package/dist/types/theme/theme.d.ts

@@ -0,0 +1,33 @@
+import { type Theme } from "@mui/material/styles";
+declare module "@mui/material/styles" {
+    interface Theme {
+        visio: {
+            surfaceVariant: string;
+            onSurfaceVariant: string;
+            inverseSurface: string;
+            inverseOnSurface: string;
+            inversePrimary: string;
+            outline: string;
+            tertiary: {
+                main: string;
+                contrastText: string;
+                container: string;
+                onContainer: string;
+            };
+        };
+    }
+    interface ThemeOptions {
+        visio?: Theme["visio"];
+    }
+}
+export declare const lightTheme: Theme;
+export declare const darkTheme: Theme;
+export declare const spacingScale: {
+    readonly xxs: 2;
+    readonly xs: 4;
+    readonly sm: 8;
+    readonly md: 12;
+    readonly lg: 16;
+    readonly xl: 24;
+    readonly xxl: 32;
+};

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@visio-io/design-system",
+  "version": "1.0.0",
+  "description": "Visio Design System",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.es.js",
+  "types": "dist/types/index.d.ts",
+  "style": "dist/style.css",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs.js",
+      "default": "./dist/index.es.js"
+    },
+    "./style.css": "./dist/style.css",
+    "./tokens": "./src/styles/tokens/index.ts"
+  },
+  "files": [
+    "dist",
+    "src/styles/tokens"
+  ],
+  "sideEffects": [
+    "**/*.scss",
+    "**/*.css"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/visio-io/visio-design-system.git"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.0.0",
+    "@mui/material": "^5.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.27.1",
+    "@storybook/addon-a11y": "^8.4.0",
+    "@storybook/addon-essentials": "^8.4.0",
+    "@storybook/react": "^8.4.0",
+    "@storybook/react-vite": "^8.4.0",
+    "storybook": "^8.4.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "sass": "^1.77.0",
+    "typescript": "^5.6.0",
+    "vite": "^5.4.0"
+  },
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "build": "vite build && tsc -p tsconfig.build.json",
+    "type-check": "tsc --noEmit",
+    "version": "changeset version",
+    "release": "pnpm build && changeset publish"
+  }
+}

package/src/styles/tokens/colors.scss

@@ -0,0 +1,53 @@
+$visio-light-colors: (
+  primary: #006399,
+  on-primary: #ffffff,
+  primary-container: #cfe5ff,
+  on-primary-container: #001d33,
+  secondary: #526070,
+  on-secondary: #ffffff,
+  secondary-container: #d5e4f7,
+  on-secondary-container: #0f1d2a,
+  tertiary: #68587a,
+  on-tertiary: #ffffff,
+  tertiary-container: #eedcff,
+  on-tertiary-container: #231533,
+  error: #ba1a1a,
+  on-error: #ffffff,
+  error-container: #ffdad6,
+  on-error-container: #410002,
+  surface: #fdfcff,
+  on-surface: #1a1c1e,
+  surface-variant: #dee3eb,
+  on-surface-variant: #42474e,
+  outline: #72787e,
+  inverse-surface: #2f3033,
+  inverse-on-surface: #f1f0f4,
+  inverse-primary: #98cbff,
+);
+
+$visio-dark-colors: (
+  primary: #98cbff,
+  on-primary: #003354,
+  primary-container: #004a78,
+  on-primary-container: #cfe5ff,
+  secondary: #b9c8da,
+  on-secondary: #233241,
+  secondary-container: #3a4a58,
+  on-secondary-container: #d5e4f7,
+  tertiary: #d3bee5,
+  on-tertiary: #382a4a,
+  tertiary-container: #4f4062,
+  on-tertiary-container: #eedcff,
+  error: #ffb4ab,
+  on-error: #690005,
+  error-container: #93000a,
+  on-error-container: #ffdad6,
+  surface: #1a1c1e,
+  on-surface: #e2e2e6,
+  surface-variant: #42474e,
+  on-surface-variant: #c2c7cf,
+  outline: #8c9198,
+  inverse-surface: #e2e2e6,
+  inverse-on-surface: #2f3033,
+  inverse-primary: #006399,
+);

package/src/styles/tokens/colors.ts

@@ -0,0 +1,53 @@
+export const lightColors = {
+  primary: "#006399",
+  onPrimary: "#ffffff",
+  primaryContainer: "#cfe5ff",
+  onPrimaryContainer: "#001d33",
+  secondary: "#526070",
+  onSecondary: "#ffffff",
+  secondaryContainer: "#d5e4f7",
+  onSecondaryContainer: "#0f1d2a",
+  tertiary: "#68587a",
+  onTertiary: "#ffffff",
+  tertiaryContainer: "#eedcff",
+  onTertiaryContainer: "#231533",
+  error: "#ba1a1a",
+  onError: "#ffffff",
+  errorContainer: "#ffdad6",
+  onErrorContainer: "#410002",
+  surface: "#fdfcff",
+  onSurface: "#1a1c1e",
+  surfaceVariant: "#dee3eb",
+  onSurfaceVariant: "#42474e",
+  outline: "#72787e",
+  inverseSurface: "#2f3033",
+  inverseOnSurface: "#f1f0f4",
+  inversePrimary: "#98cbff",
+} as const;
+
+export const darkColors = {
+  primary: "#98cbff",
+  onPrimary: "#003354",
+  primaryContainer: "#004a78",
+  onPrimaryContainer: "#cfe5ff",
+  secondary: "#b9c8da",
+  onSecondary: "#233241",
+  secondaryContainer: "#3a4a58",
+  onSecondaryContainer: "#d5e4f7",
+  tertiary: "#d3bee5",
+  onTertiary: "#382a4a",
+  tertiaryContainer: "#4f4062",
+  onTertiaryContainer: "#eedcff",
+  error: "#ffb4ab",
+  onError: "#690005",
+  errorContainer: "#93000a",
+  onErrorContainer: "#ffdad6",
+  surface: "#1a1c1e",
+  onSurface: "#e2e2e6",
+  surfaceVariant: "#42474e",
+  onSurfaceVariant: "#c2c7cf",
+  outline: "#8c9198",
+  inverseSurface: "#e2e2e6",
+  inverseOnSurface: "#2f3033",
+  inversePrimary: "#006399",
+} as const;

package/src/styles/tokens/index.ts

@@ -0,0 +1,4 @@
+export { lightColors, darkColors } from "./colors";
+export { typographyTokens } from "./typography";
+export { spacingTokens } from "./spacing";
+export { radiiTokens } from "./radii";

package/src/styles/tokens/radii.ts

@@ -0,0 +1,7 @@
+export const radiiTokens = {
+  sm: 4,
+  md: 8,
+  lg: 12,
+  xl: 16,
+  pill: 999,
+} as const;

package/src/styles/tokens/spacing.ts

@@ -0,0 +1,9 @@
+export const spacingTokens = {
+  xxs: 2,
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 24,
+  xxl: 32,
+} as const;

package/src/styles/tokens/typography.ts

@@ -0,0 +1,22 @@
+export const typographyTokens = {
+  fontFamily: '"Inter", "Helvetica", "Arial", sans-serif',
+  fontSize: {
+    xs: 12,
+    sm: 14,
+    md: 16,
+    lg: 18,
+    xl: 20,
+    xxl: 24,
+  },
+  fontWeight: {
+    regular: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+  },
+  lineHeight: {
+    tight: 1.2,
+    normal: 1.5,
+    relaxed: 1.7,
+  },
+} as const;