@drdex0101/water-design-system 1.0.1

package/README.md

@@ -0,0 +1,52 @@
+# Water Design System
+
+A modern React component library built with TypeScript and Vite.
+
+## Features
+
+- 🚀 Built with Vite (Library Mode)
+- 📝 TypeScript support out of the box
+- 📦 Automatic publishing to npm via GitHub Actions
+- 🛠️ Modern React (React 19+)
+
+## Installation
+
+```bash
+npm install @jacky-water/water-design-system
+```
+
+## Usage
+
+```tsx
+import { Button } from '@jacky-water/water-design-system';
+
+const App = () => (
+  <Button label="Click Me" onClick={() => console.log('Hello!')} />
+);
+```
+
+## Development
+
+1. Install dependencies:
+   ```bash
+   npm install
+   ```
+
+2. Build the library:
+   ```bash
+   npm run build
+   ```
+
+## Publishing
+
+To publish a new version:
+
+1. Update the version in `package.json`.
+2. Push a new tag:
+   ```bash
+   git tag v1.0.0
+   git push origin v1.0.0
+   ```
+3. GitHub Actions will automatically build and publish to npm.
+
+**Note:** You must set up an `NPM_TOKEN` secret in your GitHub repository to enable automatic publishing.

package/dist/App.d.ts

