@misoto22/kioku-ui 0.0.0

package/src/Button/Button.doc.ts

@@ -0,0 +1,17 @@
+import type {ComponentDoc} from '../docs/types.js';
+
+export const buttonDoc = {
+  name: 'Button',
+  description: 'Triggers an action through native button semantics.',
+  props: [
+    {
+      name: 'loading',
+      description: 'Shows progress and disables native activation.',
+    },
+    {name: 'size', description: 'Selects the fixed control height.'},
+    {name: 'variant', description: 'Selects a semantic visual emphasis.'},
+  ],
+  inheritedProps: ['ButtonHTMLAttributes<HTMLButtonElement> except className'],
+  example: '<Button onClick={save}>Save</Button>',
+  storyId: 'core-button--default',
+} satisfies ComponentDoc;

package/src/Button/Button.tsx

@@ -0,0 +1,176 @@
+import * as stylex from '@stylexjs/stylex';
+import type {ButtonHTMLAttributes} from 'react';
+
+import {semanticTokens} from '../authoring.stylex.js';
+import {SpinnerVisual} from '../Spinner/index.js';
+
+const styles = stylex.create({
+  base: {
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    borderRadius: semanticTokens.radiusElement,
+    borderStyle: semanticTokens.borderStyle,
+    borderWidth: semanticTokens.borderWidth,
+    display: 'inline-flex',
+    fontFamily: semanticTokens.fontFamilyBody,
+    fontWeight: semanticTokens.fontWeightMedium,
+    gap: semanticTokens.spacingSm,
+    justifyContent: 'center',
+    lineHeight: semanticTokens.lineHeightBody,
+    position: 'relative',
+    ':disabled': {
+      backgroundColor: semanticTokens.colorDisabledSurface,
+      borderColor: semanticTokens.borderDisabled,
+      color: semanticTokens.colorDisabledText,
+    },
+    ':focus-visible': {
+      outlineColor: semanticTokens.colorFocus,
+      outlineOffset: semanticTokens.focusOffset,
+      outlineStyle: semanticTokens.borderStyle,
+      outlineWidth: semanticTokens.focusWidth,
+    },
+  },
+  sm: {
+    fontSize: semanticTokens.fontSizeSm,
+    height: semanticTokens.sizeControlSm,
+    paddingInline: semanticTokens.spacingSm,
+  },
+  md: {
+    fontSize: semanticTokens.fontSizeMd,
+    height: semanticTokens.sizeControlMd,
+    paddingInline: semanticTokens.spacingMd,
+  },
+  lg: {
+    fontSize: semanticTokens.fontSizeMd,
+    height: semanticTokens.sizeControlLg,
+    paddingInline: semanticTokens.spacingLg,
+  },
+  primary: {
+    backgroundColor: semanticTokens.colorAccent,
+    borderColor: semanticTokens.colorAccent,
+    color: semanticTokens.colorTextOnAccent,
+    ':hover:not(:disabled):not(:active)': {
+      backgroundColor: semanticTokens.colorAccentHover,
+      borderColor: semanticTokens.colorAccentHover,
+    },
+    ':active:not(:disabled)': {
+      backgroundColor: semanticTokens.colorAccentActive,
+      borderColor: semanticTokens.colorAccentActive,
+    },
+  },
+  secondary: {
+    backgroundColor: semanticTokens.colorSurface,
+    borderColor: semanticTokens.borderStrong,
+    color: semanticTokens.colorText,
+    ':hover:not(:disabled):not(:active)': {
+      backgroundColor: semanticTokens.colorOverlayHover,
+      borderColor: semanticTokens.borderInteractive,
+    },
+    ':active:not(:disabled)': {
+      backgroundColor: semanticTokens.colorOverlayActive,
+      borderColor: semanticTokens.borderInteractive,
+    },
+  },
+  ghost: {
+    backgroundColor: 'transparent',
+    borderColor: 'transparent',
+    color: semanticTokens.colorText,
+    ':hover:not(:disabled):not(:active)': {
+      backgroundColor: semanticTokens.colorOverlayHover,
+    },
+    ':active:not(:disabled)': {
+      backgroundColor: semanticTokens.colorOverlayActive,
+    },
+  },
+  destructive: {
+    backgroundColor: semanticTokens.statusDangerSurface,
+    borderColor: semanticTokens.statusDangerText,
+    color: semanticTokens.statusDangerText,
+    ':hover:not(:disabled):not(:active)': {
+      backgroundImage: `linear-gradient(${semanticTokens.colorOverlayHover}, ${semanticTokens.colorOverlayHover})`,
+    },
+    ':active:not(:disabled)': {
+      backgroundImage: `linear-gradient(${semanticTokens.colorOverlayActive}, ${semanticTokens.colorOverlayActive})`,
+    },
+  },
+  loading: {cursor: 'progress'},
+  iconOnly: {paddingInline: 0},
+  iconSm: {width: semanticTokens.sizeControlSm},
+  iconMd: {width: semanticTokens.sizeControlMd},
+  iconLg: {width: semanticTokens.sizeControlLg},
+  iconHitTarget: {
+    '::before': {
+      content: '',
+      height: semanticTokens.sizeHitTarget,
+      insetBlockStart: '50%',
+      insetInlineStart: '50%',
+      position: 'absolute',
+      transform: 'translate(-50%, -50%)',
+      width: semanticTokens.sizeHitTarget,
+    },
+  },
+});
+
+const iconSizes = {
+  sm: styles.iconSm,
+  md: styles.iconMd,
+  lg: styles.iconLg,
+} satisfies Record<ControlSize, (typeof styles)[keyof typeof styles]>;
+
+/** Visual sizes shared by native action controls. */
+export type ControlSize = 'sm' | 'md' | 'lg';
+
+/** Semantic emphasis variants shared by native action controls. */
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'destructive';
+
+/** Props for a text-labelled native action button. */
+export interface ButtonProps extends Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  'className'
+> {
+  readonly loading?: boolean;
+  readonly size?: ControlSize;
+  readonly variant?: ButtonVariant;
+}
+
+interface ActionControlProps extends ButtonProps {
+  readonly iconOnly?: boolean;
+}
+
+/** @internal Shared native implementation for Button and IconButton. */
+export function ActionControl({
+  'aria-busy': ariaBusy,
+  children,
+  disabled,
+  iconOnly = false,
+  loading = false,
+  size = 'md',
+  type = 'button',
+  variant = 'primary',
+  ...props
+}: ActionControlProps) {
+  return (
+    <button
+      {...props}
+      aria-busy={loading ? 'true' : ariaBusy}
+      disabled={disabled || loading}
+      {...stylex.props(
+        styles.base,
+        styles[size],
+        styles[variant],
+        loading && styles.loading,
+        iconOnly && styles.iconOnly,
+        iconOnly && iconSizes[size],
+        iconOnly && styles.iconHitTarget,
+      )}
+      type={type}
+    >
+      {loading ? <SpinnerVisual /> : null}
+      {iconOnly && loading ? null : children}
+    </button>
+  );
+}
+
+export function Button(props: ButtonProps) {
+  return <ActionControl {...props} />;
+}

