@k8ordo/ui 1.0.0 → 2.1.0

package/dist/components/data-display/prose/prose.css

@@ -0,0 +1,253 @@
+@layer properties, theme, base;
+
+@layer components {
+  ._6icPKq_root {
+    color: var(--color-fg-base);
+    line-height: var(--line-height-loose);
+    letter-spacing: var(--letter-spacing-normal);
+
+    @scope (&) {
+      :where(& > * + *) {
+        margin-block-start: calc(var(--spacing) * 4);
+      }
+
+      :where(& > :is(h1, h2)) {
+        margin-block-start: calc(var(--spacing) * 12);
+      }
+
+      :where(& > :is(h3, h4, h5, h6)) {
+        margin-block-start: calc(var(--spacing) * 8);
+      }
+
+      :where(& > :is(h1, h2, h3, h4, h5, h6) + *) {
+        margin-block-start: calc(var(--spacing) * 3);
+      }
+
+      :where(& > :first-child) {
+        margin-block-start: 0;
+      }
+
+      & .sr-only {
+        clip-path: inset(50%);
+        white-space: nowrap;
+        border-width: 0;
+        width: 1px;
+        height: 1px;
+        margin: -1px;
+        padding: 0;
+        position: absolute;
+        overflow: hidden;
+      }
+
+      @container style(--writing: vertical) {
+        & > p:not([class]) {
+          text-indent: 1em;
+        }
+      }
+    }
+
+    @scope (&) to ([class]:not(&, [class~="footnotes"], [class~="contains-task-list"], [class~="task-list-item"], [class~="data-footnote-backref"])) {
+      & :is(h1, h2, h3, h4, h5, h6) {
+        font-weight: var(--font-weight-bold);
+        line-height: var(--line-height-snug);
+        letter-spacing: 0;
+        font-feature-settings: "palt";
+        text-wrap: balance;
+      }
+
+      & h1 {
+        font-size: var(--font-size-3xl);
+      }
+
+      & h2 {
+        font-size: var(--font-size-2xl);
+      }
+
+      & h3 {
+        font-size: var(--font-size-xl);
+      }
+
+      & h4 {
+        font-size: var(--font-size-lg);
+      }
+
+      & :is(h5, h6) {
+        font-size: var(--font-size-md);
+      }
+
+      & strong, & b {
+        font-weight: var(--font-weight-bold);
+      }
+
+      & em:lang(ja) {
+        text-emphasis: sesame;
+      }
+
+      & em:not(:lang(ja)), & i, & cite {
+        font-style: italic;
+      }
+
+      & a {
+        color: var(--color-fg-info);
+        text-underline-offset: .2em;
+        transition-property: color;
+        transition-duration: var(--duration-fast);
+        transition-timing-function: var(--easing-out);
+        text-decoration: underline;
+      }
+
+      & a:hover {
+        color: var(--color-fg-base);
+      }
+
+      & a:focus-visible {
+        border-radius: var(--radius-sm);
+        box-shadow: var(--shadow-ring-info);
+        outline: none;
+      }
+
+      & :not(pre) > code {
+        padding: calc(var(--spacing-em) * .5) calc(var(--spacing-em) * 1.5);
+        border-radius: var(--radius-md);
+        background-color: var(--color-bg-mute);
+        font-size: var(--font-size-code);
+      }
+
+      & pre {
+        padding: calc(var(--spacing) * 4);
+        border: 1px solid var(--color-border-mute);
+        border-radius: var(--radius-lg);
+        background-color: var(--color-bg-subtle);
+        font-size: var(--font-size-sm);
+        line-height: var(--line-height-relaxed);
+        overflow-x: auto;
+      }
+
+      & kbd {
+        padding: calc(var(--spacing-em) * .5) calc(var(--spacing-em) * 1.5);
+        border: 1px solid var(--color-border-mute);
+        border-radius: var(--radius-md);
+        background-color: var(--color-bg-subtle);
+        font-size: var(--font-size-kbd);
+        border-block-end-width: 2px;
+      }
+
+      & mark {
+        background-color: var(--color-bg-warning);
+        color: inherit;
+      }
+
+      & :is(ul, ol) {
+        padding-inline-start: calc(var(--spacing-em) * 6);
+      }
+
+      & ul {
+        list-style-type: disc;
+      }
+
+      & ol {
+        list-style-type: decimal;
+      }
+
+      & li > :is(ul, ol) {
+        margin-block-start: var(--spacing-em);
+      }
+
+      & ul ul {
+        list-style-type: circle;
+      }
+
+      & li + li {
+        margin-block-start: var(--spacing-em);
+      }
+
+      & li::marker {
+        color: var(--color-fg-subtle);
+      }
+
+      & li > :is(p, ul, ol) + :is(p, ul, ol) {
+        margin-block-start: calc(var(--spacing-em) * 2);
+      }
+
+      & .task-list-item {
+        list-style-type: none;
+      }
+
+      & .task-list-item > input {
+        margin-inline: calc(var(--spacing-em) * -5) calc(var(--spacing-em) * 2);
+      }
+
+      & blockquote {
+        border-inline-start: 3px solid var(--color-border-mute);
+        color: var(--color-fg-mute);
+        padding-inline-start: calc(var(--spacing-em) * 4);
+      }
+
+      & blockquote > * + * {
+        margin-block-start: calc(var(--spacing-em) * 3);
+      }
+
+      & hr {
+        margin-block: calc(var(--spacing-em) * 12);
+        border-color: var(--color-border-mute);
+      }
+
+      & table {
+        border-collapse: collapse;
+        inline-size: 100%;
+        font-size: var(--font-size-sm);
+        line-height: var(--line-height-normal);
+      }
+
+      & :is(th, td) {
+        padding: calc(var(--spacing-em) * 2) calc(var(--spacing-em) * 3);
+        border-block-end: 1px solid var(--color-border-mute);
+        text-align: start;
+      }
+
+      & th {
+        font-weight: var(--font-weight-medium);
+        background-color: var(--color-bg-subtle);
+      }
+
+      & :is(img, video) {
+        border-radius: var(--radius-lg);
+        block-size: auto;
+        max-inline-size: 100%;
+      }
+
+      & figcaption {
+        color: var(--color-fg-mute);
+        font-size: var(--font-size-sm);
+        text-align: center;
+        margin-block-start: calc(var(--spacing-em) * 2);
+      }
+
+      & dt {
+        font-weight: var(--font-weight-bold);
+      }
+
+      & dd {
+        padding-inline-start: calc(var(--spacing-em) * 6);
+      }
+
+      & dd + dt {
+        margin-block-start: calc(var(--spacing-em) * 3);
+      }
+
+      & .footnotes {
+        border-block-start: 1px solid var(--color-border-mute);
+        color: var(--color-fg-mute);
+        font-size: var(--font-size-sm);
+        margin-block-start: calc(var(--spacing-em) * 12);
+        padding-block-start: calc(var(--spacing-em) * 6);
+      }
+
+      & sup > a {
+        text-decoration: none;
+      }
+    }
+  }
+}
+
+@layer utilities;