@@ -0,0 +1,2 @@
+declare function App(): import("react/jsx-runtime").JSX.Element;
+export default App;

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    label: string;
+}
+export declare const Button: ({ label, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export * from './Button';

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components/Button';
+export * from './tokens';

package/dist/main.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/pages/ColorTokens.d.ts

@@ -0,0 +1,2 @@
+export declare const ColorTokens: () => import("react/jsx-runtime").JSX.Element;
+export default ColorTokens;

package/dist/pages/TypographyTokens.d.ts

@@ -0,0 +1,2 @@
+export declare const TypographyTokens: () => import("react/jsx-runtime").JSX.Element;
+export default TypographyTokens;

package/dist/tokens/colors.d.ts

@@ -0,0 +1,443 @@
+/**
+ * Water Design System - Primitive Color Tokens
+ *
+ * Extracted from Figma Water Design System
+ * Color palette following a consistent scale pattern.
+ * Lower numbers (50-100) are lighter, higher numbers (800-900) are darker.
+ *
+ * Usage Rules:
+ * - Defined in Variables
+ * - Do NOT use directly in UI designs - use Semantic Colors instead (e.g., text-success)
+ * - Do NOT directly use primitive colors like Green-600
+ * - Maintain consistency: If existing Primitive Colors cannot meet special visual needs,
+ *   system maintainers should evaluate before adding, do not define temporary color values
+ */
+export declare const red: {
+    readonly 50: "#fdecec";
+    readonly 100: "#fac5c5";
+    readonly 200: "#f8a9a9";
+    readonly 300: "#f48282";
+    readonly 400: "#f26969";
+    readonly 500: "#ef4444";
+    readonly 600: "#d93e3e";
+    readonly 700: "#aa3030";
+    readonly 800: "#832525";
+    readonly 900: "#641d1d";
+};
+export declare const orange: {
+    readonly 50: "#fdf1e6";
+    readonly 100: "#f8d4b0";
+    readonly 200: "#f4bf8a";
+    readonly 300: "#efa154";
+    readonly 400: "#ec8f33";
+    readonly 500: "#e77300";
+    readonly 600: "#d26900";
+    readonly 700: "#a45200";
+    readonly 800: "#7f3f00";
+    readonly 900: "#613000";
+};
+export declare const yellow: {
+    readonly 50: "#fef7e6";
+    readonly 100: "#fae7b0";
+    readonly 200: "#f8db8a";
+    readonly 300: "#f5cb54";
+    readonly 400: "#f3c133";
+    readonly 500: "#f0b100";
+    readonly 600: "#daa100";
+    readonly 700: "#aa7e00";
+    readonly 800: "#846100";
+    readonly 900: "#654a00";
+};
+export declare const green: {
+    readonly 50: "#e7f7ed";
+    readonly 100: "#b3e6c6";
+    readonly 200: "#8fd9aa";
+    readonly 300: "#5cc884";
+    readonly 400: "#3cbd6c";
+    readonly 500: "#0bad47";
+    readonly 600: "#0a9d41";
+    readonly 700: "#087b32";
+    readonly 800: "#065f27";
+    readonly 900: "#05491e";
+};
+export declare const cyan: {
+    readonly 50: "#e6fdfe";
+    readonly 100: "#b1f7fc";
+    readonly 200: "#8bf4fb";
+    readonly 300: "#55eef9";
+    readonly 400: "#35ebf8";
+    readonly 500: "#02e6f6";
+    readonly 600: "#02d1e0";
+    readonly 700: "#01a3af";
+    readonly 800: "#017f87";
+    readonly 900: "#016167";
+};
+export declare const teal: {
+    readonly 50: "#e6f8f6";
+    readonly 100: "#b0ebe4";
+    readonly 200: "#8ae1d7";
+    readonly 300: "#55d3c4";
+    readonly 400: "#34cab9";
+    readonly 500: "#01bda7";
+    readonly 600: "#01ac98";
+    readonly 700: "#018677";
+    readonly 800: "#01685c";
+    readonly 900: "#004f46";
+};
+export declare const brandblue: {
+    readonly 50: "#eaf5ff";
+    readonly 100: "#bee1ff";
+    readonly 200: "#9fd2ff";
+    readonly 300: "#73bdff";
+    readonly 400: "#58b1ff";
+    readonly 500: "#2e9dff";
+    readonly 600: "#2a8fe8";
+    readonly 700: "#216fb5";
+    readonly 800: "#19568c";
+    readonly 900: "#13426b";
+};
+export declare const slate: {
+    readonly 50: "#eff0f2";
+    readonly 100: "#cfd1d5";
+    readonly 200: "#b7bac1";
+    readonly 300: "#969ba5";
+    readonly 400: "#828894";
+    readonly 500: "#636a79";
+    readonly 600: "#5a606e";
+    readonly 700: "#464b56";
+    readonly 800: "#363a43";
+    readonly 900: "#2a2d33";
+};
+export declare const lightgrey: {
+    readonly 50: "#fcfdfd";
+    readonly 100: "#f7f8f9";
+    readonly 200: "#f3f4f6";
+    readonly 300: "#eeeff2";
+    readonly 400: "#eaecef";
+    readonly 500: "#e5e7eb";
+    readonly 600: "#d0d2d6";
+    readonly 700: "#a3a4a7";
+    readonly 800: "#7e7f81";
+    readonly 900: "#606163";
+};
+export declare const grey: {
+    readonly 50: "#f9fafb";
+    readonly 100: "#f3f4f6";
+    readonly 200: "#e5e7eb";
+    readonly 300: "#d1d5db";
+    readonly 400: "#9ca3af";
+    readonly 500: "#6b7280";
+    readonly 600: "#4b5563";
+    readonly 700: "#374151";
+    readonly 800: "#1f2937";
+    readonly 900: "#111827";
+};
+export declare const deepocean: {
+    readonly 50: "#e8f4f7";
+    readonly 100: "#c6e4eb";
+    readonly 200: "#a3d4df";
+    readonly 300: "#81c4d3";
+    readonly 400: "#5eb4c7";
+    readonly 500: "#3ca4bb";
+    readonly 600: "#358fa3";
+    readonly 700: "#2d7a8b";
+    readonly 800: "#256573";
+    readonly 900: "#1e505b";
+};
+export declare const white = "#ffffff";
+export declare const black = "#000000";
+export declare const primitiveColors: {
+    readonly red: {
+        readonly 50: "#fdecec";
+        readonly 100: "#fac5c5";
+        readonly 200: "#f8a9a9";
+        readonly 300: "#f48282";
+        readonly 400: "#f26969";
+        readonly 500: "#ef4444";
+        readonly 600: "#d93e3e";
+        readonly 700: "#aa3030";
+        readonly 800: "#832525";
+        readonly 900: "#641d1d";
+    };
+    readonly orange: {
+        readonly 50: "#fdf1e6";
+        readonly 100: "#f8d4b0";
+        readonly 200: "#f4bf8a";
+        readonly 300: "#efa154";
+        readonly 400: "#ec8f33";
+        readonly 500: "#e77300";
+        readonly 600: "#d26900";
+        readonly 700: "#a45200";
+        readonly 800: "#7f3f00";
+        readonly 900: "#613000";
+    };
+    readonly yellow: {
+        readonly 50: "#fef7e6";
+        readonly 100: "#fae7b0";
+        readonly 200: "#f8db8a";
+        readonly 300: "#f5cb54";
+        readonly 400: "#f3c133";
+        readonly 500: "#f0b100";
+        readonly 600: "#daa100";
+        readonly 700: "#aa7e00";
+        readonly 800: "#846100";
+        readonly 900: "#654a00";
+    };
+    readonly green: {
+        readonly 50: "#e7f7ed";
+        readonly 100: "#b3e6c6";
+        readonly 200: "#8fd9aa";
+        readonly 300: "#5cc884";
+        readonly 400: "#3cbd6c";
+        readonly 500: "#0bad47";
+        readonly 600: "#0a9d41";
+        readonly 700: "#087b32";
+        readonly 800: "#065f27";
+        readonly 900: "#05491e";
+    };
+    readonly cyan: {
+        readonly 50: "#e6fdfe";
+        readonly 100: "#b1f7fc";
+        readonly 200: "#8bf4fb";
+        readonly 300: "#55eef9";
+        readonly 400: "#35ebf8";
+        readonly 500: "#02e6f6";
+        readonly 600: "#02d1e0";
+        readonly 700: "#01a3af";
+        readonly 800: "#017f87";
+        readonly 900: "#016167";
+    };
+    readonly teal: {
+        readonly 50: "#e6f8f6";
+        readonly 100: "#b0ebe4";
+        readonly 200: "#8ae1d7";
+        readonly 300: "#55d3c4";
+        readonly 400: "#34cab9";
+        readonly 500: "#01bda7";
+        readonly 600: "#01ac98";
+        readonly 700: "#018677";
+        readonly 800: "#01685c";
+        readonly 900: "#004f46";
+    };
+    readonly brandblue: {
+        readonly 50: "#eaf5ff";
+        readonly 100: "#bee1ff";
+        readonly 200: "#9fd2ff";
+        readonly 300: "#73bdff";
+        readonly 400: "#58b1ff";
+        readonly 500: "#2e9dff";
+        readonly 600: "#2a8fe8";
+        readonly 700: "#216fb5";
+        readonly 800: "#19568c";
+        readonly 900: "#13426b";
+    };
+    readonly slate: {
+        readonly 50: "#eff0f2";
+        readonly 100: "#cfd1d5";
+        readonly 200: "#b7bac1";
+        readonly 300: "#969ba5";
+        readonly 400: "#828894";
+        readonly 500: "#636a79";
+        readonly 600: "#5a606e";
+        readonly 700: "#464b56";
+        readonly 800: "#363a43";
+        readonly 900: "#2a2d33";
+    };
+    readonly lightgrey: {
+        readonly 50: "#fcfdfd";
+        readonly 100: "#f7f8f9";
+        readonly 200: "#f3f4f6";
+        readonly 300: "#eeeff2";
+        readonly 400: "#eaecef";
+        readonly 500: "#e5e7eb";
+        readonly 600: "#d0d2d6";
+        readonly 700: "#a3a4a7";
+        readonly 800: "#7e7f81";
+        readonly 900: "#606163";
+    };
+    readonly grey: {
+        readonly 50: "#f9fafb";
+        readonly 100: "#f3f4f6";
+        readonly 200: "#e5e7eb";
+        readonly 300: "#d1d5db";
+        readonly 400: "#9ca3af";
+        readonly 500: "#6b7280";
+        readonly 600: "#4b5563";
+        readonly 700: "#374151";
+        readonly 800: "#1f2937";
+        readonly 900: "#111827";
+    };
+    readonly deepocean: {
+        readonly 50: "#e8f4f7";
+        readonly 100: "#c6e4eb";
+        readonly 200: "#a3d4df";
+        readonly 300: "#81c4d3";
+        readonly 400: "#5eb4c7";
+        readonly 500: "#3ca4bb";
+        readonly 600: "#358fa3";
+        readonly 700: "#2d7a8b";
+        readonly 800: "#256573";
+        readonly 900: "#1e505b";
+    };
+    readonly white: "#ffffff";
+    readonly black: "#000000";
+};
+export declare const primary: {
+    readonly 50: "#eaf5ff";
+    readonly 100: "#bee1ff";
+    readonly 200: "#9fd2ff";
+    readonly 300: "#73bdff";
+    readonly 400: "#58b1ff";
+    readonly 500: "#2e9dff";
+    readonly 600: "#2a8fe8";
+    readonly 700: "#216fb5";
+    readonly 800: "#19568c";
+    readonly 900: "#13426b";
+};
+export declare const neutral: {
+    readonly 50: "#eff0f2";
+    readonly 100: "#cfd1d5";
+    readonly 200: "#b7bac1";
+    readonly 300: "#969ba5";
+    readonly 400: "#828894";
+    readonly 500: "#636a79";
+    readonly 600: "#5a606e";
+    readonly 700: "#464b56";
+    readonly 800: "#363a43";
+    readonly 900: "#2a2d33";
+};
+export declare const success: {
+    readonly 50: "#e7f7ed";
+    readonly 100: "#b3e6c6";
+    readonly 200: "#8fd9aa";
+    readonly 300: "#5cc884";
+    readonly 400: "#3cbd6c";
+    readonly 500: "#0bad47";
+    readonly 600: "#0a9d41";
+    readonly 700: "#087b32";
+    readonly 800: "#065f27";
+    readonly 900: "#05491e";
+};
+export declare const warning: {
+    readonly 50: "#fef7e6";
+    readonly 100: "#fae7b0";
+    readonly 200: "#f8db8a";
+    readonly 300: "#f5cb54";
+    readonly 400: "#f3c133";
+    readonly 500: "#f0b100";
+    readonly 600: "#daa100";
+    readonly 700: "#aa7e00";
+    readonly 800: "#846100";
+    readonly 900: "#654a00";
+};
+export declare const error: {
+    readonly 50: "#fdecec";
+    readonly 100: "#fac5c5";
+    readonly 200: "#f8a9a9";
+    readonly 300: "#f48282";
+    readonly 400: "#f26969";
+    readonly 500: "#ef4444";
+    readonly 600: "#d93e3e";
+    readonly 700: "#aa3030";
+    readonly 800: "#832525";
+    readonly 900: "#641d1d";
+};
+export declare const info: {
+    readonly 50: "#e6fdfe";
+    readonly 100: "#b1f7fc";
+    readonly 200: "#8bf4fb";
+    readonly 300: "#55eef9";
+    readonly 400: "#35ebf8";
+    readonly 500: "#02e6f6";
+    readonly 600: "#02d1e0";
+    readonly 700: "#01a3af";
+    readonly 800: "#017f87";
+    readonly 900: "#016167";
+};
+export declare const colors: {
+    readonly primary: {
+        readonly 50: "#eaf5ff";
+        readonly 100: "#bee1ff";
+        readonly 200: "#9fd2ff";
+        readonly 300: "#73bdff";
+        readonly 400: "#58b1ff";
+        readonly 500: "#2e9dff";
+        readonly 600: "#2a8fe8";
+        readonly 700: "#216fb5";
+        readonly 800: "#19568c";
+        readonly 900: "#13426b";
+    };
+    readonly neutral: {
+        readonly 50: "#eff0f2";
+        readonly 100: "#cfd1d5";
+        readonly 200: "#b7bac1";
+        readonly 300: "#969ba5";
+        readonly 400: "#828894";
+        readonly 500: "#636a79";
+        readonly 600: "#5a606e";
+        readonly 700: "#464b56";
+        readonly 800: "#363a43";
+        readonly 900: "#2a2d33";
+    };
+    readonly success: {
+        readonly 50: "#e7f7ed";
+        readonly 100: "#b3e6c6";
+        readonly 200: "#8fd9aa";
+        readonly 300: "#5cc884";
+        readonly 400: "#3cbd6c";
+        readonly 500: "#0bad47";
+        readonly 600: "#0a9d41";
+        readonly 700: "#087b32";
+        readonly 800: "#065f27";
+        readonly 900: "#05491e";
+    };
+    readonly warning: {
+        readonly 50: "#fef7e6";
+        readonly 100: "#fae7b0";
+        readonly 200: "#f8db8a";
+        readonly 300: "#f5cb54";
+        readonly 400: "#f3c133";
+        readonly 500: "#f0b100";
+        readonly 600: "#daa100";
+        readonly 700: "#aa7e00";
+        readonly 800: "#846100";
+        readonly 900: "#654a00";
+    };
+    readonly error: {
+        readonly 50: "#fdecec";
+        readonly 100: "#fac5c5";
+        readonly 200: "#f8a9a9";
+        readonly 300: "#f48282";
+        readonly 400: "#f26969";
+        readonly 500: "#ef4444";
+        readonly 600: "#d93e3e";
+        readonly 700: "#aa3030";
+        readonly 800: "#832525";
+        readonly 900: "#641d1d";
+    };
+    readonly info: {
+        readonly 50: "#e6fdfe";
+        readonly 100: "#b1f7fc";
+        readonly 200: "#8bf4fb";
+        readonly 300: "#55eef9";
+        readonly 400: "#35ebf8";
+        readonly 500: "#02e6f6";
+        readonly 600: "#02d1e0";
+        readonly 700: "#01a3af";
+        readonly 800: "#017f87";
+        readonly 900: "#016167";
+    };
+};
+export type RedColor = keyof typeof red;
+export type OrangeColor = keyof typeof orange;
+export type YellowColor = keyof typeof yellow;
+export type GreenColor = keyof typeof green;
+export type CyanColor = keyof typeof cyan;
+export type TealColor = keyof typeof teal;
+export type BrandblueColor = keyof typeof brandblue;
+export type SlateColor = keyof typeof slate;
+export type LightgreyColor = keyof typeof lightgrey;
+export type GreyColor = keyof typeof grey;
+export type DeepoceanColor = keyof typeof deepocean;
+export type PrimitiveColors = typeof primitiveColors;
+export type ColorScale = typeof colors;

package/dist/tokens/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Water Design System - Design Tokens
+ *
+ * Centralized design tokens for consistent styling across components.
+ */
+export * from './colors';
+export * from './semantic';
+export * from './typography';