@misoto22/kioku-ui 0.0.0 → 0.2.0

package/dist/Box/Box.js

@@ -0,0 +1,120 @@
+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: {
+    kmVPX3: "x1tkv3ku",
+    $$css: true
+  },
+  paddingSm: {
+    kmVPX3: "xeqcnn9",
+    $$css: true
+  },
+  paddingMd: {
+    kmVPX3: "x14rluyd",
+    $$css: true
+  },
+  paddingLg: {
+    kmVPX3: "x1cfciu7",
+    $$css: true
+  },
+  paddingXl: {
+    kmVPX3: "x167l562",
+    $$css: true
+  },
+  padding2xl: {
+    kmVPX3: "x1wib74s",
+    $$css: true
+  },
+  canvas: {
+    kWkggS: "x1r2uulk",
+    $$css: true
+  },
+  surface: {
+    kWkggS: "x1ixvsy6",
+    $$css: true
+  },
+  raised: {
+    kWkggS: "x40o0ze",
+    $$css: true
+  },
+  muted: {
+    kWkggS: "xavu78a",
+    $$css: true
+  },
+  radiusInner: {
+    kaIpWk: "x1l6hjkl",
+    $$css: true
+  },
+  radiusElement: {
+    kaIpWk: "x8kq9my",
+    $$css: true
+  },
+  radiusContainer: {
+    kaIpWk: "x7xrhi9",
+    $$css: true
+  },
+  radiusPage: {
+    kaIpWk: "x58qzua",
+    $$css: true
+  },
+  radiusFull: {
+    kaIpWk: "xnpwncj",
+    $$css: true
+  },
+  bordered: {
+    kVAM5u: "xilcjya",
+    ksu8eU: "x1jnjmdy",
+    kMzoRj: "xpxnlqs",
+    $$css: true
+  }
+};
+const paddings = {
+  xs: styles.paddingXs,
+  sm: styles.paddingSm,
+  md: styles.paddingMd,
+  lg: styles.paddingLg,
+  xl: styles.paddingXl,
+  '2xl': styles.padding2xl
+};
+const surfaces = {
+  canvas: styles.canvas,
+  muted: styles.muted,
+  raised: styles.raised,
+  surface: styles.surface
+};
+const radii = {
+  inner: styles.radiusInner,
+  element: styles.radiusElement,
+  container: styles.radiusContainer,
+  page: styles.radiusPage,
+  full: styles.radiusFull
+};
+
+/** Background roles a box can take from the token contract. */
+
+/** Corner treatments a box can take from the token contract. */
+
+/** Props for the plain token-aware box. */
+
+/**
+ * A box with no meaning of its own, spending only token values. Reach for it
+ * when a layout needs a surface or some padding and none of the named
+ * containers — `Card`, `Section` — would be telling the truth about what the
+ * thing is.
+ */
+export function Box({
+  bordered = false,
+  children,
+  padding,
+  radius,
+  surface,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx("div", {
+    ...props,
+    ...stylex.props(padding === undefined ? undefined : paddings[padding], surface === undefined ? undefined : surfaces[surface], radius === undefined ? undefined : radii[radius], bordered && styles.bordered),
+    children: children
+  });
+}

package/dist/Box/index.d.ts

@@ -0,0 +1 @@
+export { Box, type BoxProps, type BoxRadius, type BoxSurface } from './Box.js';

package/dist/Box/index.js

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

package/dist/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+/** One step on the path to the current page. */
+export interface BreadcrumbItem {
+    readonly href?: string;
+    readonly label: ReactNode;
+}
+/** Props for the trail leading to the current page. */
+export interface BreadcrumbsProps extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'className'> {
+    readonly items: readonly BreadcrumbItem[];
+    readonly label?: string;
+    readonly separator?: ReactNode;
+}
+/**
+ * Shows the path to the current page. The last item is rendered as text and
+ * marked `aria-current`, because a link to the page you are on is not a link.
+ */
+export declare function Breadcrumbs({ items, label, separator, ...props }: BreadcrumbsProps): import("react").JSX.Element;

package/dist/Breadcrumbs/Breadcrumbs.doc.d.ts

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

package/dist/Breadcrumbs/Breadcrumbs.doc.js

@@ -0,0 +1,18 @@
+import "../styles/stylex.css";
+export const breadcrumbsDoc = {
+  name: 'Breadcrumbs',
+  description: 'Shows the path leading to the current page.',
+  props: [{
+    name: 'items',
+    description: 'Supplies the trail from root to current page.'
+  }, {
+    name: 'label',
+    description: 'Names the navigation landmark.'
+  }, {
+    name: 'separator',
+    description: 'Replaces the decorative divider glyph.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLElement> except children and className'],
+  example: '<Breadcrumbs items={[{href: "/", label: "Home"}, {label: "Release"}]} />',
+  storyId: 'core-breadcrumbs--default'
+};

package/dist/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,64 @@
+import * as stylex from '@stylexjs/stylex';
+import { semanticTokens } from '../authoring.stylex.js';
+import { Link } from '../navigation/index.js';
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** One step on the path to the current page. */
+
+/** Props for the trail leading to the current page. */
+
+/**
+ * Shows the path to the current page. The last item is rendered as text and
+ * marked `aria-current`, because a link to the page you are on is not a link.
+ */
+export function Breadcrumbs({
+  items,
+  label = 'Breadcrumb',
+  separator = '/',
+  ...props
+}) {
+  return /*#__PURE__*/_jsx("nav", {
+    ...props,
+    "aria-label": label,
+    ...{
+      className: "xj0sio9"
+    },
+    children: /*#__PURE__*/_jsx("ol", {
+      ...{
+        className: "x6s0dn4 xzr0trf x78zum5 x1a02dak x3ct3a4 x10im51j xrxpjvj x1c1uobl xfhy3zi"
+      },
+      children: items.map(({
+        href,
+        label: itemLabel
+      }, index) => {
+        const last = index === items.length - 1;
+        return /*#__PURE__*/_jsxs("li", {
+          ...{
+            className: "x6s0dn4 xzr0trf x78zum5"
+          },
+          children: [href === undefined || last ? /*#__PURE__*/_jsx("span", {
+            ...(last ? {
+              'aria-current': 'page'
+            } : {}),
+            ...{
+              className: "x1y4yzzg xj0sio9 xltg2ad x1m30uz7 xq5azjn"
+            },
+            children: itemLabel
+          }) : /*#__PURE__*/_jsx(Link, {
+            href: href,
+            ...{
+              className: "x17y7oyd xj0sio9 xltg2ad xq5azjn xkrqix3 x1elc2ff xt3l3uh xxjumz x15meki4 xz32tfx x1p22nma x17lds6u x1t0gddj x1sur9pj"
+            },
+            children: itemLabel
+          }), last ? null : /*#__PURE__*/_jsx("span", {
+            "aria-hidden": "true",
+            ...{
+              className: "x1mgtvnk x69it5h xnlz8j1 x1di4hct x1vslzj6"
+            },
+            children: separator
+          })]
+        }, index);
+      })
+    })
+  });
+}

package/dist/Breadcrumbs/index.d.ts

@@ -0,0 +1 @@
+export { Breadcrumbs, type BreadcrumbItem, type BreadcrumbsProps, } from './Breadcrumbs.js';

package/dist/Breadcrumbs/index.js

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

package/dist/Button/Button.js

@@ -10,6 +10,7 @@ const styles = {
     kaIpWk: "x8kq9my",
     ksu8eU: "x1jnjmdy",
     kMzoRj: "xpxnlqs",
+    kkrTdU: "x1ypdohk",
     k1xSpc: "x3nfvp2",
     kMv6JI: "xj0sio9",
     k63SB2: "x1m30uz7",
@@ -17,9 +18,13 @@ const styles = {
     kjj79g: "xl56j7k",
     kLWn49: "x1ezks3f",
     kVAEAm: "x1n2onr6",
+    kIyJzY: "x1elc2ff",
+    k1ekBW: "x1eaenvl",
+    kAMwcw: "xxjumz",
     kD2jPA: "x48zea8",
     kdODIN: "x1oulntk",
     kWC4TW: "x609gy3",
+    kYPGJ8: "xtgyt42",
     kZs9gx: "x15meki4",
     kiEn40: "xz32tfx",
     k7shQP: "x1p22nma",
@@ -28,30 +33,33 @@ const styles = {
   },
   sm: {
     kGuDYH: "xltg2ad",
+    kb6lSQ: "xq5azjn",
     kZKoxP: "x1vbl8lt",
     kg3NbH: "x1qtbwip",
     $$css: true
   },
   md: {
-    kGuDYH: "x1ti3rys",
+    kGuDYH: "xltg2ad",
+    kb6lSQ: "xq5azjn",
     kZKoxP: "xr8hsnb",
     kg3NbH: "x1wkw8jr",
     $$css: true
   },
   lg: {
     kGuDYH: "x1ti3rys",
+    kb6lSQ: "xq5azjn",
     kZKoxP: "xscltuj",
     kg3NbH: "x1q83fih",
     $$css: true
   },
   primary: {
-    kWkggS: "x1j40q36",
-    kVAM5u: "x10ghty7",
+    kWkggS: "x1i8m2t6",
+    kVAM5u: "x1g8yv9a",
     kMwMTN: "x8ect3v",
-    ktLb98: "xahjstz",
-    ksVfMn: "xx21tl2",
-    kDKVdO: "xzpaccd",
-    kRIasW: "x6v1che",
+    ktLb98: "xknsdm7",
+    ksVfMn: "xcp1j4o",
+    kDKVdO: "xoz0snx",
+    kRIasW: "x10mom7x",
     $$css: true
   },
   secondary: {
@@ -67,9 +75,11 @@ const styles = {
   ghost: {
     kWkggS: "xjbqb8w",
     kVAM5u: "x9r1u3d",
-    kMwMTN: "x1y4yzzg",
+    kMwMTN: "x17y7oyd",
     ktLb98: "x1975ut4",
+    kFgMcJ: "x1jwpw4l",
     kDKVdO: "xbo0ryh",
+    kMB0Px: "x1kx1cc1",
     $$css: true
   },
   destructive: {
@@ -82,6 +92,7 @@ const styles = {
   },
   loading: {
     kkrTdU: "x19v85br",
+    kYPGJ8: "x1ar62m4",
     $$css: true
   },
   iconOnly: {

package/dist/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,13 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type ListOrientation } from '../hooks/useListFocus.js';
+/** Props for a set of related actions treated as one control. */
+export interface ButtonGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'aria-label' | 'children' | 'className' | 'role'> {
+    readonly children: ReactNode;
+    readonly label: string;
+    readonly orientation?: ListOrientation;
+}
+/**
+ * Groups related actions so they read as one control. Unlike `Toolbar` the
+ * actions here are alternatives to each other rather than separate commands.
+ */
+export declare function ButtonGroup({ children, label, orientation, ...props }: ButtonGroupProps): import("react").JSX.Element;

package/dist/ButtonGroup/ButtonGroup.doc.d.ts

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

package/dist/ButtonGroup/ButtonGroup.doc.js

@@ -0,0 +1,18 @@
+import "../styles/stylex.css";
+export const buttonGroupDoc = {
+  name: 'ButtonGroup',
+  description: 'Groups related actions so they read as one control.',
+  props: [{
+    name: 'children',
+    description: 'Supplies the grouped actions.'
+  }, {
+    name: 'label',
+    description: 'Names the group for assistive technology.'
+  }, {
+    name: 'orientation',
+    description: 'Selects the axis arrow keys travel along.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLDivElement> except aria-label, children, className, and role'],
+  example: '<ButtonGroup label="Alignment"><Button>Left</Button></ButtonGroup>',
+  storyId: 'core-button-group--default'
+};

package/dist/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,52 @@
+import * as stylex from '@stylexjs/stylex';
+import { useRef } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import { useListFocus } from '../hooks/useListFocus.js';
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const styles = {
+  group: {
+    kGNEyG: "x6s0dn4",
+    k1xSpc: "x3nfvp2",
+    kOIVth: "x1iwn5ga",
+    $$css: true
+  },
+  horizontal: {
+    kXwgrk: "x1q0g3np",
+    $$css: true
+  },
+  vertical: {
+    kGNEyG: "x1qjc9v5",
+    kXwgrk: "xdt5ytf",
+    $$css: true
+  }
+};
+
+/** Props for a set of related actions treated as one control. */
+
+/**
+ * Groups related actions so they read as one control. Unlike `Toolbar` the
+ * actions here are alternatives to each other rather than separate commands.
+ */
+export function ButtonGroup({
+  children,
+  label,
+  orientation = 'horizontal',
+  ...props
+}) {
+  const groupRef = useRef(null);
+  const {
+    onKeyDown
+  } = useListFocus(groupRef, {
+    orientation
+  });
+  return /*#__PURE__*/_jsx("div", {
+    ...props,
+    "aria-label": label,
+    onKeyDown: onKeyDown,
+    ref: groupRef,
+    role: "group",
+    ...stylex.props(styles.group, styles[orientation]),
+    children: children
+  });
+}

package/dist/ButtonGroup/index.d.ts

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

package/dist/ButtonGroup/index.js

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

package/dist/Calendar/Calendar.d.ts

@@ -0,0 +1,27 @@
+import { type HTMLAttributes } from 'react';
+type SharedCalendarProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'defaultValue' | 'onChange' | 'role'> & {
+    readonly formatDay?: (date: Date) => string;
+    readonly formatMonth?: (date: Date) => string;
+    readonly label: string;
+    readonly max?: string;
+    readonly min?: string;
+    readonly onValueChange?: (value: string) => void;
+};
+type ControlledCalendarProps = SharedCalendarProps & {
+    readonly defaultValue?: never;
+    readonly onValueChange: (value: string) => void;
+    readonly value: string;
+};
+type UncontrolledCalendarProps = SharedCalendarProps & {
+    readonly defaultValue?: string;
+    readonly value?: never;
+};
+/** Props for a month grid of selectable dates. */
+export type CalendarProps = ControlledCalendarProps | UncontrolledCalendarProps;
+/**
+ * Selects a date from a month grid. Arrow keys move by day and week, Home and
+ * End reach the ends of the week, Page Up and Page Down move by month, so the
+ * whole grid is one tab stop.
+ */
+export declare function Calendar({ defaultValue, formatDay, formatMonth, label, max, min, onValueChange, value, ...props }: CalendarProps): import("react").JSX.Element;
+export {};

package/dist/Calendar/Calendar.doc.d.ts

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

package/dist/Calendar/Calendar.doc.js

@@ -0,0 +1,33 @@
+import "../styles/stylex.css";
+export const calendarDoc = {
+  name: 'Calendar',
+  description: 'Selects a date from a month grid.',
+  props: [{
+    name: 'defaultValue',
+    description: 'Sets the initial uncontrolled ISO date.'
+  }, {
+    name: 'formatDay',
+    description: 'Builds the accessible name of one day.'
+  }, {
+    name: 'formatMonth',
+    description: 'Builds the heading for the shown month.'
+  }, {
+    name: 'label',
+    description: 'Names the grid for assistive technology.'
+  }, {
+    name: 'max',
+    description: 'Blocks dates after this ISO date.'
+  }, {
+    name: 'min',
+    description: 'Blocks dates before this ISO date.'
+  }, {
+    name: 'onValueChange',
+    description: 'Receives the chosen ISO date.'
+  }, {
+    name: 'value',
+    description: 'Controls the selected ISO date.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLDivElement> except children, className, defaultValue, onChange, and role'],
+  example: '<Calendar label="Release date" onValueChange={setDate} value={date} />',
+  storyId: 'core-calendar--default'
+};