@misoto22/kioku-ui 0.0.0 → 0.2.0

package/dist/HoverCard/HoverCard.d.ts

@@ -0,0 +1,31 @@
+import { type FocusEvent, type MouseEvent, type ReactElement, type ReactNode } from 'react';
+import type { Alignment, Placement } from '../hooks/useAnchoredPosition.js';
+interface TriggerProps {
+    readonly onBlur?: (event: FocusEvent<HTMLElement>) => void;
+    readonly onFocus?: (event: FocusEvent<HTMLElement>) => void;
+    readonly onMouseEnter?: (event: MouseEvent<HTMLElement>) => void;
+    readonly onMouseLeave?: (event: MouseEvent<HTMLElement>) => void;
+    readonly ref?: unknown;
+}
+/** Props for a rich preview shown on hover and on focus. */
+export interface HoverCardProps {
+    readonly alignment?: Alignment;
+    readonly children: ReactElement<TriggerProps>;
+    readonly closeDelay?: number;
+    readonly content: ReactNode;
+    /**
+     * Names the surface. The content is interactive, so it is announced as a
+     * dialog, and a dialog with no name is one an assistive technology can enter
+     * but not describe. Required for that reason rather than for styling.
+     */
+    readonly label: string;
+    readonly openDelay?: number;
+    readonly placement?: Placement;
+}
+/**
+ * Previews related detail beside its trigger. Unlike Tooltip the content is
+ * interactive and stays open while the pointer is inside it, so it can hold
+ * links and actions.
+ */
+export declare function HoverCard({ alignment, children, closeDelay, content, label, openDelay, placement, }: HoverCardProps): import("react").JSX.Element;
+export {};

package/dist/HoverCard/HoverCard.doc.d.ts

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

package/dist/HoverCard/HoverCard.doc.js

@@ -0,0 +1,30 @@
+import "../styles/stylex.css";
+export const hoverCardDoc = {
+  name: 'HoverCard',
+  description: 'Previews interactive detail on hover and on focus.',
+  props: [{
+    name: 'alignment',
+    description: 'Lines the card up along the cross axis.'
+  }, {
+    name: 'children',
+    description: 'Supplies the single trigger element.'
+  }, {
+    name: 'closeDelay',
+    description: 'Delays closing after the pointer leaves.'
+  }, {
+    name: 'content',
+    description: 'Supplies the preview content.'
+  }, {
+    name: 'label',
+    description: 'Names the interactive surface for assistive technology.'
+  }, {
+    name: 'openDelay',
+    description: 'Delays opening after the pointer arrives.'
+  }, {
+    name: 'placement',
+    description: 'Selects the preferred side of the trigger.'
+  }],
+  inheritedProps: ['None; HoverCard renders only its trigger and preview'],
+  example: '<HoverCard content={<Profile />}><Link href="/a">Ada</Link></HoverCard>',
+  storyId: 'core-hover-card--default'
+};

package/dist/HoverCard/HoverCard.js

@@ -0,0 +1,77 @@
+import { Children, cloneElement, useEffect, useRef, useState } from 'react';
+import { Popover } from '../Popover/index.js';
+import "../styles/stylex.css";
+/** Props for a rich preview shown on hover and on focus. */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Previews related detail beside its trigger. Unlike Tooltip the content is
+ * interactive and stays open while the pointer is inside it, so it can hold
+ * links and actions.
+ */
+export function HoverCard({
+  alignment,
+  children,
+  closeDelay = 150,
+  content,
+  label,
+  openDelay = 300,
+  placement = 'bottom'
+}) {
+  const anchorRef = useRef(null);
+  const timer = useRef(undefined);
+  const [open, setOpen] = useState(false);
+  useEffect(() => () => {
+    clearTimeout(timer.current);
+  }, []);
+  function scheduleOpen() {
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => {
+      setOpen(true);
+    }, openDelay);
+  }
+  function scheduleClose() {
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => {
+      setOpen(false);
+    }, closeDelay);
+  }
+  const trigger = Children.only(children);
+  const anchor = cloneElement(trigger, {
+    onBlur: event => {
+      trigger.props.onBlur?.(event);
+      scheduleClose();
+    },
+    onFocus: event => {
+      trigger.props.onFocus?.(event);
+      scheduleOpen();
+    },
+    onMouseEnter: event => {
+      trigger.props.onMouseEnter?.(event);
+      scheduleOpen();
+    },
+    onMouseLeave: event => {
+      trigger.props.onMouseLeave?.(event);
+      scheduleClose();
+    },
+    ref: anchorRef
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [anchor, /*#__PURE__*/_jsx(Popover, {
+      ...(alignment ? {
+        alignment
+      } : {}),
+      anchorRef: anchorRef,
+      "aria-label": label,
+      onDismiss: () => {
+        setOpen(false);
+      },
+      onMouseEnter: () => {
+        clearTimeout(timer.current);
+      },
+      onMouseLeave: scheduleClose,
+      open: open,
+      placement: placement,
+      children: content
+    })]
+  });
+}