package/dist/components/data-display/prose/prose.d.mts

@@ -0,0 +1,5 @@
+import { FC, HTMLAttributes } from "react";
+//#region src/components/data-display/prose/prose.d.ts
+type Props = Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>;
+export declare const Prose: FC<Props>;
+//#endregion

package/dist/components/data-display/prose/prose.mjs

@@ -0,0 +1,10 @@
+import prose_module_default from "./prose.module.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/data-display/prose/prose.tsx
+const Prose = ({ children, ...rest }) => /* @__PURE__ */ jsx("div", {
+	...rest,
+	className: prose_module_default.root,
+	children
+});
+//#endregion
+export { Prose };

package/dist/components/data-display/prose/prose.module.mjs

@@ -0,0 +1,5 @@
+import './prose.css';
+//#region src/components/data-display/prose/prose.module.css
+var prose_module_default = { "root": "_6icPKq_root" };
+//#endregion
+export { prose_module_default as default };

package/dist/components/data-display/table/table.css

@@ -0,0 +1,107 @@
+@layer properties, theme, base;
+
+@layer components {
+  .MnzC8W_root {
+    border: 1px solid var(--color-border-mute);
+    border-radius: var(--radius-lg);
+    background-color: var(--color-bg-base);
+    width: 100%;
+    overflow-x: auto;
+
+    @container style(--writing: vertical) {
+      writing-mode: sideways-rl;
+      width: fit-content;
+      height: fit-content;
+    }
+  }
+
+  .MnzC8W_table {
+    border-collapse: collapse;
+    text-align: left;
+    min-width: 100%;
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+  }
+
+  .MnzC8W_head {
+    background-color: var(--color-bg-subtle);
+  }
+
+  .MnzC8W_body {
+    @scope (&) {
+      & tr:last-child {
+        border-block-end-width: 0;
+      }
+    }
+  }
+
+  .MnzC8W_row {
+    border-block-end: 1px solid var(--color-border-mute);
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--easing-out);
+  }
+
+  .MnzC8W_selected {
+    background-color: var(--color-primary-bg-subtle);
+
+    @media (forced-colors: active) {
+      background-color: var(--color-system-highlight);
+      color: var(--color-system-highlight-text);
+    }
+  }
+
+  @media (hover: hover) {
+    .MnzC8W_interactive:hover {
+      background-color: var(--color-bg-mute);
+    }
+  }
+
+  .MnzC8W_headerCell {
+    padding-inline: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 3);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-fg-base);
+  }
+
+  .MnzC8W_cell {
+    padding-inline: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 3);
+    vertical-align: middle;
+  }
+
+  .MnzC8W_base {
+    color: var(--color-fg-base);
+  }
+
+  .MnzC8W_mute {
+    color: var(--color-fg-mute);
+  }
+
+  .MnzC8W_center {
+    text-align: center;
+  }
+
+  .MnzC8W_right {
+    text-align: right;
+  }
+
+  .MnzC8W_caption {
+    caption-side: bottom;
+    padding-inline: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 3);
+    color: var(--color-fg-mute);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+  }
+
+  .MnzC8W_emptyRow {
+    border-block-end: 1px solid var(--color-border-mute);
+  }
+
+  .MnzC8W_emptyCell {
+    vertical-align: middle;
+  }
+}
+
+@layer utilities;