package/src/Button/index.ts

@@ -0,0 +1,7 @@
+export {
+  ActionControl,
+  Button,
+  type ButtonProps,
+  type ButtonVariant,
+  type ControlSize,
+} from './Button.js';

package/src/Card/Card.doc.ts

@@ -0,0 +1,22 @@
+import type {ComponentDoc} from '../docs/types.js';
+
+export const cardDoc = {
+  name: 'Card',
+  description:
+    'Groups self-contained content in a token-backed article surface.',
+  props: [
+    {
+      name: 'children',
+      description: 'The self-contained article content.',
+    },
+    {
+      name: 'elevation',
+      description:
+        'Optional boundary treatment: "none" uses a border; "low" and "medium" use only the matching elevation.',
+    },
+  ],
+  inheritedProps: ['HTMLAttributes<HTMLElement> except className and children'],
+  example:
+    '<Card aria-label="Summary" elevation="none"><Text>Content</Text></Card>',
+  storyId: 'core-card--default',
+} satisfies ComponentDoc;

package/src/Card/Card.tsx

@@ -0,0 +1,44 @@
+import * as stylex from '@stylexjs/stylex';
+import type {HTMLAttributes} from 'react';
+
+import {semanticTokens} from '../authoring.stylex.js';
+
+const styles = stylex.create({
+  base: {
+    backgroundColor: semanticTokens.colorSurface,
+    borderRadius: semanticTokens.radiusContainer,
+    color: semanticTokens.colorText,
+    padding: semanticTokens.spacingXl,
+  },
+  none: {
+    borderColor: semanticTokens.borderDefault,
+    borderStyle: semanticTokens.borderStyle,
+    borderWidth: semanticTokens.borderWidth,
+    boxShadow: 'none',
+  },
+  low: {
+    borderStyle: 'none',
+    boxShadow: semanticTokens.elevationLow,
+  },
+  medium: {
+    borderStyle: 'none',
+    boxShadow: semanticTokens.elevationMedium,
+  },
+});
+
+export type CardElevation = 'none' | 'low' | 'medium';
+
+export interface CardProps extends Omit<
+  HTMLAttributes<HTMLElement>,
+  'className'
+> {
+  readonly elevation?: CardElevation;
+}
+
+export function Card({children, elevation = 'none', ...props}: CardProps) {
+  return (
+    <article {...props} {...stylex.props(styles.base, styles[elevation])}>
+      {children}
+    </article>
+  );
+}

