@indusaction/cms-design-system 0.1.0

package/README.md

@@ -0,0 +1,25 @@
+# @indusaction/cms-design-system
+
+Shared UI components for IndusAction CMS applications. Built on [Ant Design](https://ant.design/).
+
+This package lives in the `cms-design-system` monorepo under `packages/ui`. Companion package: [`@indusaction/cms-auth`](../auth).
+
+## Install
+
+```bash
+npm install @indusaction/cms-design-system antd react react-dom
+```
+
+## Usage
+
+```tsx
+import { Button, ThemeProvider, colors } from "@indusaction/cms-design-system";
+
+export function Example() {
+  return (
+    <ThemeProvider>
+      <Button variant="primary">Save</Button>
+    </ThemeProvider>
+  );
+}
+```

package/dist/index.cjs

@@ -0,0 +1,76 @@
+'use strict';
+
+var React = require('react');
+var antd = require('antd');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+// src/components/Button/Button.tsx
+var Button = React__default.default.forwardRef(
+  function Button2({ variant = "default", size = "middle", children, ...rest }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(antd.Button, { ref, type: variant, size, ...rest, children });
+  }
+);
+Button.displayName = "Button";
+
+// src/theme/colors.ts
+var colors = {
+  brand: {
+    primary: "#596993",
+    primaryHover: "#6B7BA5",
+    primaryActive: "#4A587C",
+    primaryLight: "#E8EBF2"
+  },
+  neutral: {
+    white: "#FFFFFF",
+    black: "#000000",
+    gray50: "#FAFAFA",
+    gray100: "#F5F5F5",
+    gray200: "#E8E8E8",
+    gray300: "#D9D9D9",
+    gray400: "#BFBFBF",
+    gray500: "#8C8C8C",
+    gray600: "#595959",
+    gray700: "#434343",
+    gray800: "#262626",
+    gray900: "#1F1F1F"
+  },
+  semantic: {
+    success: "#52C41A",
+    warning: "#FAAD14",
+    error: "#FF4D4F",
+    info: "#596993"
+  }
+};
+
+// src/theme/theme.ts
+var theme = {
+  token: {
+    colorPrimary: colors.brand.primary,
+    colorInfo: colors.semantic.info,
+    colorSuccess: colors.semantic.success,
+    colorWarning: colors.semantic.warning,
+    colorError: colors.semantic.error,
+    colorLink: colors.brand.primary
+  },
+  components: {
+    Button: {
+      colorPrimary: colors.brand.primary,
+      colorPrimaryHover: colors.brand.primaryHover,
+      colorPrimaryActive: colors.brand.primaryActive
+    }
+  }
+};
+function ThemeProvider({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(antd.ConfigProvider, { theme, children });
+}
+
+exports.Button = Button;
+exports.ThemeProvider = ThemeProvider;
+exports.colors = colors;
+exports.theme = theme;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Button/Button.tsx","../src/theme/colors.ts","../src/theme/theme.ts","../src/theme/ThemeProvider.tsx"],"names":["React","Button","jsx","AntButton","ConfigProvider"],"mappings":";;;;;;;;;;;AAcO,IAAM,SAASA,sBAAA,CAAM,UAAA;AAAA,EAC1B,SAASC,OAAAA,CACP,EAAE,OAAA,GAAU,SAAA,EAAW,IAAA,GAAO,QAAA,EAAU,QAAA,EAAU,GAAG,IAAA,EAAK,EAC1D,GAAA,EACA;AACA,IAAA,uBACEC,cAAA,CAACC,eAAU,GAAA,EAAU,IAAA,EAAM,SAAS,IAAA,EAAa,GAAG,MACjD,QAAA,EACH,CAAA;AAAA,EAEJ;AACF;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA;;;AC3Bd,IAAM,MAAA,GAAS;AAAA,EACpB,KAAA,EAAO;AAAA,IACL,OAAA,EAAS,SAAA;AAAA,IACT,YAAA,EAAc,SAAA;AAAA,IACd,aAAA,EAAe,SAAA;AAAA,IACf,YAAA,EAAc;AAAA,GAChB;AAAA,EACA,OAAA,EAAS;AAAA,IACP,KAAA,EAAO,SAAA;AAAA,IACP,KAAA,EAAO,SAAA;AAAA,IACP,MAAA,EAAQ,SAAA;AAAA,IACR,OAAA,EAAS,SAAA;AAAA,IACT,OAAA,EAAS,SAAA;AAAA,IACT,OAAA,EAAS,SAAA;AAAA,IACT,OAAA,EAAS,SAAA;AAAA,IACT,OAAA,EAAS,SAAA;AAAA,IACT,OAAA,EAAS,SAAA;AAAA,IACT,OAAA,EAAS,SAAA;AAAA,IACT,OAAA,EAAS,SAAA;AAAA,IACT,OAAA,EAAS;AAAA,GACX;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAA,EAAS,SAAA;AAAA,IACT,OAAA,EAAS,SAAA;AAAA,IACT,KAAA,EAAO,SAAA;AAAA,IACP,IAAA,EAAM;AAAA;AAEV;;;ACxBO,IAAM,KAAA,GAAqB;AAAA,EAChC,KAAA,EAAO;AAAA,IACL,YAAA,EAAc,OAAO,KAAA,CAAM,OAAA;AAAA,IAC3B,SAAA,EAAW,OAAO,QAAA,CAAS,IAAA;AAAA,IAC3B,YAAA,EAAc,OAAO,QAAA,CAAS,OAAA;AAAA,IAC9B,YAAA,EAAc,OAAO,QAAA,CAAS,OAAA;AAAA,IAC9B,UAAA,EAAY,OAAO,QAAA,CAAS,KAAA;AAAA,IAC5B,SAAA,EAAW,OAAO,KAAA,CAAM;AAAA,GAC1B;AAAA,EACA,UAAA,EAAY;AAAA,IACV,MAAA,EAAQ;AAAA,MACN,YAAA,EAAc,OAAO,KAAA,CAAM,OAAA;AAAA,MAC3B,iBAAA,EAAmB,OAAO,KAAA,CAAM,YAAA;AAAA,MAChC,kBAAA,EAAoB,OAAO,KAAA,CAAM;AAAA;AACnC;AAEJ;ACXO,SAAS,aAAA,CAAc,EAAE,QAAA,EAAS,EAAuB;AAC9D,EAAA,uBAAOD,cAAAA,CAACE,mBAAA,EAAA,EAAe,KAAA,EAAe,QAAA,EAAS,CAAA;AACjD","file":"index.cjs","sourcesContent":["import React from \"react\";\nimport { Button as AntButton } from \"antd\";\nimport type { ButtonProps as AntButtonProps } from \"antd\";\n\nexport type ButtonVariant = \"primary\" | \"default\" | \"dashed\" | \"link\" | \"text\";\nexport type ButtonSize = \"large\" | \"middle\" | \"small\";\n\nexport interface ButtonProps\n  extends Omit<AntButtonProps, \"type\" | \"variant\" | \"size\" | \"children\"> {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  children?: React.ReactNode;\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  function Button(\n    { variant = \"default\", size = \"middle\", children, ...rest },\n    ref\n  ) {\n    return (\n      <AntButton ref={ref} type={variant} size={size} {...rest}>\n        {children}\n      </AntButton>\n    );\n  }\n);\n\nButton.displayName = \"Button\";\n\nexport default Button;\n","export const colors = {\n  brand: {\n    primary: \"#596993\",\n    primaryHover: \"#6B7BA5\",\n    primaryActive: \"#4A587C\",\n    primaryLight: \"#E8EBF2\",\n  },\n  neutral: {\n    white: \"#FFFFFF\",\n    black: \"#000000\",\n    gray50: \"#FAFAFA\",\n    gray100: \"#F5F5F5\",\n    gray200: \"#E8E8E8\",\n    gray300: \"#D9D9D9\",\n    gray400: \"#BFBFBF\",\n    gray500: \"#8C8C8C\",\n    gray600: \"#595959\",\n    gray700: \"#434343\",\n    gray800: \"#262626\",\n    gray900: \"#1F1F1F\",\n  },\n  semantic: {\n    success: \"#52C41A\",\n    warning: \"#FAAD14\",\n    error: \"#FF4D4F\",\n    info: \"#596993\",\n  },\n} as const;\n\nexport type Colors = typeof colors;\n","import type { ThemeConfig } from \"antd\";\nimport { colors } from \"./colors\";\n\nexport const theme: ThemeConfig = {\n  token: {\n    colorPrimary: colors.brand.primary,\n    colorInfo: colors.semantic.info,\n    colorSuccess: colors.semantic.success,\n    colorWarning: colors.semantic.warning,\n    colorError: colors.semantic.error,\n    colorLink: colors.brand.primary,\n  },\n  components: {\n    Button: {\n      colorPrimary: colors.brand.primary,\n      colorPrimaryHover: colors.brand.primaryHover,\n      colorPrimaryActive: colors.brand.primaryActive,\n    },\n  },\n};\n","import React from \"react\";\nimport { ConfigProvider } from \"antd\";\nimport { theme } from \"./theme\";\n\nexport interface ThemeProviderProps {\n  children: React.ReactNode;\n}\n\nexport function ThemeProvider({ children }: ThemeProviderProps) {\n  return <ConfigProvider theme={theme}>{children}</ConfigProvider>;\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,50 @@
+import React from 'react';
+import { ButtonProps as ButtonProps$1, ThemeConfig } from 'antd';
+
+type ButtonVariant = "primary" | "default" | "dashed" | "link" | "text";
+type ButtonSize = "large" | "middle" | "small";
+interface ButtonProps extends Omit<ButtonProps$1, "type" | "variant" | "size" | "children"> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    children?: React.ReactNode;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+declare const colors: {
+    readonly brand: {
+        readonly primary: "#596993";
+        readonly primaryHover: "#6B7BA5";
+        readonly primaryActive: "#4A587C";
+        readonly primaryLight: "#E8EBF2";
+    };
+    readonly neutral: {
+        readonly white: "#FFFFFF";
+        readonly black: "#000000";
+        readonly gray50: "#FAFAFA";
+        readonly gray100: "#F5F5F5";
+        readonly gray200: "#E8E8E8";
+        readonly gray300: "#D9D9D9";
+        readonly gray400: "#BFBFBF";
+        readonly gray500: "#8C8C8C";
+        readonly gray600: "#595959";
+        readonly gray700: "#434343";
+        readonly gray800: "#262626";
+        readonly gray900: "#1F1F1F";
+    };
+    readonly semantic: {
+        readonly success: "#52C41A";
+        readonly warning: "#FAAD14";
+        readonly error: "#FF4D4F";
+        readonly info: "#596993";
+    };
+};
+type Colors = typeof colors;
+
+declare const theme: ThemeConfig;
+
+interface ThemeProviderProps {
+    children: React.ReactNode;
+}
+declare function ThemeProvider({ children }: ThemeProviderProps): React.JSX.Element;
+
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, type Colors, ThemeProvider, type ThemeProviderProps, colors, theme };

package/dist/index.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+import { ButtonProps as ButtonProps$1, ThemeConfig } from 'antd';
+
+type ButtonVariant = "primary" | "default" | "dashed" | "link" | "text";
+type ButtonSize = "large" | "middle" | "small";
+interface ButtonProps extends Omit<ButtonProps$1, "type" | "variant" | "size" | "children"> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    children?: React.ReactNode;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+declare const colors: {
+    readonly brand: {
+        readonly primary: "#596993";
+        readonly primaryHover: "#6B7BA5";
+        readonly primaryActive: "#4A587C";
+        readonly primaryLight: "#E8EBF2";
+    };
+    readonly neutral: {
+        readonly white: "#FFFFFF";
+        readonly black: "#000000";
+        readonly gray50: "#FAFAFA";
+        readonly gray100: "#F5F5F5";
+        readonly gray200: "#E8E8E8";
+        readonly gray300: "#D9D9D9";
+        readonly gray400: "#BFBFBF";
+        readonly gray500: "#8C8C8C";
+        readonly gray600: "#595959";
+        readonly gray700: "#434343";
+        readonly gray800: "#262626";
+        readonly gray900: "#1F1F1F";
+    };
+    readonly semantic: {
+        readonly success: "#52C41A";
+        readonly warning: "#FAAD14";
+        readonly error: "#FF4D4F";
+        readonly info: "#596993";
+    };
+};
+type Colors = typeof colors;
+
+declare const theme: ThemeConfig;
+
+interface ThemeProviderProps {
+    children: React.ReactNode;
+}
+declare function ThemeProvider({ children }: ThemeProviderProps): React.JSX.Element;
+
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, type Colors, ThemeProvider, type ThemeProviderProps, colors, theme };

