@misoto22/kioku-ui 0.0.0

package/dist/Card/Card.doc.d.ts

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

package/dist/Card/Card.doc.js

@@ -0,0 +1,15 @@
+import "../styles/stylex.css";
+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'
+};

package/dist/Card/Card.js

@@ -0,0 +1,41 @@
+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: {
+    kWkggS: "x1ixvsy6",
+    kaIpWk: "x7xrhi9",
+    kMwMTN: "x1y4yzzg",
+    kmVPX3: "x167l562",
+    $$css: true
+  },
+  none: {
+    kVAM5u: "xilcjya",
+    ksu8eU: "x1jnjmdy",
+    kMzoRj: "xpxnlqs",
+    kGVxlE: "x1gnnqk1",
+    $$css: true
+  },
+  low: {
+    ksu8eU: "xng3xce",
+    kGVxlE: "x1elh21b",
+    $$css: true
+  },
+  medium: {
+    ksu8eU: "xng3xce",
+    kGVxlE: "x165nt33",
+    $$css: true
+  }
+};
+export function Card({
+  children,
+  elevation = 'none',
+  ...props
+}) {
+  return /*#__PURE__*/_jsx("article", {
+    ...props,
+    ...stylex.props(styles.base, styles[elevation]),
+    children: children
+  });
+}

package/dist/Card/index.d.ts

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

package/dist/Card/index.js

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

package/dist/CardFooter/CardFooter.d.ts

@@ -0,0 +1,3 @@
+import type { HTMLAttributes } from 'react';
+export type CardFooterProps = Omit<HTMLAttributes<HTMLElement>, 'className'>;
+export declare function CardFooter({ children, ...props }: CardFooterProps): import("react").JSX.Element;

package/dist/CardFooter/CardFooter.doc.d.ts

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

package/dist/CardFooter/CardFooter.doc.js

@@ -0,0 +1,12 @@
+import "../styles/stylex.css";
+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'
+};

package/dist/CardFooter/CardFooter.js

@@ -0,0 +1,16 @@
+import * as stylex from '@stylexjs/stylex';
+import { semanticTokens } from '../authoring.stylex.js';
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function CardFooter({
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx("footer", {
+    ...props,
+    ...{
+      className: "x1pe616k x4tqos1 xlyo07a x1yc2x4e x19a07bp x1suer1w x17uk85o x92ksv2"
+    },
+    children: children
+  });
+}

package/dist/CardFooter/index.d.ts

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

package/dist/CardFooter/index.js

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

package/dist/CardHeader/CardHeader.d.ts

@@ -0,0 +1,3 @@
+import type { HTMLAttributes } from 'react';
+export type CardHeaderProps = Omit<HTMLAttributes<HTMLElement>, 'className'>;
+export declare function CardHeader({ children, ...props }: CardHeaderProps): import("react").JSX.Element;

package/dist/CardHeader/CardHeader.doc.d.ts

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

package/dist/CardHeader/CardHeader.doc.js

@@ -0,0 +1,12 @@
+import "../styles/stylex.css";
+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'
+};

package/dist/CardHeader/CardHeader.js

@@ -0,0 +1,16 @@
+import * as stylex from '@stylexjs/stylex';
+import { semanticTokens } from '../authoring.stylex.js';
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function CardHeader({
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx("header", {
+    ...props,
+    ...{
+      className: "x1k3hjl9 x1w5tod1 xeq6m5c x5845i8 x1sx9ztw x1suer1w x17uk85o x92ksv2"
+    },
+    children: children
+  });
+}

package/dist/CardHeader/index.d.ts

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

package/dist/CardHeader/index.js

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

package/dist/Center/Center.d.ts

@@ -0,0 +1,3 @@
+import type { HTMLAttributes } from 'react';
+export type CenterProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
+export declare function Center({ children, ...props }: CenterProps): import("react").JSX.Element;

package/dist/Center/Center.doc.d.ts

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

package/dist/Center/Center.doc.js

@@ -0,0 +1,12 @@
+import "../styles/stylex.css";
+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'
+};

package/dist/Center/Center.js

@@ -0,0 +1,15 @@
+import * as stylex from '@stylexjs/stylex';
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Center({
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx("div", {
+    ...props,
+    ...{
+      className: "x6s0dn4 x78zum5 xl56j7k"
+    },
+    children: children
+  });
+}

package/dist/Center/index.d.ts

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

package/dist/Center/index.js

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

package/dist/Divider/Divider.d.ts

@@ -0,0 +1,3 @@
+import type { HTMLAttributes } from 'react';
+export type DividerProps = Omit<HTMLAttributes<HTMLHRElement>, 'className'>;
+export declare function Divider(props: DividerProps): import("react").JSX.Element;

package/dist/Divider/Divider.doc.d.ts

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

package/dist/Divider/Divider.doc.js

@@ -0,0 +1,12 @@
+import "../styles/stylex.css";
+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'
+};

