@flanksource/clicky-ui 0.1.0

package/dist/tailwind-preset.mjs

@@ -0,0 +1,64 @@
+//#region src/tailwind-preset.ts
+const preset = {
+	darkMode: ["selector", "[data-theme=\"dark\"]"],
+	theme: { extend: {
+		colors: {
+			border: "hsl(var(--border))",
+			input: "hsl(var(--input))",
+			ring: "hsl(var(--ring))",
+			background: "hsl(var(--background))",
+			foreground: "hsl(var(--foreground))",
+			primary: {
+				DEFAULT: "hsl(var(--primary))",
+				foreground: "hsl(var(--primary-foreground))"
+			},
+			secondary: {
+				DEFAULT: "hsl(var(--secondary))",
+				foreground: "hsl(var(--secondary-foreground))"
+			},
+			destructive: {
+				DEFAULT: "hsl(var(--destructive))",
+				foreground: "hsl(var(--destructive-foreground))"
+			},
+			muted: {
+				DEFAULT: "hsl(var(--muted))",
+				foreground: "hsl(var(--muted-foreground))"
+			},
+			accent: {
+				DEFAULT: "hsl(var(--accent))",
+				foreground: "hsl(var(--accent-foreground))"
+			},
+			popover: {
+				DEFAULT: "hsl(var(--popover))",
+				foreground: "hsl(var(--popover-foreground))"
+			},
+			card: {
+				DEFAULT: "hsl(var(--card))",
+				foreground: "hsl(var(--card-foreground))"
+			}
+		},
+		borderRadius: {
+			lg: "var(--radius)",
+			md: "calc(var(--radius) - 2px)",
+			sm: "calc(var(--radius) - 4px)"
+		},
+		spacing: {
+			"control-h": "var(--control-height)",
+			"control-px": "var(--control-padding-x)",
+			"density-1": "var(--spacing-unit)",
+			"density-2": "calc(var(--spacing-unit) * 2)",
+			"density-3": "calc(var(--spacing-unit) * 3)",
+			"density-4": "calc(var(--spacing-unit) * 4)"
+		},
+		fontSize: { "density-base": "var(--font-size-base)" }
+	} },
+	plugins: [({ addVariant }) => {
+		addVariant("density-compact", "[data-density=\"compact\"] &");
+		addVariant("density-comfortable", "[data-density=\"comfortable\"] &");
+		addVariant("density-spacious", "[data-density=\"spacious\"] &");
+	}]
+};
+
+//#endregion
+export { preset as default };
+//# sourceMappingURL=tailwind-preset.mjs.map

