@keyfunc/keybricks-ds 1.0.4 → 2.3.1

package/components/data/DataTable.d.ts

@@ -1,28 +0,0 @@
-import * as React from "react";
-/**
- * Hairline data table — #fafafa header, #f5f5f5 row separators.
- * @startingPoint section="Data" subtitle="Comparison / preview tables with mono cells" viewport="700x300"
- */
-export interface DataTableColumn {
-  key: string;
-  label: string;
-  width?: number | string;
-  /** Menlo 11px cell (config codes, values) */
-  mono?: boolean;
-  align?: "left" | "right" | "center";
-  render?: (value: any, row: any, index: number) => React.ReactNode;
-}
-export interface DataTableProps {
-  columns?: DataTableColumn[];
-  rows?: Record<string, any>[];
-  /** 29px rows + lowercase 11px headers (data-preview drawer) */
-  dense?: boolean;
-  /** Leading checkbox column */
-  selectable?: boolean;
-  selected?: number[];
-  /** onToggle("all"|rowIndex, checked) */
-  onToggle?: (which: number | "all", checked: boolean) => void;
-  headerBorder?: boolean;
-  style?: React.CSSProperties;
-}
-export declare function DataTable(props: DataTableProps): JSX.Element;

package/components/data/DataTable.jsx