package/src/Card/index.ts

@@ -0,0 +1 @@
+export {Card, type CardElevation, type CardProps} from './Card.js';

package/src/CardFooter/CardFooter.doc.ts

@@ -0,0 +1,12 @@
+import type {ComponentDoc} from '../docs/types.js';
+
+export const cardFooterDoc = {
+  name: 'CardFooter',
+  description:
+    'Provides a padded native footer with an inward divider when composed directly inside a Card.',
+  props: [{name: 'children', description: 'The footer content.'}],
+  inheritedProps: ['HTMLAttributes<HTMLElement> except className and children'],
+  example:
+    '<Card><Text>Content</Text><CardFooter><Text>Updated now</Text></CardFooter></Card>',
+  storyId: 'core-card--card-footer',
+} satisfies ComponentDoc;

package/src/CardFooter/CardFooter.tsx

@@ -0,0 +1,27 @@
+import * as stylex from '@stylexjs/stylex';
+import type {HTMLAttributes} from 'react';
+
+import {semanticTokens} from '../authoring.stylex.js';
+
+const styles = stylex.create({
+  base: {
+    borderBlockStartColor: semanticTokens.borderDefault,
+    borderBlockStartStyle: semanticTokens.borderStyle,
+    borderBlockStartWidth: semanticTokens.borderWidth,
+    marginBlockEnd: `calc(-1 * ${semanticTokens.spacingXl})`,
+    marginBlockStart: semanticTokens.spacingXl,
+    marginInline: `calc(-1 * ${semanticTokens.spacingXl})`,
+    paddingBlock: semanticTokens.spacingLg,
+    paddingInline: semanticTokens.spacingXl,
+  },
+});
+
+export type CardFooterProps = Omit<HTMLAttributes<HTMLElement>, 'className'>;
+
+export function CardFooter({children, ...props}: CardFooterProps) {
+  return (
+    <footer {...props} {...stylex.props(styles.base)}>
+      {children}
+    </footer>
+  );
+}

package/src/CardFooter/index.ts

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

package/src/CardHeader/CardHeader.doc.ts

@@ -0,0 +1,12 @@
+import type {ComponentDoc} from '../docs/types.js';
+
+export const cardHeaderDoc = {
+  name: 'CardHeader',
+  description:
+    'Provides a padded native header with an inward divider when composed directly inside a Card.',
+  props: [{name: 'children', description: 'The header content.'}],
+  inheritedProps: ['HTMLAttributes<HTMLElement> except className and children'],
+  example:
+    '<Card><CardHeader><Heading level={2}>Card title</Heading></CardHeader><Text>Content</Text></Card>',
+  storyId: 'core-card--card-header',
+} satisfies ComponentDoc;

package/src/CardHeader/CardHeader.tsx

