@abstractframework/ui-kit 0.1.0

package/dist/typography.js

@@ -0,0 +1,31 @@
+export const FONT_SCALES = [
+    { id: "sm", label: "Small", scale: 0.9 },
+    { id: "md", label: "Medium", scale: 1 },
+    { id: "lg", label: "Large", scale: 1.1 },
+    { id: "xl", label: "Extra Large", scale: 1.2 },
+];
+export const HEADER_DENSITIES = [
+    { id: "compact", label: "Compact", density: 0.85 },
+    { id: "standard", label: "Standard", density: 1 },
+    { id: "spacious", label: "Spacious", density: 1.2 },
+];
+export function getFontScaleSpec(font_scale_id) {
+    const id = String(font_scale_id || "").trim();
+    return FONT_SCALES.find((x) => x.id === id) || FONT_SCALES[1];
+}
+export function getHeaderDensitySpec(header_density_id) {
+    const id = String(header_density_id || "").trim();
+    return HEADER_DENSITIES.find((x) => x.id === id) || HEADER_DENSITIES[1];
+}
+export function applyTypography(opts) {
+    try {
+        const root = document.documentElement;
+        const font = getFontScaleSpec(opts.font_scale || "md");
+        const header = getHeaderDensitySpec(opts.header_density || "standard");
+        root.style.setProperty("--font-scale", String(font.scale));
+        root.style.setProperty("--header-density", String(header.density));
+    }
+    catch {
+        // ignore
+    }
+}

package/dist/typography_select.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+import { type FontScaleOption, type HeaderDensityOption } from "./typography";
+export type FontScaleSelectProps = {
+    value: string;
+    onChange: (font_scale_id: string) => void;
+    scales?: FontScaleOption[];
+    disabled?: boolean;
+    variant?: "panel" | "pin";
+    className?: string;
+    triggerClassName?: string;
+    placeholder?: string;
+};
+export declare function FontScaleSelect(props: FontScaleSelectProps): React.ReactElement;
+export type HeaderDensitySelectProps = {
+    value: string;
+    onChange: (header_density_id: string) => void;
+    densities?: HeaderDensityOption[];
+    disabled?: boolean;
+    variant?: "panel" | "pin";
+    className?: string;
+    triggerClassName?: string;
+    placeholder?: string;
+};
+export declare function HeaderDensitySelect(props: HeaderDensitySelectProps): React.ReactElement;
+export default FontScaleSelect;
+//# sourceMappingURL=typography_select.d.ts.map

package/dist/typography_select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography_select.d.ts","sourceRoot":"","sources":["../src/typography_select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAiC,KAAK,eAAe,EAAE,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAE7G,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,eAAe,EAAE,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,KAAK,CAAC,YAAY,CAuB/E;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,iBAAiB,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,GAAG,KAAK,CAAC,YAAY,CAuBvF;AAED,eAAe,eAAe,CAAC"}

package/dist/typography_select.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { AfSelect } from "./af_select";
+import { FONT_SCALES, HEADER_DENSITIES } from "./typography";
+export function FontScaleSelect(props) {
+    const scales = props.scales && props.scales.length ? props.scales : FONT_SCALES;
+    const variant = props.variant || "panel";
+    const options = useMemo(() => {
+        return scales.map((s) => ({ value: s.id, label: s.label }));
+    }, [scales]);
+    return (_jsx(AfSelect, { value: props.value, options: options, placeholder: props.placeholder || "Font size…", disabled: props.disabled === true, searchable: false, allowCustom: false, clearable: false, variant: variant, className: props.className, triggerClassName: props.triggerClassName, onChange: (next) => props.onChange(String(next || "").trim()) }));
+}
+export function HeaderDensitySelect(props) {
+    const densities = props.densities && props.densities.length ? props.densities : HEADER_DENSITIES;
+    const variant = props.variant || "panel";
+    const options = useMemo(() => {
+        return densities.map((d) => ({ value: d.id, label: d.label }));
+    }, [densities]);
+    return (_jsx(AfSelect, { value: props.value, options: options, placeholder: props.placeholder || "Header size…", disabled: props.disabled === true, searchable: false, allowCustom: false, clearable: false, variant: variant, className: props.className, triggerClassName: props.triggerClassName, onChange: (next) => props.onChange(String(next || "").trim()) }));
+}
+export default FontScaleSelect;

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@abstractframework/ui-kit",
+  "version": "0.1.0",
+  "description": "Shared UI tokens + themes for AbstractFramework thin clients (AbstractFlow, AbstractObserver, etc.).",
+  "type": "module",
+  "author": "Laurent-Philippe Albou",
+  "license": "MIT",
+  "keywords": [
+    "abstractframework",
+    "ui",
+    "theme",
+    "tokens",
+    "react"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lpalbou/AbstractUIC.git",
+    "directory": "ui-kit"
+  },
+  "homepage": "https://github.com/lpalbou/AbstractUIC#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./theme.css": "./src/theme.css"
+  },
+  "files": [
+    "dist",
+    "src/theme.css",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "typescript": "^5.3.3"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}