@@ -1,32 +0,0 @@
-import React from "react";
-import { Checkbox } from "../forms/Checkbox.jsx";
-
-/** Keybricks data table. columns: [{key,label,width,mono,render}]. dense = 29px preview-drawer rows; default = 51.5px config rows. */
-export function DataTable({ columns = [], rows = [], dense, selectable, selected = [], onToggle, headerBorder = true, style }) {
-  const rowH = dense ? 29.5 : 51.5;
-  const cellFont = (c) => c.mono
-    ? { fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", letterSpacing: "var(--tracking-xs)", color: "var(--text-heading)" }
-    : { fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", color: "var(--text-primary)" };
-  return (
-    <table style={{ width: "100%", borderCollapse: "collapse", ...style }}>
-      <thead>
-        <tr style={{ background: "var(--bg-inset)", borderTop: headerBorder && !dense ? "1px solid var(--border-control)" : "none", borderBottom: headerBorder ? "1px solid var(--border-control)" : "none", height: dense ? 29 : 48.5 }}>
-          {selectable ? <th style={{ width: 40, padding: "0 0 0 16px", textAlign: "left" }}><Checkbox size="sm" checked={rows.length > 0 && selected.length === rows.length} onChange={(v) => onToggle && onToggle("all", v)} /></th> : null}
-          {columns.map((c) => (
-            <th key={c.key} style={{ textAlign: c.align || "left", padding: "0 12px", width: c.width, fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-xs)", lineHeight: "var(--leading-xs)", letterSpacing: dense ? "var(--tracking-xs)" : ".3px", textTransform: dense ? "none" : "uppercase", color: "var(--text-secondary)", whiteSpace: "nowrap" }}>{c.label}</th>
-          ))}
-        </tr>
-      </thead>
-      <tbody>
-        {rows.map((r, ri) => (
-          <tr key={ri} style={{ height: rowH, borderBottom: "1px solid var(--border-subtle)" }}>
-            {selectable ? <td style={{ padding: "0 0 0 16px" }}><Checkbox size="sm" checked={selected.includes(ri)} onChange={(v) => onToggle && onToggle(ri, v)} /></td> : null}
-            {columns.map((c) => (
-              <td key={c.key} style={{ padding: "0 12px", textAlign: c.align || "left", whiteSpace: "nowrap", ...cellFont(c) }}>{c.render ? c.render(r[c.key], r, ri) : r[c.key]}</td>
-            ))}
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  );
-}

package/components/data/DataTable.vue

@@ -1,25 +0,0 @@
-<script setup>
-import { computed } from 'vue'
-import Checkbox from '../forms/Checkbox.vue'
-// Keybricks data table. columns: [{key,label,width,mono,render}]. dense = 29px preview-drawer rows; default = 51.5px config rows.
-const props = defineProps({ columns: { type: Array, default: () => [] }, rows: { type: Array, default: () => [] }, dense: Boolean, selectable: Boolean, selected: { type: Array, default: () => [] }, headerBorder: { type: Boolean, default: true }, style: Object })
-const emit = defineEmits(['toggle'])
-const rowH = computed(() => props.dense ? 29.5 : 51.5)
-function cellFont(c) { return c.mono ? { fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', letterSpacing: 'var(--tracking-xs)', color: 'var(--text-heading)' } : { fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', color: 'var(--text-primary)' } }
-</script>
-<template>
-  <table :style="{ width: '100%', borderCollapse: 'collapse', ...style }">
-    <thead>
-      <tr :style="{ background: 'var(--bg-inset)', borderTop: (headerBorder && !dense) ? '1px solid var(--border-control)' : 'none', borderBottom: headerBorder ? '1px solid var(--border-control)' : 'none', height: dense ? 29 : 48.5 }">
-        <th v-if="selectable" style="width:40px;padding:0 0 0 16px;text-align:left"><Checkbox size="sm" :checked="rows.length > 0 && selected.length === rows.length" @change="v => emit('toggle', 'all', v)" /></th>
-        <th v-for="c in columns" :key="c.key" :style="{ textAlign: c.align || 'left', padding: '0 12px', width: c.width, fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: 'var(--text-xs)', lineHeight: 'var(--leading-xs)', letterSpacing: dense ? 'var(--tracking-xs)' : '.3px', textTransform: dense ? 'none' : 'uppercase', color: 'var(--text-secondary)', whiteSpace: 'nowrap' }">{{ c.label }}</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="(r, ri) in rows" :key="ri" :style="{ height: rowH, borderBottom: '1px solid var(--border-subtle)' }">
-        <td v-if="selectable" style="padding:0 0 0 16px"><Checkbox size="sm" :checked="selected.includes(ri)" @change="v => emit('toggle', ri, v)" /></td>
-        <td v-for="c in columns" :key="c.key" :style="{ padding: '0 12px', textAlign: c.align || 'left', whiteSpace: 'nowrap', ...cellFont(c) }">{{ c.render ? c.render(r[c.key], r, ri) : r[c.key] }}</td>
-      </tr>
-    </tbody>
-  </table>
-</template>

package/components/data/_dir.card.html

@@ -1,13 +0,0 @@
-<!-- @dsCard group="Directory Index" viewport="700x120" name="Data dir" subtitle="Full cards: Components → Data Table / List Row / etc." -->
-<!DOCTYPE html>
-<html><head><meta charset="utf-8"><link rel="stylesheet" href="../../styles.css">
-<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
-<script src="../../_ds_bundle.js"></script>
-<style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans)}</style></head>
-<body><div id="root"></div>
-<script type="text/babel">
-const { DataTable } = window.KeybricksDesignSystem_71231a;
-ReactDOM.createRoot(document.getElementById("root")).render(<DataTable dense columns={[{key:"id",label:"ID",mono:true},{key:"entity",label:"Entity",mono:true}]} rows={[{id:"528563",entity:"HK"}]}/>);
-</script></body></html>

package/components/display/_dir.card.html

@@ -1,13 +0,0 @@
-<!-- @dsCard group="Directory Index" viewport="700x90" name="Display dir" subtitle="Full cards: Components → Cards & Indicators / Tag / etc." -->
-<!DOCTYPE html>
-<html><head><meta charset="utf-8"><link rel="stylesheet" href="../../styles.css">
-<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
-<script src="../../_ds_bundle.js"></script>
-<style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans)}</style></head>
-<body><div id="root"></div>
-<script type="text/babel">
-const { Card } = window.KeybricksDesignSystem_71231a;
-ReactDOM.createRoot(document.getElementById("root")).render(<Card title="Revenue Trend" style={{width:220}}><span style={{fontSize:12,color:"var(--text-secondary)"}}>See Components tab for full states</span></Card>);
-</script></body></html>

package/components/feedback/_dir.card.html

@@ -1,13 +0,0 @@
-<!-- @dsCard group="Directory Index" viewport="700x70" name="Feedback dir" subtitle="Full cards: Components → Accordion / Overlays / States / etc." -->
-<!DOCTYPE html>
-<html><head><meta charset="utf-8"><link rel="stylesheet" href="../../styles.css">
-<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
-<script src="../../_ds_bundle.js"></script>
-<style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans)}</style></head>
-<body><div id="root"></div>
-<script type="text/babel">
-const { Alert } = window.KeybricksDesignSystem_71231a;
-ReactDOM.createRoot(document.getElementById("root")).render(<Alert tone="info" title="See Components tab for full states"/>);
-</script></body></html>