@@ -0,0 +1,27 @@
+import * as stylex from '@stylexjs/stylex';
+import type {HTMLAttributes} from 'react';
+
+import {semanticTokens} from '../authoring.stylex.js';
+
+const styles = stylex.create({
+  base: {
+    borderBlockEndColor: semanticTokens.borderDefault,
+    borderBlockEndStyle: semanticTokens.borderStyle,
+    borderBlockEndWidth: semanticTokens.borderWidth,
+    marginBlockEnd: semanticTokens.spacingXl,
+    marginBlockStart: `calc(-1 * ${semanticTokens.spacingXl})`,
+    marginInline: `calc(-1 * ${semanticTokens.spacingXl})`,
+    paddingBlock: semanticTokens.spacingLg,
+    paddingInline: semanticTokens.spacingXl,
+  },
+});
+
+export type CardHeaderProps = Omit<HTMLAttributes<HTMLElement>, 'className'>;
+
+export function CardHeader({children, ...props}: CardHeaderProps) {
+  return (
+    <header {...props} {...stylex.props(styles.base)}>
+      {children}
+    </header>
+  );
+}

package/src/CardHeader/index.ts

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

package/src/Center/Center.doc.ts

@@ -0,0 +1,12 @@
+import type {ComponentDoc} from '../docs/types.js';
+
+export const centerDoc = {
+  name: 'Center',
+  description: 'Centers child content on both layout axes.',
+  props: [{name: 'children', description: 'The content to center.'}],
+  inheritedProps: [
+    'HTMLAttributes<HTMLDivElement> except className and children',
+  ],
+  example: '<Center><Text>Centered content</Text></Center>',
+  storyId: 'core-center--default',
+} satisfies ComponentDoc;

package/src/Center/Center.tsx

@@ -0,0 +1,20 @@
+import * as stylex from '@stylexjs/stylex';
+import type {HTMLAttributes} from 'react';
+
+const styles = stylex.create({
+  base: {
+    alignItems: 'center',
+    display: 'flex',
+    justifyContent: 'center',
+  },
+});
+
+export type CenterProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
+
+export function Center({children, ...props}: CenterProps) {
+  return (
+    <div {...props} {...stylex.props(styles.base)}>
+      {children}
+    </div>
+  );
+}

package/src/Center/index.ts

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

package/src/Divider/Divider.doc.ts

@@ -0,0 +1,12 @@
+import type {ComponentDoc} from '../docs/types.js';
+
+export const dividerDoc = {
+  name: 'Divider',
+  description: 'Renders a token-backed native horizontal separator.',
+  props: [
+    {name: 'aria-label', description: 'Optional accessible separator label.'},
+  ],
+  inheritedProps: ['HTMLAttributes<HTMLHRElement> except className'],
+  example: '<Divider aria-label="Separates summary from details" />',
+  storyId: 'core-divider--default',
+} satisfies ComponentDoc;

package/src/Divider/Divider.tsx

@@ -0,0 +1,20 @@
+import * as stylex from '@stylexjs/stylex';
+import type {HTMLAttributes} from 'react';
+
+import {semanticTokens} from '../authoring.stylex.js';
+
+const styles = stylex.create({
+  base: {
+    border: 0,
+    borderBlockStartColor: semanticTokens.borderDefault,
+    borderBlockStartStyle: semanticTokens.borderStyle,
+    borderBlockStartWidth: semanticTokens.borderWidth,
+    margin: 0,
+  },
+});
+
+export type DividerProps = Omit<HTMLAttributes<HTMLHRElement>, 'className'>;
+
+export function Divider(props: DividerProps) {
+  return <hr {...props} {...stylex.props(styles.base)} />;
+}

package/src/Divider/index.ts

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

package/src/EmptyState/EmptyState.doc.ts

@@ -0,0 +1,31 @@
+import type {ComponentDoc} from '../docs/types.js';
+
+export const emptyStateDoc = {
+  name: 'EmptyState',
+  description:
+    'Presents an announced empty result with optional detail and action.',
+  props: [
+    {
+      name: 'action',
+      description: 'Provides an optional consumer-owned recovery action.',
+    },
+    {
+      name: 'detail',
+      description: 'Provides optional supporting empty-state content.',
+    },
+    {
+      name: 'size',
+      description: 'Adjusts container padding and grouping rhythm.',
+    },
+    {name: 'title', description: 'Names the empty state.', required: true},
+    {
+      name: 'visual',
+      description:
+        'Provides optional consumer-owned visual content before the copy; consumers own its accessible semantics.',
+    },
+  ],
+  inheritedProps: ['HTMLAttributes<HTMLDivElement> except className and title'],
+  example:
+    '<EmptyState title="No results" detail="Try another query." size="compact" />',
+  storyId: 'core-empty-state--default',
+} satisfies ComponentDoc;

