@misoto22/kioku-ui 0.0.0

package/dist/components/Stack.js

@@ -0,0 +1,77 @@
+import * as stylex from '@stylexjs/stylex';
+import { semanticTokens } from '../authoring.stylex.js';
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const styles = {
+  base: {
+    k1xSpc: "x78zum5",
+    kXwgrk: "xdt5ytf",
+    $$css: true
+  },
+  gapXs: {
+    kOIVth: "x1iwn5ga",
+    $$css: true
+  },
+  gapSm: {
+    kOIVth: "x1ap6kct",
+    $$css: true
+  },
+  gapMd: {
+    kOIVth: "xtl099x",
+    $$css: true
+  },
+  gapLg: {
+    kOIVth: "x4nws80",
+    $$css: true
+  },
+  gapXl: {
+    kOIVth: "x1ws3dqe",
+    $$css: true
+  },
+  gap2xl: {
+    kOIVth: "xl3vxp",
+    $$css: true
+  },
+  alignStretch: {
+    kGNEyG: "x1qjc9v5",
+    $$css: true
+  },
+  alignStart: {
+    kGNEyG: "x1cy8zhl",
+    $$css: true
+  },
+  alignCenter: {
+    kGNEyG: "x6s0dn4",
+    $$css: true
+  },
+  alignEnd: {
+    kGNEyG: "xuk3077",
+    $$css: true
+  }
+};
+const gaps = {
+  xs: styles.gapXs,
+  sm: styles.gapSm,
+  md: styles.gapMd,
+  lg: styles.gapLg,
+  xl: styles.gapXl,
+  '2xl': styles.gap2xl
+};
+const aligns = {
+  stretch: styles.alignStretch,
+  start: styles.alignStart,
+  center: styles.alignCenter,
+  end: styles.alignEnd
+};
+export function Stack({
+  gap = 'md',
+  align = 'stretch',
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx("div", {
+    ...props,
+    ...stylex.props(styles.base, gaps[gap], aligns[align]),
+    children: children
+  });
+}

package/dist/components/StatusDot.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'react';
+import type { StatusTone } from './Badge.js';
+/** Props for a labelled live-status indicator using semantic status tones. */
+export interface StatusDotProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'aria-label' | 'children' | 'className' | 'role'> {
+    readonly 'aria-label': string;
+    readonly tone?: StatusTone;
+}
+export declare function StatusDot({ tone, ...props }: StatusDotProps): import("react").JSX.Element;

package/dist/components/StatusDot.doc.d.ts

@@ -0,0 +1,16 @@
+export declare const statusDotDoc: {
+    name: string;
+    description: string;
+    props: ({
+        name: string;
+        description: string;
+        required: true;
+    } | {
+        name: string;
+        description: string;
+        required?: undefined;
+    })[];
+    inheritedProps: string[];
+    example: string;
+    storyId: string;
+};

package/dist/components/StatusDot.doc.js

@@ -0,0 +1,16 @@
+import "../styles/stylex.css";
+export const statusDotDoc = {
+  name: 'StatusDot',
+  description: 'Announces a compact live status indicator by its supplied label.',
+  props: [{
+    name: 'aria-label',
+    description: 'Names the represented status.',
+    required: true
+  }, {
+    name: 'tone',
+    description: 'Selects one of the four semantic status tones.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLSpanElement> except aria-label, children, className, and role'],
+  example: '<StatusDot aria-label="Service available" tone="success" />',
+  storyId: 'core-status-dot--default'
+};

package/dist/components/StatusDot.js

@@ -0,0 +1,46 @@
+import * as stylex from '@stylexjs/stylex';
+import { semanticTokens } from '../authoring.stylex.js';
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const styles = {
+  base: {
+    kaIpWk: "xnpwncj",
+    k1xSpc: "x1rg5ohu",
+    kZKoxP: "x1ieyhmn",
+    kzqmXN: "x1rcf1qu",
+    $$css: true
+  },
+  info: {
+    kWkggS: "x18i8t7",
+    $$css: true
+  },
+  success: {
+    kWkggS: "x1sm82us",
+    $$css: true
+  },
+  warning: {
+    kWkggS: "xe2mao8",
+    $$css: true
+  },
+  danger: {
+    kWkggS: "xpqgouk",
+    $$css: true
+  }
+};
+
+/** Props for a labelled live-status indicator using semantic status tones. */
+
+export function StatusDot({
+  tone = 'info',
+  ...props
+}) {
+  return /*#__PURE__*/_jsx("span", {
+    ...props,
+    "aria-live": "polite",
+    role: "status",
+    children: /*#__PURE__*/_jsx("span", {
+      "aria-hidden": "true",
+      ...stylex.props(styles.base, styles[tone])
+    })
+  });
+}

package/dist/components/Table.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes, TableHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react';
+export type TableDensity = 'compact' | 'default' | 'spacious';
+export type TableDividers = 'rows' | 'columns' | 'grid' | 'none';
+export interface TableProps extends Omit<TableHTMLAttributes<HTMLTableElement>, 'className'> {
+    readonly density?: TableDensity;
+    readonly dividers?: TableDividers;
+}
+export type TableCaptionProps = Omit<HTMLAttributes<HTMLTableCaptionElement>, 'className'>;
+export type TableHeadProps = Omit<HTMLAttributes<HTMLTableSectionElement>, 'className'>;
+export type TableBodyProps = TableHeadProps;
+export type TableRowProps = Omit<HTMLAttributes<HTMLTableRowElement>, 'className'>;
+export type TableHeaderCellProps = Omit<ThHTMLAttributes<HTMLTableCellElement>, 'className'>;
+export type TableCellProps = Omit<TdHTMLAttributes<HTMLTableCellElement>, 'className'>;
+export declare function Table({ children, density, dividers, ...props }: TableProps): import("react").JSX.Element;
+export declare function TableCaption({ children, ...props }: TableCaptionProps): import("react").JSX.Element;
+export declare function TableHead({ children, ...props }: TableHeadProps): import("react").JSX.Element;
+export declare function TableBody({ children, ...props }: TableBodyProps): import("react").JSX.Element;
+export declare function TableRow({ children, ...props }: TableRowProps): import("react").JSX.Element;
+export declare function TableHeaderCell({ children, scope, ...props }: TableHeaderCellProps): import("react").JSX.Element;
+export declare function TableCell({ children, ...props }: TableCellProps): import("react").JSX.Element;

package/dist/components/Table.doc.d.ts

@@ -0,0 +1,92 @@
+export declare const tableDoc: {
+    name: string;
+    description: string;
+    props: ({
+        name: string;
+        description: string;
+        required: true;
+    } | {
+        name: string;
+        description: string;
+        required?: undefined;
+    })[];
+    inheritedProps: string[];
+    example: string;
+    storyId: string;
+};
+export declare const tableCaptionDoc: {
+    name: string;
+    description: string;
+    props: {
+        name: string;
+        description: string;
+        required: true;
+    }[];
+    inheritedProps: string[];
+    example: string;
+    storyId: string;
+};
+export declare const tableHeadDoc: {
+    name: string;
+    description: string;
+    props: {
+        name: string;
+        description: string;
+        required: true;
+    }[];
+    inheritedProps: string[];
+    example: string;
+    storyId: string;
+};
+export declare const tableBodyDoc: {
+    name: string;
+    description: string;
+    props: {
+        name: string;
+        description: string;
+        required: true;
+    }[];
+    inheritedProps: string[];
+    example: string;
+    storyId: string;
+};
+export declare const tableRowDoc: {
+    name: string;
+    description: string;
+    props: {
+        name: string;
+        description: string;
+        required: true;
+    }[];
+    inheritedProps: string[];
+    example: string;
+    storyId: string;
+};
+export declare const tableHeaderCellDoc: {
+    name: string;
+    description: string;
+    props: ({
+        name: string;
+        description: string;
+        required: true;
+    } | {
+        name: string;
+        description: string;
+        required?: undefined;
+    })[];
+    inheritedProps: string[];
+    example: string;
+    storyId: string;
+};
+export declare const tableCellDoc: {
+    name: string;
+    description: string;
+    props: {
+        name: string;
+        description: string;
+        required: true;
+    }[];
+    inheritedProps: string[];
+    example: string;
+    storyId: string;
+};

package/dist/components/Table.doc.js

@@ -0,0 +1,94 @@
+import "../styles/stylex.css";
+export const tableDoc = {
+  name: 'Table',
+  description: 'Composes native table, caption, section, row, header, and cell primitives.',
+  props: [{
+    name: 'children',
+    description: 'Supplies semantic table primitives.',
+    required: true
+  }, {
+    name: 'density',
+    description: 'Selects compact, default, or spacious cell rhythm.'
+  }, {
+    name: 'dividers',
+    description: 'Selects internal row, column, grid, or borderless dividers without adding an outer boundary.'
+  }],
+  inheritedProps: ['TableHTMLAttributes<HTMLTableElement> except className'],
+  example: '<Table density="compact" dividers="grid"><TableCaption>Values</TableCaption><TableBody /></Table>',
+  storyId: 'core-table--default'
+};
+export const tableCaptionDoc = {
+  name: 'TableCaption',
+  description: 'Provides the native accessible name and context for a table.',
+  props: [{
+    name: 'children',
+    description: 'Describes the table contents.',
+    required: true
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLTableCaptionElement> except className'],
+  example: '<TableCaption>Quarterly values</TableCaption>',
+  storyId: 'core-table--table-caption'
+};
+export const tableHeadDoc = {
+  name: 'TableHead',
+  description: 'Groups a table’s column header rows with native semantics.',
+  props: [{
+    name: 'children',
+    description: 'Supplies header rows.',
+    required: true
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLTableSectionElement> except className'],
+  example: '<TableHead><TableRow /></TableHead>',
+  storyId: 'core-table--table-head'
+};
+export const tableBodyDoc = {
+  name: 'TableBody',
+  description: 'Groups a table’s data rows with native semantics.',
+  props: [{
+    name: 'children',
+    description: 'Supplies data rows.',
+    required: true
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLTableSectionElement> except className'],
+  example: '<TableBody><TableRow /></TableBody>',
+  storyId: 'core-table--table-body'
+};
+export const tableRowDoc = {
+  name: 'TableRow',
+  description: 'Groups related header or data cells in a native table row.',
+  props: [{
+    name: 'children',
+    description: 'Supplies cells.',
+    required: true
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLTableRowElement> except className'],
+  example: '<TableRow><TableCell>Value</TableCell></TableRow>',
+  storyId: 'core-table--table-row'
+};
+export const tableHeaderCellDoc = {
+  name: 'TableHeaderCell',
+  description: 'Labels a row or column through native table-header semantics.',
+  props: [{
+    name: 'children',
+    description: 'Supplies the header label.',
+    required: true
+  }, {
+    name: 'scope',
+    description: 'Associates the header with a row or column.'
+  }],
+  inheritedProps: ['ThHTMLAttributes<HTMLTableCellElement> except className'],
+  example: '<TableHeaderCell scope="col">Name</TableHeaderCell>',
+  storyId: 'core-table--table-header-cell'
+};
+export const tableCellDoc = {
+  name: 'TableCell',
+  description: 'Renders one native data cell in a table row.',
+  props: [{
+    name: 'children',
+    description: 'Supplies the cell value.',
+    required: true
+  }],
+  inheritedProps: ['TdHTMLAttributes<HTMLTableCellElement> except className'],
+  example: '<TableCell>24</TableCell>',
+  storyId: 'core-table--table-cell'
+};

package/dist/components/Table.js

@@ -0,0 +1,205 @@
+import * as stylex from '@stylexjs/stylex';
+import { createContext, useContext } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const defaultTableStyle = {
+  density: 'default',
+  dividers: 'rows',
+  section: undefined
+};
+const TableStyleContext = createContext(defaultTableStyle);
+const styles = {
+  table: {
+    kLvRdT: "x1mwwwfo",
+    kMwMTN: "x1y4yzzg",
+    kMv6JI: "xj0sio9",
+    kGuDYH: "x1ti3rys",
+    kzqmXN: "xh8yej3",
+    $$css: true
+  },
+  caption: {
+    kMv6JI: "x69it5h",
+    k63SB2: "x1sa4947",
+    k8WAf4: "xoeao9w",
+    k9WMMc: "x1yc453h",
+    $$css: true
+  },
+  bodyRow: {
+    kIyJzY: "x1elc2ff",
+    k1ekBW: "x15406qy",
+    kAMwcw: "xxjumz",
+    ko0ZBZ: "xx3trin",
+    kOmc5w: "x12y31ib",
+    kSReZ0: "x15nsxps",
+    $$css: true
+  },
+  headerCell: {
+    kWkggS: "xavu78a",
+    kMwMTN: "x17y7oyd",
+    k63SB2: "x1sa4947",
+    kg3NbH: "x1wkw8jr",
+    k9WMMc: "x1yc453h",
+    $$css: true
+  },
+  cell: {
+    kg3NbH: "x1wkw8jr",
+    $$css: true
+  },
+  compact: {
+    k8WAf4: "xoeao9w",
+    $$css: true
+  },
+  default: {
+    k8WAf4: "x1lr58ck",
+    $$css: true
+  },
+  spacious: {
+    k8WAf4: "x17uk85o",
+    $$css: true
+  },
+  rowDivider: {
+    kV9P4g: "xrrqrn",
+    kYdPot: "xub24xa",
+    kuUVJo: "xbg14n3",
+    $$css: true
+  },
+  headerRowDivider: {
+    kL6WhQ: "x1k3hjl9",
+    kfdmCh: "x1w5tod1",
+    kt9PQ7: "xeq6m5c",
+    $$css: true
+  },
+  columnDivider: {
+    kQszG1: "x17bc2d0",
+    klVOZA: "x1f0nvx8",
+    klFkld: "x86nh4x",
+    $$css: true
+  }
+};
+function usesRowDividers(dividers) {
+  return dividers === 'rows' || dividers === 'grid';
+}
+function usesColumnDividers(dividers) {
+  return dividers === 'columns' || dividers === 'grid';
+}
+export function Table({
+  children,
+  density = 'default',
+  dividers = 'rows',
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(TableStyleContext.Provider, {
+    value: {
+      density,
+      dividers,
+      section: undefined
+    },
+    children: /*#__PURE__*/_jsx("table", {
+      ...props,
+      ...{
+        className: "x1mwwwfo x1y4yzzg xj0sio9 x1ti3rys xh8yej3"
+      },
+      children: children
+    })
+  });
+}
+export function TableCaption({
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx("caption", {
+    ...props,
+    ...{
+      className: "x69it5h x1sa4947 xoeao9w x1yc453h"
+    },
+    children: children
+  });
+}
+export function TableHead({
+  children,
+  ...props
+}) {
+  const tableStyle = useContext(TableStyleContext);
+  return /*#__PURE__*/_jsx(TableStyleContext.Provider, {
+    value: {
+      ...tableStyle,
+      section: 'head'
+    },
+    children: /*#__PURE__*/_jsx("thead", {
+      ...props,
+      children: children
+    })
+  });
+}
+export function TableBody({
+  children,
+  ...props
+}) {
+  const tableStyle = useContext(TableStyleContext);
+  return /*#__PURE__*/_jsx(TableStyleContext.Provider, {
+    value: {
+      ...tableStyle,
+      section: 'body'
+    },
+    children: /*#__PURE__*/_jsx("tbody", {
+      ...props,
+      children: children
+    })
+  });
+}
+export function TableRow({
+  children,
+  ...props
+}) {
+  const {
+    dividers,
+    section
+  } = useContext(TableStyleContext);
+  return /*#__PURE__*/_jsx("tr", {
+    ...props,
+    ...{
+      0: {},
+      2: {
+        className: "x1elc2ff x15406qy xxjumz xx3trin x12y31ib x15nsxps"
+      },
+      1: {
+        className: "xrrqrn xub24xa xbg14n3"
+      },
+      3: {
+        className: "x1elc2ff x15406qy xxjumz xx3trin x12y31ib x15nsxps xrrqrn xub24xa xbg14n3"
+      }
+    }[!!(section === 'body') << 1 | !!(section === 'body' && usesRowDividers(dividers)) << 0],
+    children: children
+  });
+}
+export function TableHeaderCell({
+  children,
+  scope = 'col',
+  ...props
+}) {
+  const {
+    density,
+    dividers
+  } = useContext(TableStyleContext);
+  return /*#__PURE__*/_jsx("th", {
+    ...props,
+    scope: scope,
+    ...stylex.props(styles.headerCell, styles[density], usesRowDividers(dividers) && styles.headerRowDivider, usesColumnDividers(dividers) && styles.columnDivider),
+    children: children
+  });
+}
+export function TableCell({
+  children,
+  ...props
+}) {
+  const {
+    density,
+    dividers
+  } = useContext(TableStyleContext);
+  return /*#__PURE__*/_jsx("td", {
+    ...props,
+    ...stylex.props(styles.cell, styles[density], usesColumnDividers(dividers) && styles.columnDivider),
+    children: children
+  });
+}

package/dist/components/Text.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'react';
+export type TextTone = 'primary' | 'secondary' | 'muted';
+export interface TextProps extends Omit<HTMLAttributes<HTMLParagraphElement>, 'className'> {
+    readonly size?: 'sm' | 'md' | 'lg';
+    readonly tone?: TextTone;
+}
+export declare function Text({ children, size, tone, ...props }: TextProps): import("react").JSX.Element;

package/dist/components/Text.doc.d.ts

@@ -0,0 +1,11 @@
+export declare const textDoc: {
+    name: string;
+    description: string;
+    props: {
+        name: string;
+        description: string;
+    }[];
+    inheritedProps: string[];
+    example: string;
+    storyId: string;
+};

package/dist/components/Text.doc.js

@@ -0,0 +1,15 @@
+import "../styles/stylex.css";
+export const textDoc = {
+  name: 'Text',
+  description: 'Renders body copy with semantic typography tokens.',
+  props: [{
+    name: 'size',
+    description: 'Optional semantic size: "sm", "md", or "lg".'
+  }, {
+    name: 'tone',
+    description: 'Optional hierarchy tone: "primary", "secondary", or "muted".'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLParagraphElement> except className'],
+  example: '<Text size="md" tone="secondary">Supporting copy.</Text>',
+  storyId: 'core-text--default'
+};

package/dist/components/Text.js

@@ -0,0 +1,50 @@
+import * as stylex from '@stylexjs/stylex';
+import { semanticTokens } from '../authoring.stylex.js';
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const styles = {
+  base: {
+    kMwMTN: "x1y4yzzg",
+    kMv6JI: "xj0sio9",
+    k63SB2: "x1jcbhmk",
+    kLWn49: "x1ezks3f",
+    kogj98: "x1ghz6dp",
+    $$css: true
+  },
+  sm: {
+    kGuDYH: "xltg2ad",
+    $$css: true
+  },
+  md: {
+    kGuDYH: "x1ti3rys",
+    $$css: true
+  },
+  lg: {
+    kGuDYH: "x1fkw5ar",
+    $$css: true
+  },
+  primary: {
+    kMwMTN: "x1y4yzzg",
+    $$css: true
+  },
+  secondary: {
+    kMwMTN: "x17y7oyd",
+    $$css: true
+  },
+  muted: {
+    kMwMTN: "x1mgtvnk",
+    $$css: true
+  }
+};
+export function Text({
+  children,
+  size = 'md',
+  tone = 'primary',
+  ...props
+}) {
+  return /*#__PURE__*/_jsx("p", {
+    ...props,
+    ...stylex.props(styles.base, styles[size], styles[tone]),
+    children: children
+  });
+}

package/dist/components/TextArea.d.ts

@@ -0,0 +1,16 @@
+import type { TextareaHTMLAttributes } from 'react';
+type SharedTextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'children' | 'className' | 'defaultValue' | 'onChange' | 'value'> & {
+    readonly onValueChange?: (value: string) => void;
+};
+type ControlledTextAreaProps = SharedTextAreaProps & {
+    readonly defaultValue?: never;
+    readonly onValueChange: (value: string) => void;
+    readonly value: string;
+};
+type UncontrolledTextAreaProps = SharedTextAreaProps & {
+    readonly defaultValue?: string;
+    readonly value?: never;
+};
+export type TextAreaProps = ControlledTextAreaProps | UncontrolledTextAreaProps;
+export declare function TextArea({ 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, disabled, id, onValueChange, readOnly, required, ...props }: TextAreaProps): import("react").JSX.Element;
+export {};

package/dist/components/TextArea.doc.d.ts

@@ -0,0 +1,11 @@
+export declare const textAreaDoc: {
+    name: string;
+    description: string;
+    props: {
+        name: string;
+        description: string;
+    }[];
+    inheritedProps: string[];
+    example: string;
+    storyId: string;
+};