package/dist/HoverCard/index.d.ts

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

package/dist/HoverCard/index.js

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

package/dist/Icon/Icon.d.ts

@@ -0,0 +1,16 @@
+import type { SVGAttributes } from 'react';
+/** Square sizes an icon can occupy, aligned to the typography scale. */
+export type IconSize = 'inherit' | 'sm' | 'md' | 'lg';
+/** Semantic colour roles an icon can adopt. */
+export type IconTone = 'inherit' | 'primary' | 'secondary' | 'muted' | 'accent';
+/** Props for the product-neutral SVG container. */
+export interface IconProps extends Omit<SVGAttributes<SVGSVGElement>, 'aria-hidden' | 'aria-label' | 'className' | 'role'> {
+    readonly label?: string;
+    readonly size?: IconSize;
+    readonly tone?: IconTone;
+}
+/**
+ * Wraps caller-supplied SVG paths so the system owns sizing, colour, and
+ * accessible naming without shipping an icon set of its own.
+ */
+export declare function Icon({ children, label, size, tone, viewBox, ...props }: IconProps): import("react").JSX.Element;

package/dist/{components/Grid.doc.d.ts → Icon/Icon.doc.d.ts}

@@ -1,4 +1,4 @@
-export declare const gridDoc: {
+export declare const iconDoc: {
     name: string;
     description: string;
     props: {

package/dist/Icon/Icon.doc.js

@@ -0,0 +1,18 @@
+import "../styles/stylex.css";
+export const iconDoc = {
+  name: 'Icon',
+  description: 'Sizes and colours caller-supplied SVG paths.',
+  props: [{
+    name: 'label',
+    description: 'Names the icon for assistive technology; omit when decorative.'
+  }, {
+    name: 'size',
+    description: 'Selects the square size from the type scale.'
+  }, {
+    name: 'tone',
+    description: 'Selects a semantic colour role.'
+  }],
+  inheritedProps: ['SVGAttributes<SVGSVGElement> except aria-hidden, aria-label, className, role'],
+  example: '<Icon label="Search"><path d="M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Z" /></Icon>',
+  storyId: 'core-icon--default'
+};

package/dist/Icon/Icon.js

@@ -0,0 +1,91 @@
+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: {
+    k1xSpc: "x1rg5ohu",
+    kDwRjp: "x117rol3",
+    kmuXW: "x2lah0s",
+    kXLuUW: "xxymvpz",
+    $$css: true
+  },
+  sizeInherit: {
+    kZKoxP: "xlzyvqe",
+    kzqmXN: "x15vhz18",
+    $$css: true
+  },
+  sizeSm: {
+    kZKoxP: "x178ehrb",
+    kzqmXN: "x15a3vu",
+    $$css: true
+  },
+  sizeMd: {
+    kZKoxP: "x1hff5tj",
+    kzqmXN: "x585zp6",
+    $$css: true
+  },
+  sizeLg: {
+    kZKoxP: "x13knv98",
+    kzqmXN: "xk4en2i",
+    $$css: true
+  },
+  tonePrimary: {
+    kMwMTN: "x1y4yzzg",
+    $$css: true
+  },
+  toneSecondary: {
+    kMwMTN: "x17y7oyd",
+    $$css: true
+  },
+  toneMuted: {
+    kMwMTN: "x1mgtvnk",
+    $$css: true
+  },
+  toneAccent: {
+    kMwMTN: "x16hrpne",
+    $$css: true
+  }
+};
+const sizes = {
+  inherit: styles.sizeInherit,
+  sm: styles.sizeSm,
+  md: styles.sizeMd,
+  lg: styles.sizeLg
+};
+const tones = {
+  primary: styles.tonePrimary,
+  secondary: styles.toneSecondary,
+  muted: styles.toneMuted,
+  accent: styles.toneAccent
+};
+
+/** Square sizes an icon can occupy, aligned to the typography scale. */
+
+/** Semantic colour roles an icon can adopt. */
+
+/** Props for the product-neutral SVG container. */
+
+/**
+ * Wraps caller-supplied SVG paths so the system owns sizing, colour, and
+ * accessible naming without shipping an icon set of its own.
+ */
+export function Icon({
+  children,
+  label,
+  size = 'inherit',
+  tone = 'inherit',
+  viewBox = '0 0 24 24',
+  ...props
+}) {
+  const decorative = label === undefined;
+  return /*#__PURE__*/_jsx("svg", {
+    ...props,
+    "aria-hidden": decorative ? 'true' : undefined,
+    "aria-label": decorative ? undefined : label,
+    role: decorative ? undefined : 'img',
+    ...stylex.props(styles.base, sizes[size], tone !== 'inherit' && tones[tone]),
+    viewBox: viewBox,
+    children: children
+  });
+}

package/dist/Icon/index.d.ts

@@ -0,0 +1 @@
+export { Icon, type IconProps, type IconSize, type IconTone } from './Icon.js';

package/dist/Icon/index.js

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

package/dist/Indicator/Indicator.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { StatusTone } from '../Badge/index.js';
+/** Props for a count or dot attached to another control. */
+export interface IndicatorProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'className'> {
+    readonly children: ReactNode;
+    readonly count?: number;
+    readonly label: string;
+    readonly max?: number;
+    readonly tone?: StatusTone;
+}
+/**
+ * Attaches a count or a dot to the control it wraps. The label is what a
+ * screen reader hears, because "3" beside an icon means nothing on its own.
+ */
+export declare function Indicator({ children, count, label, max, tone, ...props }: IndicatorProps): import("react").JSX.Element;

package/dist/Indicator/Indicator.doc.d.ts

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

package/dist/Indicator/Indicator.doc.js

@@ -0,0 +1,24 @@
+import "../styles/stylex.css";
+export const indicatorDoc = {
+  name: 'Indicator',
+  description: 'Attaches a count or dot to the control it wraps.',
+  props: [{
+    name: 'children',
+    description: 'Supplies the control being marked.'
+  }, {
+    name: 'count',
+    description: 'Shows a number; omit to show a plain dot.'
+  }, {
+    name: 'label',
+    description: 'States what the indicator means.'
+  }, {
+    name: 'max',
+    description: 'Caps the number before it reads as "max plus".'
+  }, {
+    name: 'tone',
+    description: 'Selects the semantic status colour.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLSpanElement> except children and className'],
+  example: '<Indicator count={3} label="3 unread"><IconButton … /></Indicator>',
+  storyId: 'core-indicator--default'
+};

package/dist/Indicator/Indicator.js

@@ -0,0 +1,90 @@
+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 styles = {
+  anchor: {
+    k1xSpc: "x3nfvp2",
+    kVAEAm: "x1n2onr6",
+    $$css: true
+  },
+  badge: {
+    kGNEyG: "x6s0dn4",
+    kVAM5u: "xuvkn9",
+    kaIpWk: "xnpwncj",
+    ksu8eU: "x1jnjmdy",
+    kMzoRj: "xxvk4v5",
+    k1xSpc: "x3nfvp2",
+    kMv6JI: "x7ohnf4",
+    kGuDYH: "xnlz8j1",
+    kcqcaj: "xss6m8b",
+    k63SB2: "x1m30uz7",
+    k87sOh: "x13vifvy",
+    kt4wiu: "xtijo5x",
+    kjj79g: "xl56j7k",
+    kb6lSQ: "x1kbjp2h",
+    kLWn49: "xo5v014",
+    k7Eaqz: "xny4odl",
+    kg3NbH: "xov5yc9",
+    kVAEAm: "x10l6tqk",
+    k3aq6I: "xd97ich",
+    $$css: true
+  },
+  dot: {
+    kZKoxP: "x1t7hrd4",
+    k7Eaqz: "xny4odl",
+    kg3NbH: "xnjsko4",
+    kzqmXN: "x1af11ui",
+    $$css: true
+  },
+  info: {
+    kWkggS: "x18i8t7",
+    kMwMTN: "x8ect3v",
+    $$css: true
+  },
+  success: {
+    kWkggS: "x1sm82us",
+    kMwMTN: "x8ect3v",
+    $$css: true
+  },
+  warning: {
+    kWkggS: "xe2mao8",
+    kMwMTN: "x8ect3v",
+    $$css: true
+  },
+  danger: {
+    kWkggS: "xpqgouk",
+    kMwMTN: "x8ect3v",
+    $$css: true
+  }
+};
+
+/** Props for a count or dot attached to another control. */
+
+/**
+ * Attaches a count or a dot to the control it wraps. The label is what a
+ * screen reader hears, because "3" beside an icon means nothing on its own.
+ */
+export function Indicator({
+  children,
+  count,
+  label,
+  max = 99,
+  tone = 'danger',
+  ...props
+}) {
+  const showCount = count !== undefined;
+  const display = showCount && count > max ? `${max}+` : String(count ?? '');
+  return /*#__PURE__*/_jsxs("span", {
+    ...props,
+    ...{
+      className: "x3nfvp2 x1n2onr6"
+    },
+    children: [children, /*#__PURE__*/_jsx("span", {
+      "aria-label": label,
+      role: "status",
+      ...stylex.props(styles.badge, styles[tone], !showCount && styles.dot),
+      children: showCount ? display : null
+    })]
+  });
+}

package/dist/Indicator/index.d.ts

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

package/dist/Indicator/index.js

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

package/dist/InputGroup/InputGroup.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+/** Props for a control flanked by fixed affixes. */
+export interface InputGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'prefix'> {
+    readonly children: ReactNode;
+    readonly prefix?: ReactNode;
+    readonly suffix?: ReactNode;
+}
+/**
+ * Places fixed text or controls beside an input. Affixes are decorative: put
+ * anything a reader must know in the field label, not here.
+ */
+export declare function InputGroup({ children, prefix, suffix, ...props }: InputGroupProps): import("react").JSX.Element;

package/dist/InputGroup/InputGroup.doc.d.ts

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

package/dist/InputGroup/InputGroup.doc.js

@@ -0,0 +1,18 @@
+import "../styles/stylex.css";
+export const inputGroupDoc = {
+  name: 'InputGroup',
+  description: 'Places fixed affixes beside a control.',
+  props: [{
+    name: 'children',
+    description: 'Supplies the control being flanked.'
+  }, {
+    name: 'prefix',
+    description: 'Places a decorative affix before the control.'
+  }, {
+    name: 'suffix',
+    description: 'Places a decorative affix after the control.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLDivElement> except children, className, and prefix'],
+  example: '<InputGroup suffix="AUD"><TextInput defaultValue="120" /></InputGroup>',
+  storyId: 'core-input-group--default'
+};

package/dist/InputGroup/InputGroup.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, jsxs as _jsxs } from "react/jsx-runtime";
+/** Props for a control flanked by fixed affixes. */
+
+/**
+ * Places fixed text or controls beside an input. Affixes are decorative: put
+ * anything a reader must know in the field label, not here.
+ */
+export function InputGroup({
+  children,
+  prefix,
+  suffix,
+  ...props
+}) {
+  return /*#__PURE__*/_jsxs("div", {
+    ...props,
+    ...{
+      className: "x1qjc9v5 x78zum5 xj0sio9 x1iwn5ga"
+    },
+    children: [prefix === undefined ? null : /*#__PURE__*/_jsx("span", {
+      "aria-hidden": "true",
+      ...{
+        className: "x6s0dn4 xavu78a x1wxkff4 x8kq9my x1jnjmdy xpxnlqs x9f619 x17y7oyd x78zum5 x2lah0s x69it5h xnlz8j1 x1di4hct x1vslzj6 xmm8wyw x1qtbwip"
+      },
+      children: prefix
+    }), /*#__PURE__*/_jsx("span", {
+      ...{
+        className: "x1iyjqo2 xeuugli"
+      },
+      children: children
+    }), suffix === undefined ? null : /*#__PURE__*/_jsx("span", {
+      "aria-hidden": "true",
+      ...{
+        className: "x6s0dn4 xavu78a x1wxkff4 x8kq9my x1jnjmdy xpxnlqs x9f619 x17y7oyd x78zum5 x2lah0s x69it5h xnlz8j1 x1di4hct x1vslzj6 xmm8wyw x1qtbwip"
+      },
+      children: suffix
+    })]
+  });
+}

package/dist/InputGroup/index.d.ts

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

package/dist/InputGroup/index.js

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

package/dist/Item/Item.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+/** Props for the shared leading/label/trailing row layout. */
+export interface ItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
+    readonly description?: ReactNode;
+    readonly leading?: ReactNode;
+    readonly trailing?: ReactNode;
+}
+/**
+ * Lays out one row of content so lists, menus, and navigation share the same
+ * spacing rhythm without each re-deriving it.
+ */
+export declare function Item({ children, description, leading, trailing, ...props }: ItemProps): import("react").JSX.Element;

package/dist/{components/Badge.doc.d.ts → Item/Item.doc.d.ts}

@@ -1,4 +1,4 @@
-export declare const badgeDoc: {
+export declare const itemDoc: {
     name: string;
     description: string;
     props: {

package/dist/Item/Item.doc.js

@@ -0,0 +1,18 @@
+import "../styles/stylex.css";
+export const itemDoc = {
+  name: 'Item',
+  description: 'Lays out a leading slot, label, description, and trailing slot.',
+  props: [{
+    name: 'description',
+    description: 'Adds secondary text under the label.'
+  }, {
+    name: 'leading',
+    description: 'Places content before the label.'
+  }, {
+    name: 'trailing',
+    description: 'Places content after the label.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLDivElement> except className'],
+  example: '<Item description="Updated today">Release notes</Item>',
+  storyId: 'core-item--default'
+};

package/dist/Item/Item.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, jsxs as _jsxs } from "react/jsx-runtime";
+/** Props for the shared leading/label/trailing row layout. */
+
+/**
+ * Lays out one row of content so lists, menus, and navigation share the same
+ * spacing rhythm without each re-deriving it.
+ */
+export function Item({
+  children,
+  description,
+  leading,
+  trailing,
+  ...props
+}) {
+  return /*#__PURE__*/_jsxs("div", {
+    ...props,
+    ...{
+      className: "x6s0dn4 x78zum5 xj0sio9 x1ap6kct xeuugli"
+    },
+    children: [leading === undefined ? null : /*#__PURE__*/_jsx("span", {
+      ...{
+        className: "x6s0dn4 x17y7oyd x78zum5 x2lah0s"
+      },
+      children: leading
+    }), /*#__PURE__*/_jsxs("span", {
+      ...{
+        className: "x78zum5 xdt5ytf x1iyjqo2 xeuugli"
+      },
+      children: [/*#__PURE__*/_jsx("span", {
+        ...{
+          className: "xj0sio9 x1ti3rys xgz4m7n x1ezks3f"
+        },
+        children: children
+      }), description === undefined ? null : /*#__PURE__*/_jsx("span", {
+        ...{
+          className: "x17y7oyd xj0sio9 xltg2ad xgz4m7n x1ezks3f"
+        },
+        children: description
+      })]
+    }), trailing === undefined ? null : /*#__PURE__*/_jsx("span", {
+      ...{
+        className: "x6s0dn4 x17y7oyd x78zum5 x2lah0s"
+      },
+      children: trailing
+    })]
+  });
+}

package/dist/Item/index.d.ts

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

package/dist/Item/index.js

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

package/dist/Kbd/Kbd.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'react';
+/** Props for a rendered keyboard key. */
+export type KbdProps = Omit<HTMLAttributes<HTMLElement>, 'className'>;
+/** Renders one keyboard key so shortcuts read as input, not as prose. */
+export declare function Kbd({ children, ...props }: KbdProps): import("react").JSX.Element;

package/dist/Kbd/Kbd.doc.d.ts

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