package/dist/index.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Button as Button$1, ConfigProvider } from 'antd';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/Button/Button.tsx
+var Button = React.forwardRef(
+  function Button2({ variant = "default", size = "middle", children, ...rest }, ref) {
+    return /* @__PURE__ */ jsx(Button$1, { ref, type: variant, size, ...rest, children });
+  }
+);
+Button.displayName = "Button";
+
+// src/theme/colors.ts
+var colors = {
+  brand: {
+    primary: "#596993",
+    primaryHover: "#6B7BA5",
+    primaryActive: "#4A587C",
+    primaryLight: "#E8EBF2"
+  },
+  neutral: {
+    white: "#FFFFFF",
+    black: "#000000",
+    gray50: "#FAFAFA",
+    gray100: "#F5F5F5",
+    gray200: "#E8E8E8",
+    gray300: "#D9D9D9",
+    gray400: "#BFBFBF",
+    gray500: "#8C8C8C",
+    gray600: "#595959",
+    gray700: "#434343",
+    gray800: "#262626",
+    gray900: "#1F1F1F"
+  },
+  semantic: {
+    success: "#52C41A",
+    warning: "#FAAD14",
+    error: "#FF4D4F",
+    info: "#596993"
+  }
+};
+
+// src/theme/theme.ts
+var theme = {
+  token: {
+    colorPrimary: colors.brand.primary,
+    colorInfo: colors.semantic.info,
+    colorSuccess: colors.semantic.success,
+    colorWarning: colors.semantic.warning,
+    colorError: colors.semantic.error,
+    colorLink: colors.brand.primary
+  },
+  components: {
+    Button: {
+      colorPrimary: colors.brand.primary,
+      colorPrimaryHover: colors.brand.primaryHover,
+      colorPrimaryActive: colors.brand.primaryActive
+    }
+  }
+};
+function ThemeProvider({ children }) {
+  return /* @__PURE__ */ jsx(ConfigProvider, { theme, children });
+}
+
+export { Button, ThemeProvider, colors, theme };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Button/Button.tsx","../src/theme/colors.ts","../src/theme/theme.ts","../src/theme/ThemeProvider.tsx"],"names":["Button","AntButton","jsx"],"mappings":";;;;;AAcO,IAAM,SAAS,KAAA,CAAM,UAAA;AAAA,EAC1B,SAASA,OAAAA,CACP,EAAE,OAAA,GAAU,SAAA,EAAW,IAAA,GAAO,QAAA,EAAU,QAAA,EAAU,GAAG,IAAA,EAAK,EAC1D,GAAA,EACA;AACA,IAAA,uBACE,GAAA,CAACC,YAAU,GAAA,EAAU,IAAA,EAAM,SAAS,IAAA,EAAa,GAAG,MACjD,QAAA,EACH,CAAA;AAAA,EAEJ;AACF;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA;;;AC3Bd,IAAM,MAAA,GAAS;AAAA,EACpB,KAAA,EAAO;AAAA,IACL,OAAA,EAAS,SAAA;AAAA,IACT,YAAA,EAAc,SAAA;AAAA,IACd,aAAA,EAAe,SAAA;AAAA,IACf,YAAA,EAAc;AAAA,GAChB;AAAA,EACA,OAAA,EAAS;AAAA,IACP,KAAA,EAAO,SAAA;AAAA,IACP,KAAA,EAAO,SAAA;AAAA,IACP,MAAA,EAAQ,SAAA;AAAA,IACR,OAAA,EAAS,SAAA;AAAA,IACT,OAAA,EAAS,SAAA;AAAA,IACT,OAAA,EAAS,SAAA;AAAA,IACT,OAAA,EAAS,SAAA;AAAA,IACT,OAAA,EAAS,SAAA;AAAA,IACT,OAAA,EAAS,SAAA;AAAA,IACT,OAAA,EAAS,SAAA;AAAA,IACT,OAAA,EAAS,SAAA;AAAA,IACT,OAAA,EAAS;AAAA,GACX;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAA,EAAS,SAAA;AAAA,IACT,OAAA,EAAS,SAAA;AAAA,IACT,KAAA,EAAO,SAAA;AAAA,IACP,IAAA,EAAM;AAAA;AAEV;;;ACxBO,IAAM,KAAA,GAAqB;AAAA,EAChC,KAAA,EAAO;AAAA,IACL,YAAA,EAAc,OAAO,KAAA,CAAM,OAAA;AAAA,IAC3B,SAAA,EAAW,OAAO,QAAA,CAAS,IAAA;AAAA,IAC3B,YAAA,EAAc,OAAO,QAAA,CAAS,OAAA;AAAA,IAC9B,YAAA,EAAc,OAAO,QAAA,CAAS,OAAA;AAAA,IAC9B,UAAA,EAAY,OAAO,QAAA,CAAS,KAAA;AAAA,IAC5B,SAAA,EAAW,OAAO,KAAA,CAAM;AAAA,GAC1B;AAAA,EACA,UAAA,EAAY;AAAA,IACV,MAAA,EAAQ;AAAA,MACN,YAAA,EAAc,OAAO,KAAA,CAAM,OAAA;AAAA,MAC3B,iBAAA,EAAmB,OAAO,KAAA,CAAM,YAAA;AAAA,MAChC,kBAAA,EAAoB,OAAO,KAAA,CAAM;AAAA;AACnC;AAEJ;ACXO,SAAS,aAAA,CAAc,EAAE,QAAA,EAAS,EAAuB;AAC9D,EAAA,uBAAOC,GAAAA,CAAC,cAAA,EAAA,EAAe,KAAA,EAAe,QAAA,EAAS,CAAA;AACjD","file":"index.js","sourcesContent":["import React from \"react\";\nimport { Button as AntButton } from \"antd\";\nimport type { ButtonProps as AntButtonProps } from \"antd\";\n\nexport type ButtonVariant = \"primary\" | \"default\" | \"dashed\" | \"link\" | \"text\";\nexport type ButtonSize = \"large\" | \"middle\" | \"small\";\n\nexport interface ButtonProps\n  extends Omit<AntButtonProps, \"type\" | \"variant\" | \"size\" | \"children\"> {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  children?: React.ReactNode;\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  function Button(\n    { variant = \"default\", size = \"middle\", children, ...rest },\n    ref\n  ) {\n    return (\n      <AntButton ref={ref} type={variant} size={size} {...rest}>\n        {children}\n      </AntButton>\n    );\n  }\n);\n\nButton.displayName = \"Button\";\n\nexport default Button;\n","export const colors = {\n  brand: {\n    primary: \"#596993\",\n    primaryHover: \"#6B7BA5\",\n    primaryActive: \"#4A587C\",\n    primaryLight: \"#E8EBF2\",\n  },\n  neutral: {\n    white: \"#FFFFFF\",\n    black: \"#000000\",\n    gray50: \"#FAFAFA\",\n    gray100: \"#F5F5F5\",\n    gray200: \"#E8E8E8\",\n    gray300: \"#D9D9D9\",\n    gray400: \"#BFBFBF\",\n    gray500: \"#8C8C8C\",\n    gray600: \"#595959\",\n    gray700: \"#434343\",\n    gray800: \"#262626\",\n    gray900: \"#1F1F1F\",\n  },\n  semantic: {\n    success: \"#52C41A\",\n    warning: \"#FAAD14\",\n    error: \"#FF4D4F\",\n    info: \"#596993\",\n  },\n} as const;\n\nexport type Colors = typeof colors;\n","import type { ThemeConfig } from \"antd\";\nimport { colors } from \"./colors\";\n\nexport const theme: ThemeConfig = {\n  token: {\n    colorPrimary: colors.brand.primary,\n    colorInfo: colors.semantic.info,\n    colorSuccess: colors.semantic.success,\n    colorWarning: colors.semantic.warning,\n    colorError: colors.semantic.error,\n    colorLink: colors.brand.primary,\n  },\n  components: {\n    Button: {\n      colorPrimary: colors.brand.primary,\n      colorPrimaryHover: colors.brand.primaryHover,\n      colorPrimaryActive: colors.brand.primaryActive,\n    },\n  },\n};\n","import React from \"react\";\nimport { ConfigProvider } from \"antd\";\nimport { theme } from \"./theme\";\n\nexport interface ThemeProviderProps {\n  children: React.ReactNode;\n}\n\nexport function ThemeProvider({ children }: ThemeProviderProps) {\n  return <ConfigProvider theme={theme}>{children}</ConfigProvider>;\n}\n"]}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@indusaction/cms-design-system",
+  "version": "0.1.0",
+  "description": "Shared UI components for IndusAction CMS applications, built on Ant Design",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Indus-Action-Initiatives/cms-ui-core.git",
+    "directory": "packages/ui"
+  },
+  "homepage": "https://github.com/Indus-Action-Initiatives/cms-ui-core/tree/main/packages/ui",
+  "bugs": {
+    "url": "https://github.com/Indus-Action-Initiatives/cms-ui-core/issues"
+  },
+  "scripts": {
+    "build": "tsup",
+    "watch": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "antd": "^5.0.0",
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "devDependencies": {
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}