@jovertical/mise-design-system 0.0.0-stage → 1.0.0

package/dist/utils/tone.js

@@ -0,0 +1,119 @@
+export const TONES = [
+    'neutral',
+    'primary',
+    'info',
+    'success',
+    'warning',
+    'critical',
+];
+/**
+ * A 10% wash under ink of the same tone — a status, not an action.
+ *
+ * Neutral is a 7% foreground wash, not `--muted`. The canvas is `--muted`, so
+ * a neutral badge or chip in `bg-muted` vanished wherever it sat on the page
+ * rather than on a card; a foreground wash reads on the canvas, on a card and
+ * on a muted row, in both schemes, as Skeleton's always has. 7% rather than
+ * Skeleton's 10%: at 10% a neutral fill read a step darker than the old
+ * `bg-muted` on a white card, heavier than a status that claims nothing should.
+ * Every neutral fill outside this map (an avatar, a rank disc, a stepper's
+ * track) writes the same `bg-foreground/[0.07]`.
+ */
+export const TONE_SOFT_CLASS = {
+    neutral: 'bg-foreground/[0.07] text-muted-foreground',
+    primary: 'bg-primary-soft text-primary',
+    info: 'bg-info-soft text-info',
+    success: 'bg-success-soft text-success',
+    warning: 'bg-warning-soft text-warning',
+    critical: 'bg-destructive-soft text-destructive',
+};
+/**
+ * A full fill. Neutral is the ink colour inverted rather than a grey, so that
+ * "solid" always means the loudest thing in its row; a light grey fill is
+ * what `soft` is for.
+ *
+ * Each status writes in its own `-foreground` ink rather than white: white
+ * reads on the light scheme's 600 steps but all but vanishes on the dark
+ * scheme's bright 400s.
+ */
+export const TONE_SOLID_CLASS = {
+    neutral: 'bg-foreground text-background',
+    primary: 'bg-primary text-primary-foreground',
+    info: 'bg-info text-info-foreground',
+    success: 'bg-success text-success-foreground',
+    warning: 'bg-warning text-warning-foreground',
+    critical: 'bg-destructive text-destructive-foreground',
+};
+export const TONE_OUTLINE_CLASS = {
+    neutral: 'border-border text-foreground',
+    primary: 'border-primary/50 text-primary',
+    info: 'border-info/50 text-info',
+    success: 'border-success/50 text-success',
+    warning: 'border-warning/50 text-warning',
+    critical: 'border-destructive/50 text-destructive',
+};
+/** Ink alone, for a ghost or a link. Neutral inherits the surrounding text. */
+export const TONE_TEXT_CLASS = {
+    neutral: '',
+    primary: 'text-primary',
+    info: 'text-info',
+    success: 'text-success',
+    warning: 'text-warning',
+    critical: 'text-destructive',
+};
+/** The wash an interactive element takes on hover and while its menu is open. */
+export const TONE_HOVER_CLASS = {
+    neutral: 'hover:bg-muted data-[state=open]:bg-muted',
+    primary: 'hover:bg-primary-soft data-[state=open]:bg-primary-soft',
+    info: 'hover:bg-info-soft data-[state=open]:bg-info-soft',
+    success: 'hover:bg-success-soft data-[state=open]:bg-success-soft',
+    warning: 'hover:bg-warning-soft data-[state=open]:bg-warning-soft',
+    critical: 'hover:bg-destructive-soft data-[state=open]:bg-destructive-soft',
+};
+/**
+ * The fill of a mark — a bar, a ring, a dot, a sparkline. Neutral is the
+ * muted ink rather than the brand, so an unremarkable bar reads as a quantity
+ * and not as a claim; `primary` is there for the bar that should.
+ */
+export const TONE_FILL_CLASS = {
+    neutral: 'bg-muted-foreground',
+    primary: 'bg-primary',
+    info: 'bg-info',
+    success: 'bg-success',
+    warning: 'bg-warning',
+    critical: 'bg-destructive',
+};
+/** The same fill as a stroke, for a ring. */
+export const TONE_STROKE_CLASS = {
+    neutral: 'stroke-muted-foreground',
+    primary: 'stroke-primary',
+    info: 'stroke-info',
+    success: 'stroke-success',
+    warning: 'stroke-warning',
+    critical: 'stroke-destructive',
+};
+/**
+ * The fill of `Progress`'s indicator, set from the outside. `Progress` is
+ * shadcn's and paints its own `bg-primary`; the `data-slot` selector beats it.
+ */
+export const TONE_INDICATOR_CLASS = {
+    neutral: '[&_[data-slot=progress-indicator]]:bg-muted-foreground',
+    primary: '[&_[data-slot=progress-indicator]]:bg-primary',
+    info: '[&_[data-slot=progress-indicator]]:bg-info',
+    success: '[&_[data-slot=progress-indicator]]:bg-success',
+    warning: '[&_[data-slot=progress-indicator]]:bg-warning',
+    critical: '[&_[data-slot=progress-indicator]]:bg-destructive',
+};
+/**
+ * The colour as a CSS value, for a library that takes one rather than a class
+ * — recharts' `stroke` and `stopColor`. Red is `--destructive`, not the
+ * `--color-error` palette hue: `Sparkline` once drew with the latter, a second
+ * red beside every badge and bar on the page.
+ */
+export const TONE_CSS_VAR = {
+    neutral: 'var(--muted-foreground)',
+    primary: 'var(--primary)',
+    info: 'var(--color-info)',
+    success: 'var(--color-success)',
+    warning: 'var(--color-warning)',
+    critical: 'var(--destructive)',
+};