package/src/EmptyState/EmptyState.tsx

@@ -0,0 +1,87 @@
+import * as stylex from '@stylexjs/stylex';
+import type {HTMLAttributes, ReactNode} from 'react';
+
+import {semanticTokens} from '../authoring.stylex.js';
+
+const copyWidth = `calc(${semanticTokens.spacing2xl} + ${semanticTokens.spacing2xl} + ${semanticTokens.spacing2xl} + ${semanticTokens.spacing2xl} + ${semanticTokens.spacing2xl} + ${semanticTokens.spacing2xl} + ${semanticTokens.spacing2xl} + ${semanticTokens.spacing2xl} + ${semanticTokens.spacing2xl} + ${semanticTokens.spacing2xl})`;
+
+const styles = stylex.create({
+  root: {
+    alignItems: 'center',
+    color: semanticTokens.colorText,
+    display: 'flex',
+    flexDirection: 'column',
+    fontFamily: semanticTokens.fontFamilyBody,
+    gap: semanticTokens.spacingMd,
+    padding: semanticTokens.spacing2xl,
+    textAlign: 'center',
+  },
+  compact: {
+    gap: semanticTokens.spacingSm,
+    padding: semanticTokens.spacingLg,
+  },
+  title: {
+    fontFamily: semanticTokens.fontFamilyHeading,
+    fontSize: semanticTokens.fontSizeLg,
+    fontWeight: semanticTokens.fontWeightStrong,
+    margin: 0,
+    maxInlineSize: copyWidth,
+  },
+  detail: {
+    fontSize: semanticTokens.fontSizeMd,
+    lineHeight: semanticTokens.lineHeightBody,
+    margin: 0,
+    maxInlineSize: copyWidth,
+  },
+});
+
+export type EmptyStateSize = 'compact' | 'default';
+
+export interface EmptyStateProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'className' | 'title'
+> {
+  readonly action?: ReactNode;
+  readonly detail?: ReactNode;
+  readonly size?: EmptyStateSize;
+  readonly title: ReactNode;
+  readonly visual?: ReactNode;
+}
+
+export function EmptyState({
+  action,
+  detail,
+  size = 'default',
+  title,
+  visual,
+  ...props
+}: EmptyStateProps) {
+  return (
+    <div {...props} aria-live="polite" role="status">
+      <EmptyStateContent
+        action={action}
+        detail={detail}
+        size={size}
+        title={title}
+        visual={visual}
+      />
+    </div>
+  );
+}
+
+export function EmptyStateContent({
+  action,
+  detail,
+  size = 'default',
+  title,
+  visual,
+}: EmptyStateProps) {
+  return (
+    <div {...stylex.props(styles.root, size === 'compact' && styles.compact)}>
+      {visual}
+      <p {...stylex.props(styles.title)}>{title}</p>
+      {detail ? <p {...stylex.props(styles.detail)}>{detail}</p> : null}
+      {action}
+    </div>
+  );
+}

package/src/EmptyState/index.ts

@@ -0,0 +1,6 @@
+export {
+  EmptyState,
+  EmptyStateContent,
+  type EmptyStateProps,
+  type EmptyStateSize,
+} from './EmptyState.js';

package/src/Field/Field.doc.ts

@@ -0,0 +1,34 @@
+import type {ComponentDoc} from '../docs/types.js';
+
+export const fieldDoc = {
+  name: 'Field',
+  description:
+    'Connects a form control to its label, description, and validation status.',
+  props: [
+    {
+      name: 'controlId',
+      description: 'Overrides the generated form-control identifier.',
+    },
+    {
+      name: 'description',
+      description: 'Adds supporting text to the control description.',
+    },
+    {name: 'label', description: 'Provides the control label.', required: true},
+    {
+      name: 'necessity',
+      description:
+        'Displays required or optional metadata and supplies the native required default to supported text controls.',
+    },
+    {
+      name: 'status',
+      description: 'Adds validation or status text to the control description.',
+    },
+    {
+      name: 'statusTone',
+      description: 'Selects status color, announcement, and invalid semantics.',
+    },
+  ],
+  inheritedProps: ['HTMLAttributes<HTMLDivElement> except className'],
+  example: '<Field label="Email" necessity="required"><TextInput /></Field>',
+  storyId: 'core-field--default',
+} satisfies ComponentDoc;