@sragatiping/cuboid 0.1.0 → 0.1.3

package/dist/components/core/Callout/Callout.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Callout } from './Callout';
+declare const meta: Meta<typeof Callout>;
+export default meta;
+type Story = StoryObj<typeof Callout>;
+export declare const Default: Story;
+export declare const InProse: Story;
+export declare const Multiline: Story;
+export declare const MutedSurface: Story;
+export declare const Playground: Story;

package/dist/components/core/Callout/index.d.ts

@@ -0,0 +1,2 @@
+export { Callout } from './Callout';
+export type { CalloutProps, CalloutBackground } from './Callout';

package/dist/components/core/Container/Container.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+import { CubeTheme, LayoutWidth, StackPadding } from '../../../theme/types';
+export type ContainerWidth = Extract<LayoutWidth, "page" | "content" | "full">;
+export interface ContainerProps {
+    as?: React.ElementType;
+    /** Max content width — `page` (site shell) or `content` (reading column). */
+    width?: ContainerWidth;
+    /** Center horizontally with `margin-inline: auto`. Default true. */
+    center?: boolean;
+    /** Inline padding — defaults to layout `pagePaddingInline` token. */
+    paddingInline?: StackPadding | false;
+    /** Minimum block size — `screen` sets `min-height: 100svh`. */
+    minHeight?: "screen";
+    theme?: CubeTheme;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+/**
+ * Page shell — max-width, horizontal padding, and optional vertical fill.
+ * Replaces ad-hoc `#root` / layout wrapper CSS in consuming apps.
+ */
+export declare function Container({ as, width, center, paddingInline, minHeight, theme, className, style, children, }: ContainerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/core/Container/Container.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Container } from './Container';
+declare const meta: Meta<typeof Container>;
+export default meta;
+type Story = StoryObj<typeof Container>;
+export declare const PageWidth: Story;
+export declare const ContentWidth: Story;
+export declare const FullWidth: Story;
+export declare const MinHeightScreen: Story;
+export declare const Playground: Story;

package/dist/components/core/Container/index.d.ts

@@ -0,0 +1,2 @@
+export { Container } from './Container';
+export type { ContainerProps, ContainerWidth } from './Container';

package/dist/components/core/Divider/Divider.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { CubeTheme, GlobalColorPath } from '../../../theme/types';
+export type DividerColor = GlobalColorPath;
+export interface DividerProps {
+    /** Horizontal rule spanning the container width (default). */
+    orientation?: "horizontal";
+    /**
+     * Line color from `colors.global`, or any CSS color string.
+     * @default "border.gray.2"
+     */
+    color?: DividerColor;
+    theme?: CubeTheme;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/** Horizontal separator using global border tokens. */
+export declare function Divider({ orientation, color, theme, className, style, }: DividerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/core/Divider/Divider.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Divider } from './Divider';
+declare const meta: Meta<typeof Divider>;
+export default meta;
+type Story = StoryObj<typeof Divider>;
+export declare const Default: Story;
+export declare const Muted: Story;
+export declare const ListRows: Story;
+export declare const Playground: Story;

package/dist/components/core/Divider/index.d.ts

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

package/dist/components/core/Highlight/Highlight.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { CubeTheme, HighlightColor } from '../../../theme/types';
+export type { HighlightColor };
+export interface HighlightProps {
+    /** Background tint — maps to Figma `HighlightedText` `color`. Default `yellow`. */
+    color?: HighlightColor;
+    theme?: CubeTheme;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+/**
+ * Inline marker emphasis inside body copy. Renders semantic `<mark>` and inherits
+ * surrounding font metrics — pair with {@link Text} `variant="bodyMedium"`.
+ */
+export declare function Highlight({ color, theme, className, style, children, }: HighlightProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/core/Highlight/Highlight.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Highlight } from './Highlight';
+declare const meta: Meta<typeof Highlight>;
+export default meta;
+type Story = StoryObj<typeof Highlight>;
+export declare const Default: Story;
+export declare const AllColors: Story;
+export declare const InSentence: Story;

package/dist/components/core/Highlight/index.d.ts

@@ -0,0 +1,2 @@
+export { Highlight } from './Highlight';
+export type { HighlightProps, HighlightColor } from './Highlight';

package/dist/components/core/Link/Link.d.ts

@@ -1,11 +1,11 @@
 import { default as React } from 'react';
 import { CubeTheme, LinkFunctionalColors } from '../../../theme/types';
-export type LinkVariant = keyof LinkFunctionalColors;
-export interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "children"> {
-    href: string;
+export type LinkVariant = keyof LinkFunctionalColors | "inherit";
+type LinkOwnProps = {
     /**
      * `inline` — inside body copy; inherits font from parent.
      * `standalone` — nav, footer, contact rows.
+     * `inherit` — composition wrapper (e.g. pill links); no underline, inherits color.
      */
     variant?: LinkVariant;
     /** Opens in a new tab with `rel="noopener noreferrer"`. */
@@ -13,6 +13,11 @@ export interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorEle
     /** Show ↗ icon when `external` (default true). */
     showExternalIcon?: boolean;
     theme?: CubeTheme;
+    className?: string;
     children: React.ReactNode;
-}
-export declare function Link({ href, variant, external, showExternalIcon, theme, children, className, target, rel, ...rest }: LinkProps): import("react/jsx-runtime").JSX.Element;
+};
+export type LinkProps<E extends React.ElementType = "a"> = LinkOwnProps & Omit<React.ComponentPropsWithoutRef<E>, keyof LinkOwnProps | "as"> & {
+    as?: E;
+};
+export declare function Link<E extends React.ElementType = "a">({ as, href, variant, external, showExternalIcon, theme, children, className, target, rel, style, ...rest }: LinkProps<E>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/core/Pill/Pill.d.ts

@@ -1,10 +1,10 @@
 import { default as React } from 'react';
-import { CubeTheme, PillIntensity, PillSurface, ThemeTokens } from '../../../theme/types';
+import { CubeTheme, PillIntensity, PillSurface, TextTokens } from '../../../theme/types';
 import { default as themeOutput } from '../../../theme/output/theme.json';
 /** Shade keys from `pillColors` in theme.json — add `yellow.json`, etc. alongside `gray.json`. */
 export type PillShade = keyof typeof themeOutput.pillColors;
+export type PillTextVariant = keyof TextTokens;
 export type { PillIntensity, PillSurface };
-type PillElement = "span" | "a";
 export interface PillProps {
     /** Color family — maps to Figma `shade` (token file per shade). */
     shade?: PillShade;
@@ -12,14 +12,20 @@ export interface PillProps {
     intensity?: PillIntensity;
     /** When true, uses the `bordered` surface recipe (Figma `border?`). */
     border?: boolean;
-    /** Render as static label (`span`) or link (`a` when `href` is set). */
-    as?: PillElement;
+    /**
+     * Text size — defaults to `bodySmall` (12px). Override when the pill should match
+     * a different `Text` variant.
+     */
+    variant?: PillTextVariant;
+    /** Render as static label, anchor, or a custom component (e.g. react-router `Link`). */
+    as?: React.ElementType;
     href?: string;
-    size?: keyof ThemeTokens["sizes"]["pill"];
     leadingVisual?: React.ReactNode;
     trailingVisual?: React.ReactNode;
+    /** Override chip geometry (`sizes.pill`) or colors for this instance. */
     theme?: CubeTheme;
     className?: string;
     children?: React.ReactNode;
 }
-export declare function Pill({ shade, intensity, border, as, href, size, leadingVisual, trailingVisual, theme, className, children, style, ...rest }: PillProps & Omit<React.HTMLAttributes<HTMLElement>, "children">): import("react/jsx-runtime").JSX.Element;
+/** Static chip / tag — not a button; colors do not change on hover. */
+export declare function Pill({ shade, intensity, border, variant, as, href, leadingVisual, trailingVisual, theme, className, children, style, ...rest }: PillProps & Omit<React.HTMLAttributes<HTMLElement>, "children">): import("react/jsx-runtime").JSX.Element;

package/dist/components/core/Pill/Pill.stories.d.ts

@@ -4,3 +4,6 @@ declare const meta: Meta<typeof Pill>;
 export default meta;
 type Story = StoryObj<typeof Pill>;
 export declare const Playground: Story;
+export declare const AllVariantsFilled: Story;
+export declare const AllVariantsBordered: Story;
+export declare const WithBodyMedium: Story;

package/dist/components/core/Pill/index.d.ts

@@ -1,3 +1,3 @@
 export { Pill } from './Pill';
-export type { PillProps, PillShade } from './Pill';
+export type { PillProps, PillShade, PillTextVariant } from './Pill';
 export type { PillIntensity, PillSurface } from '../../../theme/types';

package/dist/components/core/Popover/Popover.d.ts

@@ -8,7 +8,7 @@ export interface PopoverProps {
     /** When omitted, open state is managed internally (toggle on trigger click). */
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
-    /** Anchor element — must be a single React element that accepts event props. */
+    /** Anchor control — positioned relative to Popover’s wrapper, not the child ref. */
     trigger: React.ReactElement;
     /** Panel content — menus, forms, or any interactive UI. */
     children: React.ReactNode;

package/dist/components/core/Stack/Stack.d.ts

@@ -1,43 +1,34 @@
 import { default as React, CSSProperties } from 'react';
-import { CubeTheme, StackGap, StackPadding } from '../../../theme/types';
+import { CubeTheme, LayoutWidth, StackGap, StackPadding } from '../../../theme/types';
 import { Responsive } from '../../../utils/responsive';
 export type StackDirection = "horizontal" | "vertical";
-export type { StackGap, StackPadding };
+export type { StackGap, StackPadding, LayoutWidth };
 /** @deprecated Use `StackGap` or `StackPadding`. */
 export type { StackGap as StackSpacing };
-export interface StackProps {
-    /** HTML element or component to render as (default: div) */
+export interface StackProps extends Omit<React.HTMLAttributes<HTMLElement>, "color"> {
     as?: React.ElementType;
-    /** Flex direction — scalar or `{ sm, md, lg }` for responsive layout */
     direction?: Responsive<StackDirection>;
-    /** Gap between children — `none`, `xxs` … `xxl`; responsive supported */
     gap?: Responsive<StackGap>;
-    /** Padding on all sides — same scale as gap; overridden by `paddingBlock` / `paddingInline` */
     padding?: Responsive<StackPadding>;
-    /** Block-axis padding (overrides `padding` on block axis) */
     paddingBlock?: Responsive<StackPadding>;
-    /** Inline-axis padding (overrides `padding` on inline axis) */
     paddingInline?: Responsive<StackPadding>;
-    /** align-items — responsive supported */
     align?: Responsive<CSSProperties["alignItems"]>;
-    /** justify-content — responsive supported */
     justify?: Responsive<CSSProperties["justifyContent"]>;
-    /** Allow children to wrap — responsive supported */
     wrap?: Responsive<boolean>;
+    grow?: boolean | number;
+    shrink?: boolean | number;
+    width?: LayoutWidth;
+    minWidth?: 0;
     theme?: CubeTheme;
     style?: CSSProperties;
     className?: string;
     children?: React.ReactNode;
 }
 /**
- * Flex-based layout primitive. Replaces raw <div> usage for arranging
- * children horizontally or vertically with consistent spacing.
+ * Flex-based layout primitive. Scalar layout props map to CSS module modifiers
+ * that read global `--cube-stack-*` tokens (same pattern as {@link Button}).
  *
- * `gap` uses `none`, `xxs`, `xs`, `sm`, `md`, `lg`, `xl`, `xxl`.
- * `padding`, `paddingBlock`, and `paddingInline` use the same stop names.
- * Directional padding props override the matching axis from `padding`.
- *
- * Responsive: pass `{ sm, md, lg }` on layout props (mobile-first).
- * `sm` = default; `md` / `lg` override at `--cube-breakpoint-md` / `--cube-breakpoint-lg`.
+ * Responsive object props (`{ sm, md, lg }`) still set per-tier `--stack-*` vars
+ * on the element. Local `theme` overrides re-bind `--cube-stack-*` scale tokens.
  */
-export declare function Stack({ as: As, direction, gap, padding, paddingBlock, paddingInline, align, justify, wrap, theme, style, className, children, }: StackProps): import("react/jsx-runtime").JSX.Element;
+export declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLElement>>;

package/dist/components/core/Stack/index.d.ts

@@ -1,3 +1,3 @@
 export { Stack } from './Stack';
-export type { StackProps, StackDirection, StackGap, StackPadding, StackSpacing } from './Stack';
+export type { StackProps, StackDirection, StackGap, StackPadding, StackSpacing, LayoutWidth, } from './Stack';
 export type { Breakpoint, Responsive } from '../../../utils/responsive';

package/dist/components/core/Text/Text.d.ts

@@ -1,19 +1,19 @@
 import { default as React, CSSProperties } from 'react';
-import { CubeTheme, TextTokens } from '../../../theme/types';
+import { CubeTheme, GlobalColorPath, TextTokens } from '../../../theme/types';
 export type TextVariant = keyof TextTokens;
-/** Shorthand names for functional foreground tokens */
-export type TextColor = "default" | "muted" | "onEmphasis" | "disabled" | "link" | "white" | "neutral";
+/** @deprecated Use global paths — e.g. `text.muted` instead of `"muted"`. */
+export type TextColor = GlobalColorPath;
 export interface TextProps {
     /** Override the default HTML element for this variant */
     as?: React.ElementType;
     /** Maps to a named text style from the theme */
     variant?: TextVariant;
     /**
-     * Functional foreground color name, or any raw CSS color string.
-     * @example "muted"       → theme.colors.functional.foreground.muted
-     * @example "#ff0000"     → used as-is
+     * Color from `colors.global` (dot-path), or any raw CSS color string.
+     * @default "fg.neutral.muted"
+     * @example "text.muted" | "fg.blue.contrast" | "#ff0000"
      */
-    color?: TextColor | string;
+    color?: GlobalColorPath;
     align?: CSSProperties["textAlign"];
     /** Truncate with ellipsis on a single line */
     truncate?: boolean;

package/dist/components/core/index.d.ts

@@ -1,5 +1,15 @@
 export { Stack } from './Stack';
-export type { StackProps, StackGap, StackPadding, StackSpacing } from './Stack';
+export type { StackProps, StackGap, StackPadding, StackSpacing, LayoutWidth } from './Stack';
+export { Container } from './Container';
+export type { ContainerProps, ContainerWidth } from './Container';
+export { Box } from './Box';
+export type { BoxProps, BoxBackground, BoxBorder, BoxBorderRadius, BoxForeground, BoxOverflow, } from './Box';
+export { Divider } from './Divider';
+export type { DividerProps, DividerColor } from './Divider';
+export { Callout } from './Callout';
+export type { CalloutProps } from './Callout';
+export { Highlight } from './Highlight';
+export type { HighlightProps, HighlightColor } from './Highlight';
 export { Text } from './Text';
 export type { TextProps, TextVariant, TextColor } from './Text';
 export { Button } from './Button';