@ankit119/doubletick-components 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,271 @@
+import { JSX as JSX_2 } from '@emotion/react/jsx-runtime';
+import { ReactNode } from 'react';
+import { Theme } from '@mui/material';
+
+/** Semantic design tokens derived from primitives (Figma: Colour Tokens) */
+declare function createSemanticTokens(p: P): {
+    readonly text: {
+        readonly primary: string;
+        readonly secondary: string;
+        readonly tertiary: string;
+        readonly danger: string;
+        readonly success: string;
+        readonly warning: string;
+        readonly info: string;
+        readonly onDark: string;
+        readonly inverted: string;
+        readonly disabled: string;
+    };
+    readonly link: {
+        readonly default: string;
+        readonly hover: string;
+        readonly pressed: string;
+        readonly visited: string;
+    };
+    readonly icon: {
+        readonly primary: string;
+        readonly secondary: string;
+        readonly tertiary: string;
+        readonly danger: string;
+        readonly success: string;
+        readonly warning: string;
+        readonly info: string;
+        readonly onDark: string;
+        readonly inverted: string;
+        readonly disabled: string;
+    };
+    readonly border: {
+        readonly primary: string;
+        readonly secondary: string;
+        readonly tertiary: string;
+        readonly danger: string;
+        readonly success: string;
+        readonly warning: string;
+        readonly info: string;
+        readonly onDark: string;
+        readonly inverted: string;
+        readonly disabled: string;
+    };
+    readonly background: {
+        readonly primary: string;
+        readonly secondary: string;
+        readonly tertiary: string;
+        readonly overlay: "rgba(0,0,0,0.5)";
+        readonly disabled: string;
+        readonly field: string;
+        readonly canvas: string;
+        readonly card: "#ffffff";
+        readonly cardInverted: string;
+        readonly focus: string;
+        readonly hover: string;
+        readonly pressed: string;
+        readonly selected: string;
+        readonly selectedHover: string;
+        readonly selectedPressed: string;
+        readonly selectedFocussed: string;
+        readonly danger: string;
+        readonly dangerLight: string;
+        readonly success: string;
+        readonly successLight: string;
+        readonly warning: string;
+        readonly warningLight: string;
+        readonly info: string;
+        readonly infoLight: string;
+        readonly buttonPrimary: string;
+        readonly buttonPrimaryHover: string;
+        readonly buttonPrimaryPressed: string;
+        readonly buttonSecondary: string;
+        readonly buttonSecondaryHover: string;
+        readonly buttonSecondaryPressed: string;
+        readonly tag: string;
+        readonly tagHover: string;
+        readonly tagPressed: string;
+        readonly badge: string;
+        readonly badgeInverted: string;
+    };
+    readonly shadow: {
+        readonly sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
+        readonly md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+        readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
+    };
+};
+
+export declare function DTFilterButton(props: DTFilterButtonProps): JSX_2.Element;
+
+declare type DTFilterButtonBase = {
+    placeholder: string;
+    options: DTFilterOption[];
+    disabled?: boolean;
+};
+
+declare type DTFilterButtonMulti = DTFilterButtonBase & {
+    variant: 'multi';
+    value: string[];
+    onChange: (values: string[]) => void;
+    label?: string;
+    searchable?: boolean;
+    loading?: boolean;
+    noOptionsText?: string;
+    noSelectedOptionsText?: string;
+};
+
+export declare type DTFilterButtonProps = DTFilterButtonMulti | DTFilterButtonSingle;
+
+declare type DTFilterButtonSingle = DTFilterButtonBase & {
+    variant: 'single';
+    value: string | null;
+    onChange: (value: string | null) => void;
+    getDisplayValue?: (value: string | null) => ReactNode;
+    customOptionIds?: string[];
+    onCustomSelect?: (optionId: string) => void;
+    searchable?: boolean;
+};
+
+export declare type DTFilterOption = {
+    id: string;
+    name: string;
+};
+
+declare type P = typeof primitives;
+
+declare const primitives: {
+    readonly primary: PrimitiveScale;
+    readonly blue: PrimitiveScale;
+    readonly green: PrimitiveScale;
+    readonly red: PrimitiveScale;
+    readonly yellow: PrimitiveScale;
+    readonly purple: PrimitiveScale;
+    readonly orange: PrimitiveScale;
+    readonly teal: PrimitiveScale;
+};
+
+declare type PrimitiveScale = Record<Shade, string>;
+
+export declare type SemanticTokens = ReturnType<typeof createSemanticTokens>;
+
+declare type Shade = (typeof shadeKeys)[number];
+
+/**
+ * Design system primitive colour scales (50–950).
+ * Single source of truth for the DT design system; semantic tokens reference these.
+ */
+declare const shadeKeys: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+
+export declare const theme: Theme;
+
+export declare const tokens: {
+    readonly text: {
+        readonly primary: string;
+        readonly secondary: string;
+        readonly tertiary: string;
+        readonly danger: string;
+        readonly success: string;
+        readonly warning: string;
+        readonly info: string;
+        readonly onDark: string;
+        readonly inverted: string;
+        readonly disabled: string;
+    };
+    readonly link: {
+        readonly default: string;
+        readonly hover: string;
+        readonly pressed: string;
+        readonly visited: string;
+    };
+    readonly icon: {
+        readonly primary: string;
+        readonly secondary: string;
+        readonly tertiary: string;
+        readonly danger: string;
+        readonly success: string;
+        readonly warning: string;
+        readonly info: string;
+        readonly onDark: string;
+        readonly inverted: string;
+        readonly disabled: string;
+    };
+    readonly border: {
+        readonly primary: string;
+        readonly secondary: string;
+        readonly tertiary: string;
+        readonly danger: string;
+        readonly success: string;
+        readonly warning: string;
+        readonly info: string;
+        readonly onDark: string;
+        readonly inverted: string;
+        readonly disabled: string;
+    };
+    readonly background: {
+        readonly primary: string;
+        readonly secondary: string;
+        readonly tertiary: string;
+        readonly overlay: "rgba(0,0,0,0.5)";
+        readonly disabled: string;
+        readonly field: string;
+        readonly canvas: string;
+        readonly card: "#ffffff";
+        readonly cardInverted: string;
+        readonly focus: string;
+        readonly hover: string;
+        readonly pressed: string;
+        readonly selected: string;
+        readonly selectedHover: string;
+        readonly selectedPressed: string;
+        readonly selectedFocussed: string;
+        readonly danger: string;
+        readonly dangerLight: string;
+        readonly success: string;
+        readonly successLight: string;
+        readonly warning: string;
+        readonly warningLight: string;
+        readonly info: string;
+        readonly infoLight: string;
+        readonly buttonPrimary: string;
+        readonly buttonPrimaryHover: string;
+        readonly buttonPrimaryPressed: string;
+        readonly buttonSecondary: string;
+        readonly buttonSecondaryHover: string;
+        readonly buttonSecondaryPressed: string;
+        readonly tag: string;
+        readonly tagHover: string;
+        readonly tagPressed: string;
+        readonly badge: string;
+        readonly badgeInverted: string;
+    };
+    readonly shadow: {
+        readonly sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
+        readonly md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+        readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
+    };
+};
+
+export { }
+
+
+declare module '@mui/material/styles' {
+    interface Theme {
+        designTokens: typeof tokens;
+        custom: {
+            base_card_ui: {
+                borderRadius: string;
+                border: string;
+                background: string;
+                padding: string;
+                boxShadow: string;
+            };
+        };
+    }
+    interface ThemeOptions {
+        designTokens?: typeof tokens;
+        custom?: {
+            base_card_ui?: {
+                borderRadius?: string;
+                border?: string;
+                background?: string;
+                padding?: string;
+                boxShadow?: string;
+            };
+        };
+    }
+}

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@ankit119/doubletick-components",
+  "version": "0.0.1",
+  "description": "Reusable React components with MUI, consumable across repos",
+  "type": "module",
+  "main": "./dist/doubletick-components.umd.cjs",
+  "module": "./dist/doubletick-components.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/doubletick-components.js",
+      "require": "./dist/doubletick-components.umd.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "sync-figma": "node scripts/sync-figma-variables.mjs"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.0.0",
+    "@mui/icons-material": "^5.0.0 || ^6.0.0",
+    "@mui/material": "^5.0.0 || ^6.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^5.0.1",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^6.1.6",
+    "@mui/material": "^6.1.6",
+    "@storybook/addon-a11y": "^10.2.11",
+    "@storybook/addon-docs": "^10.2.11",
+    "@storybook/addon-onboarding": "^10.2.11",
+    "@storybook/addon-vitest": "^10.2.11",
+    "@storybook/react-vite": "^10.2.11",
+    "@types/node": "^22.13.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
+    "chromatic": "^15.2.0",
+    "playwright": "^1.58.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "storybook": "^10.2.11",
+    "typescript": "~5.6.3",
+    "vite": "^6.0.1",
+    "vite-plugin-dts": "^4.3.0",
+    "vite-plugin-lib-inject-css": "^2.2.2",
+    "vitest": "^4.0.18"
+  },
+  "dependencies": {
+    "@fontsource/inter": "^5.2.8"
+  }
+}