package/dist/tailwind-preset.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind-preset.mjs","names":[],"sources":["../src/tailwind-preset.ts"],"sourcesContent":["import type { Config } from \"tailwindcss\";\n\nconst preset: Partial<Config> = {\n  darkMode: [\"selector\", '[data-theme=\"dark\"]'],\n  theme: {\n    extend: {\n      colors: {\n        border: \"hsl(var(--border))\",\n        input: \"hsl(var(--input))\",\n        ring: \"hsl(var(--ring))\",\n        background: \"hsl(var(--background))\",\n        foreground: \"hsl(var(--foreground))\",\n        primary: {\n          DEFAULT: \"hsl(var(--primary))\",\n          foreground: \"hsl(var(--primary-foreground))\",\n        },\n        secondary: {\n          DEFAULT: \"hsl(var(--secondary))\",\n          foreground: \"hsl(var(--secondary-foreground))\",\n        },\n        destructive: {\n          DEFAULT: \"hsl(var(--destructive))\",\n          foreground: \"hsl(var(--destructive-foreground))\",\n        },\n        muted: {\n          DEFAULT: \"hsl(var(--muted))\",\n          foreground: \"hsl(var(--muted-foreground))\",\n        },\n        accent: {\n          DEFAULT: \"hsl(var(--accent))\",\n          foreground: \"hsl(var(--accent-foreground))\",\n        },\n        popover: {\n          DEFAULT: \"hsl(var(--popover))\",\n          foreground: \"hsl(var(--popover-foreground))\",\n        },\n        card: {\n          DEFAULT: \"hsl(var(--card))\",\n          foreground: \"hsl(var(--card-foreground))\",\n        },\n      },\n      borderRadius: {\n        lg: \"var(--radius)\",\n        md: \"calc(var(--radius) - 2px)\",\n        sm: \"calc(var(--radius) - 4px)\",\n      },\n      spacing: {\n        \"control-h\": \"var(--control-height)\",\n        \"control-px\": \"var(--control-padding-x)\",\n        \"density-1\": \"var(--spacing-unit)\",\n        \"density-2\": \"calc(var(--spacing-unit) * 2)\",\n        \"density-3\": \"calc(var(--spacing-unit) * 3)\",\n        \"density-4\": \"calc(var(--spacing-unit) * 4)\",\n      },\n      fontSize: {\n        \"density-base\": \"var(--font-size-base)\",\n      },\n    },\n  },\n  plugins: [\n    ({ addVariant }: { addVariant: (name: string, selector: string) => void }) => {\n      addVariant(\"density-compact\", '[data-density=\"compact\"] &');\n      addVariant(\"density-comfortable\", '[data-density=\"comfortable\"] &');\n      addVariant(\"density-spacious\", '[data-density=\"spacious\"] &');\n    },\n  ],\n};\n\nexport default preset;\n"],"mappings":";AAEA,MAAM,SAA0B;CAC9B,UAAU,CAAC,YAAY,wBAAsB;CAC7C,OAAO,EACL,QAAQ;EACN,QAAQ;GACN,QAAQ;GACR,OAAO;GACP,MAAM;GACN,YAAY;GACZ,YAAY;GACZ,SAAS;IACP,SAAS;IACT,YAAY;IACb;GACD,WAAW;IACT,SAAS;IACT,YAAY;IACb;GACD,aAAa;IACX,SAAS;IACT,YAAY;IACb;GACD,OAAO;IACL,SAAS;IACT,YAAY;IACb;GACD,QAAQ;IACN,SAAS;IACT,YAAY;IACb;GACD,SAAS;IACP,SAAS;IACT,YAAY;IACb;GACD,MAAM;IACJ,SAAS;IACT,YAAY;IACb;GACF;EACD,cAAc;GACZ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL;EACD,SAAS;GACP,aAAa;GACb,cAAc;GACd,aAAa;GACb,aAAa;GACb,aAAa;GACb,aAAa;GACd;EACD,UAAU,EACR,gBAAgB,yBACjB;EACF,EACF;CACD,SAAS,EACN,EAAE,iBAA2E;AAC5E,aAAW,mBAAmB,+BAA6B;AAC3D,aAAW,uBAAuB,mCAAiC;AACnE,aAAW,oBAAoB,gCAA8B;GAEhE;CACF"}

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@flanksource/clicky-ui",
+  "version": "0.1.0",
+  "description": "Flanksource Clicky UI — React component library built on shadcn/ui with light/dark and density theming.",
+  "homepage": "https://github.com/flanksource/clicky-ui#readme",
+  "bugs": "https://github.com/flanksource/clicky-ui/issues",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/flanksource/clicky-ui.git",
+    "directory": "packages/ui"
+  },
+  "files": [
+    "dist",
+    "src/styles",
+    "README.md",
+    "LICENSE"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    },
+    "./styles.css": "./src/styles/tokens.css",
+    "./tailwind-preset": {
+      "types": "./dist/tailwind-preset.d.mts",
+      "import": "./dist/tailwind-preset.mjs",
+      "require": "./dist/tailwind-preset.cjs",
+      "default": "./dist/tailwind-preset.mjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vp dev",
+    "build": "vp pack src/index.ts src/tailwind-preset.ts --sourcemap --no-minify && vp pack src/tailwind-preset.ts -f cjs --no-clean --sourcemap --no-minify",
+    "test": "vp test",
+    "check": "vp check"
+  },
+  "dependencies": {
+    "@radix-ui/react-slot": "catalog:",
+    "class-variance-authority": "catalog:",
+    "clsx": "catalog:",
+    "lucide-react": "catalog:",
+    "tailwind-merge": "catalog:"
+  },
+  "devDependencies": {
+    "@storybook/react": "catalog:",
+    "@storybook/react-vite": "catalog:",
+    "@storybook/test": "catalog:",
+    "@testing-library/jest-dom": "catalog:",
+    "@testing-library/react": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "jsdom": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "tailwindcss": "catalog:",
+    "typescript": "catalog:",
+    "vite": "catalog:",
+    "vite-plugin-dts": "catalog:",
+    "vite-plus": "catalog:",
+    "vitest": "catalog:"
+  },
+  "peerDependencies": {
+    "marked": "^15.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "tailwindcss": "^3.4.0"
+  },
+  "peerDependenciesMeta": {
+    "marked": {
+      "optional": true
+    }
+  }
+}

package/src/styles/tokens.css

@@ -0,0 +1,78 @@
+@layer clicky-tokens {
+  :root,
+  [data-theme="light"] {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
+    --radius: 0.5rem;
+  }
+
+  [data-theme="dark"] {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+  }
+
+  :root,
+  [data-density="comfortable"] {
+    --spacing-unit: 0.25rem;
+    --control-height: 2.25rem;
+    --control-padding-x: 0.75rem;
+    --font-size-base: 0.875rem;
+  }
+
+  [data-density="compact"] {
+    --spacing-unit: 0.1875rem;
+    --control-height: 1.875rem;
+    --control-padding-x: 0.5rem;
+    --font-size-base: 0.8125rem;
+  }
+
+  [data-density="spacious"] {
+    --spacing-unit: 0.3125rem;
+    --control-height: 2.75rem;
+    --control-padding-x: 1rem;
+    --font-size-base: 1rem;
+  }
+
+  * {
+    border-color: hsl(var(--border));
+  }
+
+  body {
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+  }
+}