@misoto22/kioku-ui 0.0.0

package/dist/Table/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/Table/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/Table/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/Table/index.d.ts

@@ -0,0 +1 @@
+export { Table, TableBody, TableCaption, TableCell, TableHead, TableHeaderCell, TableRow, type TableBodyProps, type TableCaptionProps, type TableCellProps, type TableDensity, type TableDividers, type TableHeadProps, type TableHeaderCellProps, type TableProps, type TableRowProps, } from './Table.js';

package/dist/Table/index.js

@@ -0,0 +1,2 @@
+import "../styles/stylex.css";
+export { Table, TableBody, TableCaption, TableCell, TableHead, TableHeaderCell, TableRow } from './Table.js';

package/dist/Text/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/Text/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/Text/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/Text/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/Text/index.d.ts

@@ -0,0 +1 @@
+export { Text, type TextProps, type TextTone } from './Text.js';

package/dist/Text/index.js

@@ -0,0 +1,2 @@
+import "../styles/stylex.css";
+export { Text } from './Text.js';

package/dist/TextArea/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/TextArea/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;
+};

package/dist/TextArea/TextArea.doc.js

@@ -0,0 +1,30 @@
+import "../styles/stylex.css";
+export const textAreaDoc = {
+  name: 'TextArea',
+  description: 'Collects multiple lines of controlled or uncontrolled text.',
+  props: [{
+    name: 'aria-invalid',
+    description: 'Exposes invalid semantics and danger styling; an explicit value overrides Field status inference.'
+  }, {
+    name: 'defaultValue',
+    description: 'Sets the initial value for an uncontrolled text area.'
+  }, {
+    name: 'disabled',
+    description: 'Disables editing and native form interaction.'
+  }, {
+    name: 'onValueChange',
+    description: 'Receives the current string value after input.'
+  }, {
+    name: 'readOnly',
+    description: 'Keeps the value legible while preventing edits.'
+  }, {
+    name: 'required',
+    description: 'Sets native required semantics; an explicit value overrides the enclosing Field necessity.'
+  }, {
+    name: 'value',
+    description: 'Controls the current value when onValueChange is supplied.'
+  }],
+  inheritedProps: ['TextareaHTMLAttributes<HTMLTextAreaElement> except children, className, defaultValue, onChange, and value'],
+  example: '<Field label="Notes"><TextArea /></Field>',
+  storyId: 'core-text-area--default'
+};

package/dist/TextArea/TextArea.js

@@ -0,0 +1,47 @@
+import * as stylex from '@stylexjs/stylex';
+import { semanticTokens } from '../authoring.stylex.js';
+import { useFieldControl } from '../Field/index.js';
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function TextArea({
+  'aria-describedby': ariaDescribedBy,
+  'aria-invalid': ariaInvalid,
+  disabled,
+  id,
+  onValueChange,
+  readOnly,
+  required,
+  ...props
+}) {
+  const field = useFieldControl();
+  const describedBy = [field?.describedBy, ariaDescribedBy].filter(Boolean).join(' ') || undefined;
+  const resolvedInvalid = ariaInvalid ?? field?.invalid;
+  const isInvalid = resolvedInvalid !== undefined && resolvedInvalid !== false && resolvedInvalid !== 'false';
+  function handleChange(event) {
+    onValueChange?.(event.currentTarget.value);
+  }
+  return /*#__PURE__*/_jsx("textarea", {
+    ...props,
+    "aria-describedby": describedBy,
+    "aria-invalid": resolvedInvalid,
+    disabled: disabled,
+    id: field?.controlId ?? id,
+    onChange: handleChange,
+    readOnly: readOnly,
+    required: required ?? field?.required,
+    ...{
+      0: {
+        className: "x1ixvsy6 x9f619 xilcjya x8kq9my x1jnjmdy xpxnlqs x1y4yzzg xj0sio9 x1ti3rys x1ezks3f x1edz59j x10y07nz x1qtbwip x1e4qbc8 x48zea8 x1oulntk x609gy3 xn50xp2 x15meki4 xz32tfx x1p22nma x17lds6u xnhf8v xyo1xaz"
+      },
+      2: {
+        className: "x9f619 xilcjya x8kq9my x1jnjmdy xpxnlqs xj0sio9 x1ti3rys x1ezks3f x1edz59j x10y07nz x1qtbwip x1e4qbc8 x48zea8 x1oulntk x609gy3 xn50xp2 x15meki4 xz32tfx x1p22nma x17lds6u xnhf8v xyo1xaz xavu78a x1y4yzzg"
+      },
+      1: {
+        className: "x1ixvsy6 x9f619 x8kq9my x1jnjmdy xpxnlqs x1y4yzzg xj0sio9 x1ti3rys x1ezks3f x1edz59j x10y07nz x1qtbwip x1e4qbc8 x48zea8 x1oulntk x609gy3 x15meki4 xz32tfx x1p22nma x17lds6u xcf5wgx x1v4z90s xgozkua x1r1toob"
+      },
+      3: {
+        className: "x9f619 x8kq9my x1jnjmdy xpxnlqs xj0sio9 x1ti3rys x1ezks3f x1edz59j x10y07nz x1qtbwip x1e4qbc8 x48zea8 x1oulntk x609gy3 x15meki4 xz32tfx x1p22nma x17lds6u xavu78a x1y4yzzg xcf5wgx x1v4z90s xgozkua x1r1toob"
+      }
+    }[!!(readOnly && !disabled) << 1 | !!(isInvalid && !disabled) << 0]
+  });
+}