package/dist/utils/types.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Prop helpers for wrapping elements and bits-ui primitives.
+ *
+ * From shadcn-svelte's `utils.ts` (MIT; see LICENSES/shadcn-svelte.txt).
+ */
+/** Adds a bindable `ref` to an element's props. */
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & {
+    ref?: U | null;
+};
+/** bits-ui's `child` snippet, removed where a wrapper renders its own element. */
+export type WithoutChild<T> = T extends {
+    child?: any;
+} ? Omit<T, 'child'> : T;
+export type WithoutChildren<T> = T extends {
+    children?: any;
+} ? Omit<T, 'children'> : T;
+export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;

package/dist/utils/types.js

@@ -0,0 +1,6 @@
+/**
+ * Prop helpers for wrapping elements and bits-ui primitives.
+ *
+ * From shadcn-svelte's `utils.ts` (MIT; see LICENSES/shadcn-svelte.txt).
+ */
+export {};

package/package.json

@@ -1,6 +1,125 @@
 {
   "name": "@jovertical/mise-design-system",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.0.0",
+  "description": "Svelte 5 components and a configurable Tailwind v4 theme for operations dashboards",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    },
+    "./form": {
+      "types": "./dist/form.d.ts",
+      "svelte": "./dist/form.js"
+    },
+    "./tokens": {
+      "types": "./dist/tokens.d.ts",
+      "default": "./dist/tokens.js"
+    },
+    "./theme.css": "./dist/theme.css"
+  },
+  "bin": {
+    "mise-theme": "./bin/mise-theme.js"
+  },
+  "files": [
+    "dist",
+    "bin",
+    "LICENSES",
+    "!dist/**/*.stories.svelte",
+    "!dist/**/*.stories.svelte.d.ts",
+    "!dist/**/*.test.*"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jovertical/mise-design-system.git"
+  },
+  "homepage": "https://github.com/jovertical/mise-design-system#readme",
+  "bugs": {
+    "url": "https://github.com/jovertical/mise-design-system/issues"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "peerDependencies": {
+    "formsnap": "^2.1.0",
+    "svelte": "^5.0.0",
+    "sveltekit-superforms": "^3.0.0",
+    "tailwindcss": "^4.1.0",
+    "tw-animate-css": "^1.0.0"
+  },
+  "peerDependenciesMeta": {
+    "formsnap": {
+      "optional": true
+    },
+    "sveltekit-superforms": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@internationalized/date": "^3.12.4",
+    "@lucide/svelte": "^1.67.0",
+    "@tanstack/svelte-table": "^9.3.1",
+    "bits-ui": "^2.20.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "d3-scale": "^4.0.3",
+    "d3-shape": "^3.2.1",
+    "layerchart": "^2.9.2",
+    "svelte-sonner": "^1.2.3",
+    "tailwind-merge": "^3.7.0",
+    "vaul-svelte": "1.0.0-next.7"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.6.4",
+    "@storybook/addon-a11y": "^10.6.5",
+    "@storybook/addon-docs": "^10.6.5",
+    "@storybook/addon-svelte-csf": "^5.1.6",
+    "@storybook/svelte": "^10.6.5",
+    "@storybook/sveltekit": "^10.6.5",
+    "@sveltejs/kit": "^3.1.1",
+    "@sveltejs/package": "^3.0.2",
+    "@sveltejs/vite-plugin-svelte": "^7.3.1",
+    "@tailwindcss/cli": "^4.3.4",
+    "@tailwindcss/vite": "^4.3.4",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/svelte": "^5.4.2",
+    "@testing-library/user-event": "^14.6.8",
+    "@types/d3-scale": "^4.0.9",
+    "@types/d3-shape": "^3.2.0",
+    "@types/node": "^24.19.2",
+    "formsnap": "^2.1.0",
+    "jsdom": "^30.1.3",
+    "publint": "^0.3.25",
+    "storybook": "^10.6.5",
+    "storybook-addon-tag-badges": "^3.1.0",
+    "svelte": "^5.57.3",
+    "svelte-check": "^4.7.8",
+    "sveltekit-superforms": "^3.1.0",
+    "tailwindcss": "^4.3.4",
+    "tsx": "^4.23.15",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "~6.0.3",
+    "vite": "^8.3.5",
+    "vitest": "^5.1.0",
+    "zod": "^4.6.7"
+  },
+  "scripts": {
+    "build": "svelte-kit sync && svelte-package && pnpm build:theme && publint",
+    "build:theme": "tsx scripts/build-theme.ts",
+    "storybook": "pnpm build:theme && storybook dev -p 6006",
+    "build:storybook": "pnpm build:theme && storybook build",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --fail-on-warnings",
+    "lint": "biome check .",
+    "format": "biome format --write .",
+    "test:unit": "vitest run",
+    "test:watch": "vitest",
+    "test": "pnpm check && pnpm lint && pnpm test:unit"
+  }
 }