package/components/forms/_dir.card.html

@@ -1,13 +0,0 @@
-<!-- @dsCard group="Directory Index" viewport="700x60" name="Forms dir" subtitle="Full cards: Components → Input / Select / Checkbox / etc." -->
-<!DOCTYPE html>
-<html><head><meta charset="utf-8"><link rel="stylesheet" href="../../styles.css">
-<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
-<script src="../../_ds_bundle.js"></script>
-<style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans)}</style></head>
-<body><div id="root"></div>
-<script type="text/babel">
-const { Input } = window.KeybricksDesignSystem_71231a;
-ReactDOM.createRoot(document.getElementById("root")).render(<Input placeholder="See Components tab for full states" style={{maxWidth:320}}/>);
-</script></body></html>

package/components/icons/_dir.card.html

@@ -1,13 +0,0 @@
-<!-- @dsCard group="Directory Index" viewport="700x60" name="Icons dir" subtitle="Full card: Components → Icons" -->
-<!DOCTYPE html>
-<html><head><meta charset="utf-8"><link rel="stylesheet" href="../../styles.css">
-<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
-<script src="../../_ds_bundle.js"></script>
-<style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans)}</style></head>
-<body><div id="root"></div>
-<script type="text/babel">
-const { Icon } = window.KeybricksDesignSystem_71231a;
-ReactDOM.createRoot(document.getElementById("root")).render(<div style={{display:"flex",gap:10}}><Icon name="search"/><Icon name="database"/><Icon name="shuffle"/></div>);
-</script></body></html>

package/components/navigation/_dir.card.html

@@ -1,13 +0,0 @@
-<!-- @dsCard group="Directory Index" viewport="700x70" name="Navigation dir" subtitle="Full card: Components → App Chrome" -->
-<!DOCTYPE html>
-<html><head><meta charset="utf-8"><link rel="stylesheet" href="../../styles.css">
-<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
-<script src="../../_ds_bundle.js"></script>
-<style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans)}</style></head>
-<body><div id="root"></div>
-<script type="text/babel">
-const { Breadcrumb } = window.KeybricksDesignSystem_71231a;
-ReactDOM.createRoot(document.getElementById("root")).render(<Breadcrumb items={["Management","System Migration","Import"]}/>);
-</script></body></html>

package/components/pipeline/_dir.card.html

@@ -1,13 +0,0 @@
-<!-- @dsCard group="Directory Index" viewport="700x110" name="Pipeline dir" subtitle="Full card: Components → Pipeline Editor" -->
-<!DOCTYPE html>
-<html><head><meta charset="utf-8"><link rel="stylesheet" href="../../styles.css">
-<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
-<script src="../../_ds_bundle.js"></script>
-<style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans)}</style></head>
-<body><div id="root"></div>
-<script type="text/babel">
-const { NodeCard } = window.KeybricksDesignSystem_71231a;
-ReactDOM.createRoot(document.getElementById("root")).render(<NodeCard title="Sales Orders" subtitle="Detail Sheet" icon="table" hue="source"/>);
-</script></body></html>

package/components/tabs/_dir.card.html

@@ -1,13 +0,0 @@
-<!-- @dsCard group="Directory Index" viewport="700x60" name="Tabs dir" subtitle="Full card: Components → Tabs & Toggles" -->
-<!DOCTYPE html>
-<html><head><meta charset="utf-8"><link rel="stylesheet" href="../../styles.css">
-<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
-<script src="../../_ds_bundle.js"></script>
-<style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans)}</style></head>
-<body><div id="root"></div>
-<script type="text/babel">
-const { PillTabs } = window.KeybricksDesignSystem_71231a;
-ReactDOM.createRoot(document.getElementById("root")).render(<PillTabs tabs={["For Review","To be Submitted"]} active={"For Review"}/>);
-</script></body></html>