@misoto22/kioku-ui 0.0.0 → 0.2.0

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

@@ -1,16 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,108 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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'
-};

package/dist/components/StatusDot.d.ts

@@ -1,8 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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.js

@@ -1,94 +0,0 @@
-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'
-};