package/dist/Divider/Divider.js

@@ -0,0 +1,12 @@
+import * as stylex from '@stylexjs/stylex';
+import { semanticTokens } from '../authoring.stylex.js';
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Divider(props) {
+  return /*#__PURE__*/_jsx("hr", {
+    ...props,
+    ...{
+      className: "x1pe616k x4tqos1 xlyo07a x1ghz6dp"
+    }
+  });
+}

package/dist/Divider/index.d.ts

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

package/dist/Divider/index.js

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

package/dist/EmptyState/EmptyState.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+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 declare function EmptyState({ action, detail, size, title, visual, ...props }: EmptyStateProps): import("react").JSX.Element;
+export declare function EmptyStateContent({ action, detail, size, title, visual, }: EmptyStateProps): import("react").JSX.Element;

package/dist/EmptyState/EmptyState.doc.d.ts

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

@@ -0,0 +1,25 @@
+import "../styles/stylex.css";
+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'
+};

package/dist/EmptyState/EmptyState.js

@@ -0,0 +1,55 @@
+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 copyWidth = `calc(${semanticTokens.spacing2xl} + ${semanticTokens.spacing2xl} + ${semanticTokens.spacing2xl} + ${semanticTokens.spacing2xl} + ${semanticTokens.spacing2xl} + ${semanticTokens.spacing2xl} + ${semanticTokens.spacing2xl} + ${semanticTokens.spacing2xl} + ${semanticTokens.spacing2xl} + ${semanticTokens.spacing2xl})`;
+export function EmptyState({
+  action,
+  detail,
+  size = 'default',
+  title,
+  visual,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx("div", {
+    ...props,
+    "aria-live": "polite",
+    role: "status",
+    children: /*#__PURE__*/_jsx(EmptyStateContent, {
+      action: action,
+      detail: detail,
+      size: size,
+      title: title,
+      visual: visual
+    })
+  });
+}
+export function EmptyStateContent({
+  action,
+  detail,
+  size = 'default',
+  title,
+  visual
+}) {
+  return /*#__PURE__*/_jsxs("div", {
+    ...{
+      0: {
+        className: "x6s0dn4 x1y4yzzg x78zum5 xdt5ytf xj0sio9 xtl099x x1wib74s x2b8uid"
+      },
+      1: {
+        className: "x6s0dn4 x1y4yzzg x78zum5 xdt5ytf xj0sio9 x2b8uid x1ap6kct x1cfciu7"
+      }
+    }[!!(size === 'compact') << 0],
+    children: [visual, /*#__PURE__*/_jsx("p", {
+      ...{
+        className: "x69it5h x1fkw5ar x1sa4947 x1ghz6dp x6wfg6j"
+      },
+      children: title
+    }), detail ? /*#__PURE__*/_jsx("p", {
+      ...{
+        className: "x1ti3rys x1ezks3f x1ghz6dp x6wfg6j"
+      },
+      children: detail
+    }) : null, action]
+  });
+}

package/dist/EmptyState/index.d.ts

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

package/dist/EmptyState/index.js

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

package/dist/Field/Field.d.ts

@@ -0,0 +1,21 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import type { StatusTone } from '../Badge/index.js';
+interface FieldContextValue {
+    readonly controlId: string;
+    readonly describedBy: string | undefined;
+    readonly invalid: boolean;
+    readonly required: boolean;
+}
+/** Native requirement metadata displayed alongside the field label. */
+export type FieldNecessity = 'required' | 'optional';
+export interface FieldProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
+    readonly controlId?: string;
+    readonly description?: ReactNode;
+    readonly label: ReactNode;
+    readonly necessity?: FieldNecessity;
+    readonly status?: ReactNode;
+    readonly statusTone?: StatusTone;
+}
+export declare function Field({ children, controlId, description, label, necessity, status, statusTone, ...props }: FieldProps): import("react").JSX.Element;
+export declare function useFieldControl(): FieldContextValue | null;
+export {};

package/dist/Field/Field.doc.d.ts

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

@@ -0,0 +1,28 @@
+import "../styles/stylex.css";
+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'
+};

package/dist/Field/Field.js