package/dist/components/data-display/table/table.d.mts

@@ -1,10 +1,13 @@
-import { FC, HTMLAttributes, PropsWithChildren, ReactNode, TableHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from "react";
+import { EmptyState } from "../../feedback/empty-state/empty-state.mjs";
+import "../../feedback/empty-state/index.mjs";
+import { ComponentProps, FC, HTMLAttributes, PropsWithChildren, TableHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from "react";
 //#region src/components/data-display/table/table.d.ts
 type RootProps = PropsWithChildren<Omit<TableHTMLAttributes<HTMLTableElement>, 'className' | 'style'>>;
 type RowProps = PropsWithChildren<{
   interactive?: boolean;
+  selected?: boolean;
 } & Omit<HTMLAttributes<HTMLTableRowElement>, 'className' | 'style'>>;
-type CellAlign = 'left' | 'center' | 'right';
+export type CellAlign = 'left' | 'center' | 'right';
 type HeaderCellProps = PropsWithChildren<{
   align?: CellAlign;
   scope?: 'col' | 'row' | 'colgroup' | 'rowgroup';
@@ -15,11 +18,10 @@ type CellProps = PropsWithChildren<{
 } & Omit<TdHTMLAttributes<HTMLTableCellElement>, 'className' | 'style' | 'align'>>;
 type SectionProps = PropsWithChildren<Omit<HTMLAttributes<HTMLTableSectionElement>, 'className' | 'style'>>;
 type CaptionProps = PropsWithChildren<Omit<HTMLAttributes<HTMLTableCaptionElement>, 'className' | 'style'>>;
-type EmptyStateProps = {
+type EmptyRowProps = {
   colSpan: number;
-  children: ReactNode;
-};
-declare const Table: {
+} & ComponentProps<typeof EmptyState>;
+export declare const Table: {
   readonly Root: FC<RootProps>;
   readonly Head: FC<SectionProps>;
   readonly Body: FC<SectionProps>;
@@ -27,7 +29,6 @@ declare const Table: {
   readonly HeaderCell: FC<HeaderCellProps>;
   readonly Cell: FC<CellProps>;
   readonly Caption: FC<CaptionProps>;
-  readonly EmptyState: FC<EmptyStateProps>;
+  readonly EmptyState: FC<EmptyRowProps>;
 };
-//#endregion
-export { CellAlign, Table };
+//#endregion

package/dist/components/data-display/table/table.mjs

@@ -1,51 +1,62 @@
-import { cn } from "../../../helpers/cn.mjs";
+import { EmptyState } from "../../feedback/empty-state/empty-state.mjs";
+import table_module_default from "./table.module.mjs";
+import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/data-display/table/table.tsx
+const ALIGN = {
+	left: void 0,
+	center: table_module_default.center,
+	right: table_module_default.right
+};
+const COLOR = {
+	base: table_module_default.base,
+	mute: table_module_default.mute
+};
 const Root = ({ children, ...rest }) => /* @__PURE__ */ jsx("div", {
-	className: "border-border-mute bg-bg-base vertical:writing-sideways-rl vertical:size-fit w-full overflow-x-auto rounded-lg border",
+	className: table_module_default.root,
 	children: /* @__PURE__ */ jsx("table", {
 		...rest,
-		className: "min-w-full border-collapse text-left text-sm",
+		className: table_module_default.table,
 		children
 	})
 });
 const Head = ({ children, ...rest }) => /* @__PURE__ */ jsx("thead", {
 	...rest,
-	className: "bg-bg-subtle",
+	className: table_module_default.head,
 	children
 });
 const Body = ({ children, ...rest }) => /* @__PURE__ */ jsx("tbody", {
 	...rest,
-	className: "vertical:[&_tr:last-child]:border-l-0 [&_tr:last-child]:border-b-0",
+	className: table_module_default.body,
 	children
 });
-const Row = ({ children, interactive = false, ...rest }) => /* @__PURE__ */ jsx("tr", {
+const Row = ({ children, interactive = false, selected = false, ...rest }) => /* @__PURE__ */ jsx("tr", {
 	...rest,
-	className: cn("border-border-mute border-b transition-colors vertical:border-b-0 vertical:border-l", interactive && "hover:bg-bg-mute"),
+	className: clsx(table_module_default.row, interactive && table_module_default.interactive, selected && table_module_default.selected),
 	children
 });
 const HeaderCell = ({ align = "left", children, scope = "col", ...rest }) => /* @__PURE__ */ jsx("th", {
 	...rest,
-	className: cn("px-4 py-3 font-medium text-fg-base", align === "center" && "text-center", align === "right" && "text-right"),
+	className: clsx(table_module_default.headerCell, ALIGN[align]),
 	scope,
 	children
 });
 const Cell = ({ align = "left", children, color = "base", ...rest }) => /* @__PURE__ */ jsx("td", {
 	...rest,
-	className: cn("px-4 py-3 align-middle", color === "mute" ? "text-fg-mute" : "text-fg-base", align === "center" && "text-center", align === "right" && "text-right"),
+	className: clsx(table_module_default.cell, COLOR[color], ALIGN[align]),
 	children
 });
 const Caption = ({ children, ...rest }) => /* @__PURE__ */ jsx("caption", {
 	...rest,
-	className: "text-fg-mute caption-bottom px-4 py-3 text-sm",
+	className: table_module_default.caption,
 	children
 });
-const EmptyState = ({ children, colSpan }) => /* @__PURE__ */ jsx("tr", {
-	className: "border-border-mute border-b transition-colors",
+const EmptyRow = ({ colSpan, ...rest }) => /* @__PURE__ */ jsx("tr", {
+	className: table_module_default.emptyRow,
 	children: /* @__PURE__ */ jsx("td", {
-		className: "text-fg-mute px-4 py-10 text-center align-middle",
+		className: table_module_default.emptyCell,
 		colSpan,
-		children
+		children: /* @__PURE__ */ jsx(EmptyState, { ...rest })
 	})
 });
 const Table = {
@@ -56,7 +67,7 @@ const Table = {
 	HeaderCell,
 	Cell,
 	Caption,
-	EmptyState
+	EmptyState: EmptyRow
 };
 //#endregion
 export { Table };

package/dist/components/data-display/table/table.module.mjs

@@ -0,0 +1,22 @@
+import './table.css';
+//#region src/components/data-display/table/table.module.css
+var table_module_default = {
+	"base": "MnzC8W_base",
+	"body": "MnzC8W_body",
+	"caption": "MnzC8W_caption",
+	"cell": "MnzC8W_cell",
+	"center": "MnzC8W_center",
+	"emptyCell": "MnzC8W_emptyCell",
+	"emptyRow": "MnzC8W_emptyRow",
+	"head": "MnzC8W_head",
+	"headerCell": "MnzC8W_headerCell",
+	"interactive": "MnzC8W_interactive",
+	"mute": "MnzC8W_mute",
+	"right": "MnzC8W_right",
+	"root": "MnzC8W_root",
+	"row": "MnzC8W_row",
+	"selected": "MnzC8W_selected",
+	"table": "MnzC8W_table"
+};
+//#endregion
+export { table_module_default as default };

package/dist/components/data-display/tree/index.d.mts

@@ -0,0 +1,2 @@
+import { Tree, TreeItem } from "./tree.mjs";
+export { Tree, type TreeItem };

package/dist/components/data-display/tree/index.mjs

@@ -0,0 +1,2 @@
+import { Tree } from "./tree.mjs";
+export { Tree };

package/dist/components/data-display/tree/tree.css

@@ -0,0 +1,84 @@
+@layer properties, theme, base;
+
+@layer components {
+  .bAFyoa_root {
+    flex-direction: column;
+    display: flex;
+  }
+
+  .bAFyoa_item:focus-visible {
+    outline-style: none;
+  }
+
+  .bAFyoa_item:focus-visible > .bAFyoa_row {
+    box-shadow: var(--shadow-ring-info);
+    outline-style: none;
+
+    @media (forced-colors: active) {
+      outline-offset: 2px;
+      outline: 2px solid #0000;
+    }
+  }
+
+  .bAFyoa_row {
+    cursor: pointer;
+    align-items: center;
+    gap: calc(var(--spacing) * 1.5);
+    border-radius: var(--radius-md);
+    padding-block: calc(var(--spacing) * 1.5);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--easing-out);
+    padding-inline-end: calc(var(--spacing) * 3);
+    display: flex;
+  }
+
+  .bAFyoa_selected {
+    background-color: var(--color-primary-bg-subtle);
+    color: var(--color-fg-base);
+    font-weight: var(--font-weight-medium);
+
+    @media (forced-colors: active) {
+      background-color: var(--color-system-highlight);
+      color: var(--color-system-highlight-text);
+    }
+  }
+
+  .bAFyoa_unselected {
+    color: var(--color-fg-mute);
+  }
+
+  @media (hover: hover) {
+    .bAFyoa_unselected:hover {
+      background-color: var(--color-bg-mute);
+      color: var(--color-fg-base);
+    }
+  }
+
+  .bAFyoa_chevron {
+    width: calc(var(--spacing) * 4);
+    height: calc(var(--spacing) * 4);
+    transition-property: transform, translate, scale, rotate;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--easing-in-out);
+    flex-shrink: 0;
+    display: inline-flex;
+  }
+
+  .bAFyoa_leaf {
+    visibility: hidden;
+  }
+
+  .bAFyoa_expanded {
+    rotate: 90deg;
+  }
+
+  .bAFyoa_icon {
+    flex-shrink: 0;
+    display: inline-flex;
+  }
+}
+
+@layer utilities;

package/dist/components/data-display/tree/tree.d.mts

@@ -0,0 +1,20 @@
+import { FC, HTMLAttributes, ReactNode } from "react";
+//#region src/components/data-display/tree/tree.d.ts
+export type TreeItem = {
+  id: string;
+  label: string;
+  icon?: ReactNode;
+  children?: readonly TreeItem[];
+};
+type Props = {
+  label: string;
+  items: readonly TreeItem[];
+  expandedIds?: readonly string[];
+  defaultExpandedIds?: readonly string[];
+  onExpandedChange?: (ids: readonly string[]) => void;
+  selectedId?: string | null;
+  defaultSelectedId?: string | null;
+  onChange?: (id: string) => void;
+} & Omit<HTMLAttributes<HTMLUListElement>, 'children' | 'className' | 'style' | 'onChange' | 'role' | 'aria-label'>;
+export declare const Tree: FC<Props>;
+//#endregion