@misoto22/kioku-ui 0.0.0

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

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

package/dist/components/Heading.doc.js

@@ -0,0 +1,19 @@
+import "../styles/stylex.css";
+export const headingDoc = {
+  name: 'Heading',
+  description: 'Renders a native heading at the requested document level.',
+  props: [{
+    name: 'family',
+    description: 'Optional "interface" family, or explicit "display" family for page-level and editorial headings.'
+  }, {
+    name: 'level',
+    description: 'Required native heading level from 1 through 6.',
+    required: true
+  }, {
+    name: 'size',
+    description: 'Optional semantic size: "page", "section", or "subsection".'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLHeadingElement> except className'],
+  example: '<Heading level={2} size="section">Section title</Heading>',
+  storyId: 'core-heading--default'
+};

package/dist/components/Heading.js

@@ -0,0 +1,46 @@
+import * as stylex from '@stylexjs/stylex';
+import { createElement } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import "../styles/stylex.css";
+const styles = {
+  base: {
+    kMwMTN: "x1y4yzzg",
+    kMv6JI: "x69it5h",
+    k63SB2: "x1sa4947",
+    kLWn49: "x1vslzj6",
+    kogj98: "x1ghz6dp",
+    $$css: true
+  },
+  page: {
+    kGuDYH: "x18wzw5v",
+    $$css: true
+  },
+  section: {
+    kGuDYH: "xfuxfq0",
+    $$css: true
+  },
+  subsection: {
+    kGuDYH: "x1fkw5ar",
+    $$css: true
+  },
+  interface: {
+    kMv6JI: "x69it5h",
+    $$css: true
+  },
+  display: {
+    kMv6JI: "x13fdfvb",
+    $$css: true
+  }
+};
+export function Heading({
+  children,
+  family = 'interface',
+  level,
+  size = 'section',
+  ...props
+}) {
+  return createElement(`h${level}`, {
+    ...props,
+    ...stylex.props(styles.base, styles[size], styles[family])
+  }, children);
+}

package/dist/components/IconButton.d.ts

@@ -0,0 +1,9 @@
+import { type ButtonProps, type ButtonVariant, type ControlSize } from './Button.js';
+/** Props for an icon-only native action button with a required name. */
+export interface IconButtonProps extends Omit<ButtonProps, 'aria-label'> {
+    readonly 'aria-label': string;
+    readonly loading?: boolean;
+    readonly size?: ControlSize;
+    readonly variant?: ButtonVariant;
+}
+export declare function IconButton(props: IconButtonProps): import("react").JSX.Element;

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

@@ -0,0 +1,16 @@
+export declare const iconButtonDoc: {
+    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/IconButton.doc.js

@@ -0,0 +1,22 @@
+import "../styles/stylex.css";
+export const iconButtonDoc = {
+  name: 'IconButton',
+  description: 'Triggers an icon-only action with a required accessible label.',
+  props: [{
+    name: 'aria-label',
+    description: 'Names the icon-only action.',
+    required: true
+  }, {
+    name: 'loading',
+    description: 'Shows progress and disables native activation.'
+  }, {
+    name: 'size',
+    description: 'Selects the fixed square control size.'
+  }, {
+    name: 'variant',
+    description: 'Selects a semantic visual emphasis.'
+  }],
+  inheritedProps: ['ButtonHTMLAttributes<HTMLButtonElement> except aria-label and className'],
+  example: '<IconButton aria-label="Close"><CloseIcon /></IconButton>',
+  storyId: 'core-icon-button--default'
+};

package/dist/components/IconButton.js

@@ -0,0 +1,11 @@
+import { ActionControl } from './Button.js';
+
+/** Props for an icon-only native action button with a required name. */
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function IconButton(props) {
+  return /*#__PURE__*/_jsx(ActionControl, {
+    ...props,
+    iconOnly: true
+  });
+}

package/dist/components/MetricGrid.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface MetricGridItem {
+    readonly detail?: ReactNode;
+    readonly label: ReactNode;
+    readonly value: ReactNode;
+}
+export interface MetricGridProps extends Omit<HTMLAttributes<HTMLDListElement>, 'children' | 'className'> {
+    readonly items: readonly MetricGridItem[];
+}
+export declare function MetricGrid({ items, ...props }: MetricGridProps): import("react").JSX.Element;

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

@@ -0,0 +1,12 @@
+export declare const metricGridDoc: {
+    name: string;
+    description: string;
+    props: {
+        name: string;
+        description: string;
+        required: true;
+    }[];
+    inheritedProps: string[];
+    example: string;
+    storyId: string;
+};

package/dist/components/MetricGrid.doc.js

@@ -0,0 +1,13 @@
+import "../styles/stylex.css";
+export const metricGridDoc = {
+  name: 'MetricGrid',
+  description: 'Presents consumer-supplied labels and values with responsive description-list hierarchy.',
+  props: [{
+    name: 'items',
+    description: 'Supplies metric labels, values, and optional detail.',
+    required: true
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLDListElement> except children and className'],
+  example: '<MetricGrid items={[{label: "Total", value: "24"}]} />',
+  storyId: 'core-metric-grid--default'
+};

package/dist/components/MetricGrid.js

@@ -0,0 +1,37 @@
+import * as stylex from '@stylexjs/stylex';
+import { semanticTokens } from '../authoring.stylex.js';
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const minimumColumnWidth = `calc(${semanticTokens.spacing2xl} + ${semanticTokens.spacing2xl} + ${semanticTokens.spacing2xl} + ${semanticTokens.spacing2xl} + ${semanticTokens.spacing2xl} + ${semanticTokens.spacing2xl} + ${semanticTokens.spacing2xl} + ${semanticTokens.spacing2xl})`;
+export function MetricGrid({
+  items,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx("dl", {
+    ...props,
+    ...{
+      className: "xrvj5dj x4nws80 x1tyajke x1ghz6dp"
+    },
+    children: items.map((item, index) => /*#__PURE__*/_jsxs("div", {
+      ...{
+        className: "x1ixvsy6 xilcjya x7xrhi9 x1jnjmdy xpxnlqs xrvj5dj x1iwn5ga x1cfciu7"
+      },
+      children: [/*#__PURE__*/_jsx("dt", {
+        ...{
+          className: "x17y7oyd xj0sio9 xltg2ad"
+        },
+        children: item.label
+      }), /*#__PURE__*/_jsx("dd", {
+        ...{
+          className: "x1y4yzzg x69it5h xfuxfq0 x1sa4947 x1ghz6dp"
+        },
+        children: item.value
+      }), item.detail ? /*#__PURE__*/_jsx("dd", {
+        ...{
+          className: "x1mgtvnk xj0sio9 xltg2ad x1ghz6dp"
+        },
+        children: item.detail
+      }) : null]
+    }, index))
+  });
+}

package/dist/components/Section.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'react';
+import type { Space } from './Stack.js';
+export interface SectionProps extends Omit<HTMLAttributes<HTMLElement>, 'className'> {
+    readonly padding?: Space;
+}
+export declare function Section({ children, padding, ...props }: SectionProps): import("react").JSX.Element;

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

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

package/dist/components/Section.doc.js

@@ -0,0 +1,12 @@
+import "../styles/stylex.css";
+export const sectionDoc = {
+  name: 'Section',
+  description: 'Groups related content in a native section landmark.',
+  props: [{
+    name: 'padding',
+    description: 'Optional semantic block-padding token.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLElement> except className'],
+  example: '<Section aria-label="Preferences"><Text>Content</Text></Section>',
+  storyId: 'core-section--default'
+};

package/dist/components/Section.js

@@ -0,0 +1,49 @@
+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 = {
+  paddingXs: {
+    k8WAf4: "x10y07nz",
+    $$css: true
+  },
+  paddingSm: {
+    k8WAf4: "xoeao9w",
+    $$css: true
+  },
+  paddingMd: {
+    k8WAf4: "x1lr58ck",
+    $$css: true
+  },
+  paddingLg: {
+    k8WAf4: "x17uk85o",
+    $$css: true
+  },
+  paddingXl: {
+    k8WAf4: "x18wayz0",
+    $$css: true
+  },
+  padding2xl: {
+    k8WAf4: "x3x1fh3",
+    $$css: true
+  }
+};
+const paddings = {
+  xs: styles.paddingXs,
+  sm: styles.paddingSm,
+  md: styles.paddingMd,
+  lg: styles.paddingLg,
+  xl: styles.paddingXl,
+  '2xl': styles.padding2xl
+};
+export function Section({
+  children,
+  padding = 'xl',
+  ...props
+}) {
+  return /*#__PURE__*/_jsx("section", {
+    ...props,
+    ...stylex.props(paddings[padding]),
+    children: children
+  });
+}

package/dist/components/SegmentedControl.d.ts

@@ -0,0 +1,31 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export interface SegmentedControlOption<Value extends string = string> {
+    readonly disabled?: boolean;
+    readonly label: ReactNode;
+    readonly value: Value;
+}
+type SharedSegmentedControlProps<Value extends string> = Omit<HTMLAttributes<HTMLDivElement>, 'aria-label' | 'aria-labelledby' | 'className' | 'defaultValue' | 'onChange'> & {
+    readonly disabled?: boolean;
+    readonly onValueChange?: (value: Value) => void;
+    readonly options: readonly SegmentedControlOption<Value>[];
+    readonly orientation?: 'horizontal' | 'vertical';
+};
+type SegmentedControlAccessibleName = {
+    readonly 'aria-label': string;
+    readonly 'aria-labelledby'?: string;
+} | {
+    readonly 'aria-label'?: string;
+    readonly 'aria-labelledby': string;
+};
+type ControlledSegmentedControlProps<Value extends string> = SharedSegmentedControlProps<Value> & {
+    readonly defaultValue?: never;
+    readonly onValueChange: (value: Value) => void;
+    readonly value: Value;
+};
+type UncontrolledSegmentedControlProps<Value extends string> = SharedSegmentedControlProps<Value> & {
+    readonly defaultValue?: Value;
+    readonly value?: never;
+};
+export type SegmentedControlProps<Value extends string = string> = (ControlledSegmentedControlProps<Value> | UncontrolledSegmentedControlProps<Value>) & SegmentedControlAccessibleName;
+export declare function SegmentedControl<Value extends string = string>({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, defaultValue, disabled, onValueChange, options, orientation, value, ...props }: SegmentedControlProps<Value>): import("react").JSX.Element;
+export {};

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

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

package/dist/components/SegmentedControl.doc.js

@@ -0,0 +1,34 @@
+import "../styles/stylex.css";
+export const segmentedControlDoc = {
+  name: 'SegmentedControl',
+  description: 'Chooses one supplied option with roving radio-group keyboard behavior.',
+  props: [{
+    name: 'aria-label',
+    description: 'Directly names the radiogroup when no external label is used.'
+  }, {
+    name: 'aria-labelledby',
+    description: 'References the element that names the radiogroup.'
+  }, {
+    name: 'defaultValue',
+    description: 'Sets the initial value for uncontrolled selection while preserving roving focus.'
+  }, {
+    name: 'disabled',
+    description: 'Disables every option and removes the group from tab order.'
+  }, {
+    name: 'onValueChange',
+    description: 'Receives the next value selected by pointer or keyboard.'
+  }, {
+    name: 'options',
+    description: 'Supplies labels, values, and disabled states.',
+    required: true
+  }, {
+    name: 'orientation',
+    description: 'Selects horizontal or vertical arrow-key behavior.'
+  }, {
+    name: 'value',
+    description: 'Controls the current selected value; pointer and keyboard intent is reported through onValueChange.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLDivElement> except aria-label, aria-labelledby, className, defaultValue, and onChange'],
+  example: '<SegmentedControl aria-label="Alignment" options={options} />',
+  storyId: 'core-segmented-control--default'
+};

package/dist/components/SegmentedControl.js

@@ -0,0 +1,108 @@
+import * as stylex from '@stylexjs/stylex';
+import { useRef, useState } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function SegmentedControl({
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  defaultValue,
+  disabled = false,
+  onValueChange,
+  options,
+  orientation = 'horizontal',
+  value,
+  ...props
+}) {
+  if (!ariaLabel?.trim() && !ariaLabelledBy?.trim()) {
+    throw new Error('SegmentedControl requires an accessible name');
+  }
+  const firstEnabledValue = options.find(option => !option.disabled)?.value;
+  const [internalValue, setInternalValue] = useState(defaultValue ?? firstEnabledValue);
+  const requestedValue = value ?? internalValue;
+  const selectedValue = options.some(option => option.value === requestedValue && !option.disabled) ? requestedValue : firstEnabledValue;
+  const optionRefs = useRef(new Map());
+  const enabledOptions = options.filter(option => !disabled && !option.disabled);
+  function select(nextValue) {
+    if (value === undefined) {
+      setInternalValue(nextValue);
+    }
+    onValueChange?.(nextValue);
+  }
+  function moveSelection(currentValue, direction) {
+    if (enabledOptions.length === 0) {
+      return;
+    }
+    const currentIndex = enabledOptions.findIndex(option => option.value === currentValue);
+    let nextIndex;
+    if (direction === 'first') {
+      nextIndex = 0;
+    } else if (direction === 'last') {
+      nextIndex = enabledOptions.length - 1;
+    } else if (direction === 'next') {
+      nextIndex = (currentIndex + 1 + enabledOptions.length) % enabledOptions.length;
+    } else {
+      nextIndex = (currentIndex - 1 + enabledOptions.length) % enabledOptions.length;
+    }
+    const nextOption = enabledOptions[nextIndex];
+    if (!nextOption) {
+      return;
+    }
+    select(nextOption.value);
+    optionRefs.current.get(nextOption.value)?.focus();
+  }
+  function handleKeyDown(event, currentValue) {
+    const nextKey = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
+    const previousKey = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
+    const direction = event.key === nextKey ? 'next' : event.key === previousKey ? 'previous' : event.key === 'Home' ? 'first' : event.key === 'End' ? 'last' : undefined;
+    if (direction) {
+      event.preventDefault();
+      moveSelection(currentValue, direction);
+    }
+  }
+  return /*#__PURE__*/_jsx("div", {
+    ...props,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-disabled": disabled || undefined,
+    "aria-orientation": orientation,
+    role: "radiogroup",
+    ...{
+      0: {
+        className: "xavu78a x8kq9my x3nfvp2 x1iwn5ga x1tkv3ku"
+      },
+      1: {
+        className: "xavu78a x8kq9my x3nfvp2 x1iwn5ga x1tkv3ku xdt5ytf"
+      }
+    }[!!(orientation === 'vertical') << 0],
+    children: options.map(option => {
+      const isDisabled = disabled || Boolean(option.disabled);
+      const isSelected = option.value === selectedValue;
+      return /*#__PURE__*/_jsx("button", {
+        "aria-checked": isSelected,
+        disabled: isDisabled,
+        onClick: () => select(option.value),
+        onKeyDown: event => handleKeyDown(event, option.value),
+        ref: element => {
+          if (element) {
+            optionRefs.current.set(option.value, element);
+          } else {
+            optionRefs.current.delete(option.value);
+          }
+        },
+        role: "radio",
+        tabIndex: isSelected && !isDisabled ? 0 : -1,
+        ...{
+          0: {
+            className: "xjbqb8w x1l6hjkl xng3xce x9f619 x1y4yzzg xj0sio9 x1ti3rys xmm8wyw x10y07nz x1qtbwip x609gy3 x15meki4 xz32tfx x1p22nma x17lds6u xbo0ryh x1ipqx2d"
+          },
+          1: {
+            className: "x1l6hjkl xng3xce x9f619 xj0sio9 x1ti3rys xmm8wyw x10y07nz x1qtbwip x609gy3 x15meki4 xz32tfx x1p22nma x17lds6u x40o0ze x1elh21b x1y4yzzg"
+          }
+        }[!!isSelected << 0],
+        type: "button",
+        children: option.label
+      }, option.value);
+    })
+  });
+}

package/dist/components/Skeleton.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'react';
+export interface SkeletonProps extends Omit<HTMLAttributes<HTMLDivElement>, 'aria-label' | 'children' | 'className' | 'role'> {
+    readonly label?: string;
+}
+export declare function Skeleton({ label, ...props }: SkeletonProps): import("react").JSX.Element;

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

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

package/dist/components/Skeleton.doc.js

@@ -0,0 +1,12 @@
+import "../styles/stylex.css";
+export const skeletonDoc = {
+  name: 'Skeleton',
+  description: 'Displays a decorative or explicitly labelled loading placeholder with a static reduced-motion fallback.',
+  props: [{
+    name: 'label',
+    description: 'Optionally announces what is loading.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLDivElement> except aria-label, children, className, and role'],
+  example: '<Skeleton label="Loading summary" />',
+  storyId: 'core-skeleton--default'
+};

package/dist/components/Skeleton.js

@@ -0,0 +1,20 @@
+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 pulse = "x1vfr86i-B";
+export function Skeleton({
+  label,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx("div", {
+    ...props,
+    "aria-busy": label ? 'true' : undefined,
+    "aria-hidden": label ? undefined : 'true',
+    "aria-label": label,
+    role: label ? 'status' : undefined,
+    ...{
+      className: "xpz12be xslpo9u xa4qsjk x125lowv x1aquc0h xsus3lq xavu78a x8kq9my xmm8wyw xh8yej3"
+    }
+  });
+}

package/dist/components/Spinner.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'react';
+export interface SpinnerProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'aria-label' | 'children' | 'className' | 'role'> {
+    readonly label: string;
+}
+export declare function Spinner({ label, ...props }: SpinnerProps): import("react").JSX.Element;
+export declare function SpinnerVisual(): import("react").JSX.Element;

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

@@ -0,0 +1,12 @@
+export declare const spinnerDoc: {
+    name: string;
+    description: string;
+    props: {
+        name: string;
+        description: string;
+        required: true;
+    }[];
+    inheritedProps: string[];
+    example: string;
+    storyId: string;
+};

package/dist/components/Spinner.doc.js

@@ -0,0 +1,13 @@
+import "../styles/stylex.css";
+export const spinnerDoc = {
+  name: 'Spinner',
+  description: 'Announces indeterminate progress with a required accessible label and a static reduced-motion fallback.',
+  props: [{
+    name: 'label',
+    description: 'Names the operation in progress.',
+    required: true
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLSpanElement> except aria-label, children, className, and role'],
+  example: '<Spinner label="Loading items" />',
+  storyId: 'core-spinner--default'
+};

package/dist/components/Spinner.js

@@ -0,0 +1,25 @@
+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 spin = "x1fy8ia8-B";
+export function Spinner({
+  label,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx("span", {
+    ...props,
+    "aria-busy": "true",
+    "aria-label": label,
+    role: "status",
+    children: /*#__PURE__*/_jsx(SpinnerVisual, {})
+  });
+}
+export function SpinnerVisual() {
+  return /*#__PURE__*/_jsx("span", {
+    "aria-hidden": "true",
+    ...{
+      className: "xslpo9u xa4qsjk xpedhrg x1aquc0h xsus3lq x11a5md6 x2nywlj xnpwncj x1jnjmdy xpxnlqs x1rg5ohu x7s8d8b x1psh5v9"
+    }
+  });
+}

package/dist/components/Stack.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'react';
+export type Space = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export interface StackProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
+    readonly gap?: Space;
+    readonly align?: 'stretch' | 'start' | 'center' | 'end';
+}
+export declare function Stack({ gap, align, children, ...props }: StackProps): import("react").JSX.Element;

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

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

package/dist/components/Stack.doc.js

@@ -0,0 +1,15 @@
+import "../styles/stylex.css";
+export const stackDoc = {
+  name: 'Stack',
+  description: 'Arranges children vertically with semantic spacing.',
+  props: [{
+    name: 'gap',
+    description: 'Optional semantic gap token.'
+  }, {
+    name: 'align',
+    description: 'Optional cross-axis alignment.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLDivElement> except className'],
+  example: '<Stack gap="md"><Text>First</Text><Text>Second</Text></Stack>',
+  storyId: 'core-stack--default'
+};