package/dist/TextArea/index.d.ts

@@ -0,0 +1 @@
+export { TextArea, type TextAreaProps } from './TextArea.js';

package/dist/TextArea/index.js

@@ -0,0 +1,2 @@
+import "../styles/stylex.css";
+export { TextArea } from './TextArea.js';

package/dist/TextInput/TextInput.d.ts

@@ -0,0 +1,16 @@
+import type { InputHTMLAttributes } from 'react';
+type SharedTextInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'children' | 'className' | 'defaultValue' | 'onChange' | 'value'> & {
+    readonly onValueChange?: (value: string) => void;
+};
+type ControlledTextInputProps = SharedTextInputProps & {
+    readonly defaultValue?: never;
+    readonly onValueChange: (value: string) => void;
+    readonly value: string;
+};
+type UncontrolledTextInputProps = SharedTextInputProps & {
+    readonly defaultValue?: string;
+    readonly value?: never;
+};
+export type TextInputProps = ControlledTextInputProps | UncontrolledTextInputProps;
+export declare function TextInput({ 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, disabled, id, onValueChange, readOnly, required, type, ...props }: TextInputProps): import("react").JSX.Element;
+export {};

package/dist/TextInput/TextInput.doc.d.ts

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

package/dist/TextInput/TextInput.doc.js

@@ -0,0 +1,30 @@
+import "../styles/stylex.css";
+export const textInputDoc = {
+  name: 'TextInput',
+  description: 'Collects one line of controlled or uncontrolled text.',
+  props: [{
+    name: 'aria-invalid',
+    description: 'Exposes invalid semantics and danger styling; an explicit value overrides Field status inference.'
+  }, {
+    name: 'defaultValue',
+    description: 'Sets the initial value for an uncontrolled input.'
+  }, {
+    name: 'disabled',
+    description: 'Disables editing and native form interaction.'
+  }, {
+    name: 'onValueChange',
+    description: 'Receives the current string value after input.'
+  }, {
+    name: 'readOnly',
+    description: 'Keeps the value legible while preventing edits.'
+  }, {
+    name: 'required',
+    description: 'Sets native required semantics; an explicit value overrides the enclosing Field necessity.'
+  }, {
+    name: 'value',
+    description: 'Controls the current value when onValueChange is supplied.'
+  }],
+  inheritedProps: ['InputHTMLAttributes<HTMLInputElement> except children, className, defaultValue, onChange, and value'],
+  example: '<Field label="Name"><TextInput defaultValue="" /></Field>',
+  storyId: 'core-text-input--default'
+};