@@ -0,0 +1,117 @@
+import * as stylex from '@stylexjs/stylex';
+import { createContext, useContext, useId } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const FieldContext = createContext(null);
+const styles = {
+  root: {
+    k1xSpc: "xrvj5dj",
+    kOIVth: "x1iwn5ga",
+    $$css: true
+  },
+  label: {
+    kGNEyG: "x1pha0wt",
+    kMwMTN: "x1y4yzzg",
+    k1xSpc: "x78zum5",
+    kMv6JI: "xj0sio9",
+    kGuDYH: "xltg2ad",
+    k63SB2: "x1m30uz7",
+    kOIVth: "x1ap6kct",
+    kjj79g: "x1qughib",
+    $$css: true
+  },
+  annotation: {
+    kMwMTN: "x1mgtvnk",
+    k63SB2: "x1jcbhmk",
+    $$css: true
+  },
+  message: {
+    kMv6JI: "xj0sio9",
+    kGuDYH: "xltg2ad",
+    kogj98: "x1ghz6dp",
+    $$css: true
+  },
+  description: {
+    kMwMTN: "x17y7oyd",
+    $$css: true
+  },
+  info: {
+    kMwMTN: "x1ursi0k",
+    $$css: true
+  },
+  success: {
+    kMwMTN: "xw2tli",
+    $$css: true
+  },
+  warning: {
+    kMwMTN: "x6rqny5",
+    $$css: true
+  },
+  danger: {
+    kMwMTN: "x8bm3zx",
+    $$css: true
+  }
+};
+
+/** Native requirement metadata displayed alongside the field label. */
+
+export function Field({
+  children,
+  controlId,
+  description,
+  label,
+  necessity,
+  status,
+  statusTone = 'danger',
+  ...props
+}) {
+  const generatedId = useId();
+  const resolvedControlId = controlId ?? `${generatedId}-control`;
+  const descriptionId = description ? `${generatedId}-description` : undefined;
+  const statusId = status ? `${generatedId}-status` : undefined;
+  const describedBy = [descriptionId, statusId].filter(Boolean).join(' ') || undefined;
+  return /*#__PURE__*/_jsx(FieldContext.Provider, {
+    value: {
+      controlId: resolvedControlId,
+      describedBy,
+      invalid: Boolean(status && statusTone === 'danger'),
+      required: necessity === 'required'
+    },
+    children: /*#__PURE__*/_jsxs("div", {
+      ...props,
+      ...{
+        className: "xrvj5dj x1iwn5ga"
+      },
+      children: [/*#__PURE__*/_jsxs("label", {
+        htmlFor: resolvedControlId,
+        ...{
+          className: "x1pha0wt x1y4yzzg x78zum5 xj0sio9 xltg2ad x1m30uz7 x1ap6kct x1qughib"
+        },
+        children: [/*#__PURE__*/_jsx("span", {
+          children: label
+        }), necessity ? /*#__PURE__*/_jsx("span", {
+          ...{
+            className: "x1mgtvnk x1jcbhmk"
+          },
+          children: ` (${necessity})`
+        }) : null]
+      }), children, description ? /*#__PURE__*/_jsx("p", {
+        id: descriptionId,
+        ...{
+          className: "xj0sio9 xltg2ad x1ghz6dp x17y7oyd"
+        },
+        children: description
+      }) : null, status ? /*#__PURE__*/_jsx("p", {
+        "aria-live": statusTone === 'danger' ? 'assertive' : 'polite',
+        id: statusId,
+        role: statusTone === 'danger' ? 'alert' : 'status',
+        ...stylex.props(styles.message, styles[statusTone]),
+        children: status
+      }) : null]
+    })
+  });
+}
+export function useFieldControl() {
+  return useContext(FieldContext);
+}

package/dist/Field/index.d.ts

@@ -0,0 +1 @@
+export { Field, useFieldControl, type FieldNecessity, type FieldProps, } from './Field.js';

package/dist/Field/index.js

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

package/dist/Grid/Grid.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'react';
+import type { Space } from '../Stack/index.js';
+export interface GridProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
+    readonly columns?: 1 | 2 | 3 | 4;
+    readonly gap?: Space;
+}
+export declare function Grid({ columns, gap, children, ...props }: GridProps): import("react").JSX.Element;

package/dist/Grid/Grid.doc.d.ts

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

package/dist/Grid/Grid.doc.js

@@ -0,0 +1,15 @@
+import "../styles/stylex.css";
+export const gridDoc = {
+  name: 'Grid',
+  description: 'Arranges content in a fixed, semantic-token-spaced grid.',
+  props: [{
+    name: 'columns',
+    description: 'Optional number of columns from 1 through 4.'
+  }, {
+    name: 'gap',
+    description: 'Optional semantic gap token.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLDivElement> except className'],
+  example: '<Grid columns={2}><Text>First</Text><Text>Second</Text></Grid>',
+  storyId: 'core-grid--default'
+};