@once-ui-system/core 1.6.4 → 1.7.1

package/dist/src/index.d.ts

@@ -0,0 +1,9 @@
+export * from "./components";
+export * from "./contexts";
+export * from "./modules";
+export * from "./icons";
+export * from "./types";
+export * from "./interfaces";
+export * from "./utils";
+export * from "./hooks";
+export * from "./server";

package/dist/src/modules/code/CodeBlock.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { CodeBlockProps } from "./CodeBlock.impl";
+declare const CodeBlock: React.FC<CodeBlockProps>;
+export { CodeBlock };
+export type { CodeBlockProps };

package/dist/src/modules/code/CodeBlock.impl.d.ts

@@ -0,0 +1,33 @@
+import React, { ReactNode } from "react";
+import { SpacingToken } from "../../types";
+import { Flex } from "../../components";
+type CodeInstance = {
+    code: string | {
+        content: string;
+        error: string | null;
+    };
+    language: string | ["diff", string];
+    label: string;
+    highlight?: string;
+    prefixIcon?: string;
+    startLineNumber?: number;
+};
+export interface CodeBlockProps extends React.ComponentProps<typeof Flex> {
+    codeHeight?: number;
+    fillHeight?: boolean;
+    previewPadding?: SpacingToken;
+    codes?: CodeInstance[];
+    preview?: ReactNode;
+    copyButton?: boolean;
+    styleButton?: boolean;
+    reloadButton?: boolean;
+    fullscreenButton?: boolean;
+    compact?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    onInstanceChange?: (index: number) => void;
+    lineNumbers?: boolean;
+    highlight?: string;
+}
+declare const CodeBlock: React.FC<CodeBlockProps>;
+export default CodeBlock;

package/dist/src/modules/data/BarChart.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { BarChartProps } from "./BarChart.impl";
+declare const BarChart: React.FC<BarChartProps>;
+export { BarChart };
+export type { BarChartProps };

package/dist/src/modules/data/BarChart.impl.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { ChartProps, barWidth } from ".";
+export interface BarChartProps extends ChartProps {
+    barWidth?: barWidth;
+    hover?: boolean;
+    reverseY?: boolean;
+    reverseX?: boolean;
+    "data-viz-style"?: string;
+}
+declare const BarChart: React.FC<BarChartProps>;
+export default BarChart;

package/dist/src/modules/data/ChartHeader.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { Column, DateRange } from "../../components";
+import { DateConfig, PresetsConfig } from "./interfaces";
+interface ChartHeaderProps extends Omit<React.ComponentProps<typeof Column>, "title" | "description"> {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    dateRange?: DateRange;
+    date?: DateConfig;
+    onDateRangeChange?: (range: DateRange) => void;
+    presets?: PresetsConfig;
+}
+export declare const ChartHeader: React.FC<ChartHeaderProps>;
+export type { ChartHeaderProps };

package/dist/src/modules/data/ChartStatus.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface ChartStatusProps {
+    loading?: boolean;
+    empty?: boolean;
+    error?: boolean;
+    emptyState?: React.ReactNode;
+    errorState?: React.ReactNode;
+}
+export declare const ChartStatus: React.FC<ChartStatusProps>;

package/dist/src/modules/data/DataTooltip.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { ChartVariant, DateConfig } from "./interfaces";
+interface DataTooltipProps {
+    active?: boolean;
+    payload?: readonly any[];
+    label?: string | number;
+    dataKey?: string;
+    DataTooltip?: React.ReactNode;
+    date?: DateConfig;
+    colors?: boolean;
+    variant?: ChartVariant;
+}
+declare const DataTooltip: React.FC<DataTooltipProps>;
+export { DataTooltip };
+export type { DataTooltipProps };

package/dist/src/modules/data/Gradient.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import { ChartVariant } from "./interfaces";
+interface GradientStop {
+    offset: string;
+    opacity: number;
+    variant?: ChartVariant;
+}
+interface LinearGradientProps {
+    id: string;
+    color: string;
+    x1?: string;
+    y1?: string;
+    x2?: string;
+    y2?: string;
+    stops?: GradientStop[];
+    variant?: ChartVariant;
+}
+interface RadialGradientProps {
+    id: string;
+    color: string;
+    cx?: string;
+    cy?: string;
+    r?: string;
+    fx?: string;
+    fy?: string;
+    stops?: GradientStop[];
+    variant?: ChartVariant;
+}
+export declare const LinearGradient: React.FC<LinearGradientProps>;
+export declare const RadialGradient: React.FC<RadialGradientProps>;
+export {};

package/dist/src/modules/data/Legend.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { ChartVariant } from "./interfaces";
+interface LegendProps {
+    payload?: readonly any[];
+    labels?: "x" | "y" | "both" | "none";
+    colors?: string[];
+    reverseY?: boolean;
+    direction?: "row" | "column";
+    position?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-center" | "bottom-center";
+    variant?: ChartVariant;
+}
+declare const Legend: React.FC<LegendProps>;
+export { Legend };
+export type { LegendProps };

package/dist/src/modules/data/LineBarChart.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { LineBarChartProps } from "./LineBarChart.impl";
+declare const LineBarChart: React.FC<LineBarChartProps>;
+export { LineBarChart };
+export type { LineBarChartProps };

package/dist/src/modules/data/LineBarChart.impl.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { ChartProps, barWidth, curveType } from ".";
+export interface LineBarChartProps extends ChartProps {
+    barWidth?: barWidth;
+    curve?: curveType;
+    reverseY?: boolean;
+    reverseX?: boolean;
+    "data-viz-style"?: string;
+}
+declare const LineBarChart: React.FC<LineBarChartProps>;
+export default LineBarChart;

package/dist/src/modules/data/LineChart.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { LineChartProps } from "./LineChart.impl";
+declare const LineChart: React.FC<LineChartProps>;
+export { LineChart };
+export type { LineChartProps };

package/dist/src/modules/data/LineChart.impl.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { ChartProps, curveType } from ".";
+export interface LineChartProps extends ChartProps {
+    curve?: curveType;
+    reverseY?: boolean;
+    reverseX?: boolean;
+    animation?: boolean;
+    animationBegin?: number;
+    animationDuration?: number;
+    animationEasing?: unknown;
+    xAxisType?: "number" | "category";
+    xDomain?: [number, number];
+    "data-viz-style"?: string;
+}
+declare const LineChart: React.FC<LineChartProps>;
+export default LineChart;

package/dist/src/modules/data/LinearGauge.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { Flex } from "../../";
+interface LinearGaugeProps extends React.ComponentProps<typeof Flex> {
+    width?: number;
+    height?: number;
+    line?: {
+        count?: number;
+        width?: number;
+        length?: number;
+    };
+    value?: number;
+    labels?: "none" | "percentage" | string[];
+    hue?: "success" | "neutral" | "danger" | [number, number];
+    color?: string;
+}
+export declare const LinearGauge: ({ width, height, line, value, labels, hue, color, ...flex }: LinearGaugeProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/modules/data/PieChart.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { PieChartProps } from "./PieChart.impl";
+declare const PieChart: React.FC<PieChartProps>;
+export { PieChart };
+export type { PieChartProps };

package/dist/src/modules/data/PieChart.impl.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { ChartProps } from "../../";
+export interface PieChartProps extends ChartProps {
+    "data-viz-style"?: string;
+    ring?: {
+        inner: number;
+        outer: number;
+    };
+    dataKey?: string;
+    nameKey?: string;
+    origo?: {
+        x: number;
+        y: number;
+    };
+}
+declare const PieChart: React.FC<PieChartProps>;
+export default PieChart;

package/dist/src/modules/data/RadialGauge.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { Column } from "../../";
+interface RadialGaugeProps extends Omit<React.ComponentProps<typeof Column>, 'direction'> {
+    width?: number;
+    height?: number;
+    line?: {
+        count?: number;
+        width?: number;
+        length?: number;
+    };
+    unit?: React.ReactNode;
+    value?: number;
+    angle?: {
+        start: number;
+        sweep: number;
+    };
+    direction?: 'cw' | 'ccw';
+    edgePad?: number;
+    children?: React.ReactNode;
+    hue?: "success" | "neutral" | "danger" | [number, number];
+    color?: string;
+}
+export declare const RadialGauge: ({ width, height, line, value, angle, direction, edgePad, unit, children, hue, color, ...flex }: RadialGaugeProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/modules/data/Swatch.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { ChartVariant } from "./interfaces";
+export interface SwatchProps {
+    color: string;
+    size?: "s" | "m";
+    variant?: ChartVariant;
+}
+export declare const Swatch: React.FC<SwatchProps>;

package/dist/src/modules/data/index.d.ts

@@ -0,0 +1,13 @@
+export * from "./interfaces";
+export * from "./LineChart";
+export * from "./BarChart";
+export * from "./PieChart";
+export * from "./LineBarChart";
+export * from "./RadialGauge";
+export * from "./LinearGauge";
+export * from "./ChartHeader";
+export * from "./ChartStatus";
+export * from "./Gradient";
+export * from "./DataTooltip";
+export * from "./Legend";
+export * from "./Swatch";

package/dist/src/modules/data/interfaces.d.ts

@@ -0,0 +1,52 @@
+import { Flex, DateRange } from "../../components";
+import { TShirtSizes } from "../../types";
+import { CurveType } from "recharts/types/shape/Curve";
+type ChartVariant = "flat" | "gradient" | "outline";
+type ChartMode = "categorical" | "divergent" | "sequential";
+type barWidth = TShirtSizes | "fill" | number;
+type curveType = CurveType;
+interface DataPoint {
+    [key: string]: string | number | Date | undefined;
+    label?: string;
+}
+interface SeriesConfig {
+    key: string;
+    color?: string;
+}
+interface PresetsConfig {
+    display: boolean;
+    granularity: "year" | "month" | "week";
+}
+interface DateConfig {
+    start?: Date;
+    end?: Date;
+    max?: Date;
+    min?: Date;
+    dual?: boolean;
+    format?: string;
+    presets?: PresetsConfig;
+    selector?: boolean;
+    onChange?: (range: DateRange) => void;
+}
+interface legendConfig {
+    display?: boolean;
+    direction?: "row" | "column";
+    position?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-center" | "bottom-center";
+}
+interface ChartProps extends Omit<React.ComponentProps<typeof Flex>, "title" | "description"> {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    series: SeriesConfig | SeriesConfig[];
+    data: DataPoint[];
+    legend?: legendConfig;
+    date?: DateConfig;
+    emptyState?: React.ReactNode;
+    errorState?: React.ReactNode;
+    error?: boolean;
+    tooltip?: boolean;
+    grid?: "x" | "y" | "both" | "none";
+    axis?: "x" | "y" | "both" | "none";
+    variant?: ChartVariant;
+    loading?: boolean;
+}
+export type { DataPoint, SeriesConfig, DateConfig, PresetsConfig, ChartProps, ChartVariant, barWidth, curveType, ChartMode, };

package/dist/src/modules/data/utils/formatDate.d.ts

@@ -0,0 +1,11 @@
+import { DateConfig } from "../interfaces";
+/**
+ * Formats a value as a date if it's a valid date and a format is provided
+ * Otherwise returns the original value or label if available
+ *
+ * @param value - The value to format (could be a date, string, or any other value)
+ * @param dateConfig - Optional date configuration with format string
+ * @param dataPoint - Optional data point object that might contain a label property
+ * @returns Formatted date string or original value
+ */
+export declare function formatDate(value: any, dateConfig?: DateConfig, dataPoint?: Record<string, any>): string;

package/dist/src/modules/index.d.ts

@@ -0,0 +1,7 @@
+export { CodeBlock } from "./code/CodeBlock";
+export { MediaUpload } from "./media/MediaUpload";
+export { Meta } from "./seo/Meta";
+export { Schema } from "./seo/Schema";
+export { Kbar, MobileMegaMenu, MegaMenu, HeadingLink, HeadingNav } from "./navigation";
+export { ChartHeader, ChartStatus, LinearGradient, RadialGradient, BarChart, LineChart, PieChart, LineBarChart, DataTooltip, Legend, RadialGauge, LinearGauge } from "./data";
+export type { ChartProps, ChartVariant, ChartMode, DataPoint } from "./data";

package/dist/src/modules/media/MediaUpload.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { MediaUploadProps } from "./MediaUpload.impl";
+declare const MediaUpload: React.ForwardRefExoticComponent<Omit<MediaUploadProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export { MediaUpload };
+export type { MediaUploadProps };

package/dist/src/modules/media/MediaUpload.impl.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import { Flex } from "../../";
+export interface MediaUploadProps extends React.ComponentProps<typeof Flex> {
+    onFileUpload?: (file: File) => Promise<void>;
+    compress?: boolean;
+    aspectRatio?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    initialPreviewImage?: string | null;
+    emptyState?: React.ReactNode;
+    quality?: number;
+    sizes?: string;
+    children?: React.ReactNode;
+    convertTypes?: string[];
+    resizeMaxWidth?: number;
+    resizeMaxHeight?: number;
+    resizeWidth?: number;
+    resizeHeight?: number;
+    loading?: boolean;
+    accept?: string;
+}
+declare const MediaUpload: React.ForwardRefExoticComponent<Omit<MediaUploadProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export default MediaUpload;

package/dist/src/modules/navigation/HeadingLink.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { Row } from "../../components";
+interface HeadingLinkProps extends React.ComponentProps<typeof Row> {
+    id: string;
+    as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+}
+export declare const HeadingLink: React.FC<HeadingLinkProps>;
+export {};

package/dist/src/modules/navigation/HeadingNav.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { Flex } from "../../";
+interface props extends React.ComponentProps<typeof Flex> {
+    header?: boolean;
+}
+declare const HeadingNav: React.ForwardRefExoticComponent<Omit<props, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { HeadingNav };

package/dist/src/modules/navigation/Kbar.d.ts

@@ -0,0 +1,33 @@
+import React, { ReactNode } from "react";
+export interface KbarItem {
+    id: string;
+    name: string;
+    section: string;
+    shortcut: string[];
+    keywords: string;
+    href?: string;
+    perform?: () => void;
+    icon?: string;
+    description?: ReactNode;
+    placeholder?: string;
+}
+interface KbarTriggerProps {
+    onClick?: () => void;
+    children: React.ReactNode;
+    [key: string]: any;
+}
+export declare const KbarTrigger: React.FC<KbarTriggerProps>;
+interface KbarContentProps {
+    isOpen: boolean;
+    onClose: () => void;
+    items: KbarItem[];
+    placeholder?: string;
+}
+export declare const KbarContent: React.FC<KbarContentProps>;
+export interface KbarProps {
+    items: KbarItem[];
+    children: React.ReactNode;
+    [key: string]: any;
+}
+export declare const Kbar: React.FC<KbarProps>;
+export {};

package/dist/src/modules/navigation/MegaMenu.d.ts

@@ -0,0 +1,27 @@
+import React, { ReactNode } from "react";
+import { Flex } from "../../";
+export interface MenuLink {
+    label: ReactNode;
+    href: string;
+    icon?: string;
+    description?: ReactNode;
+    selected?: boolean;
+}
+export interface MenuSection {
+    title?: ReactNode;
+    links: MenuLink[];
+}
+export interface MenuGroup {
+    id: string;
+    label: ReactNode;
+    suffixIcon?: string;
+    href?: string;
+    selected?: boolean;
+    sections?: MenuSection[];
+    content?: ReactNode;
+}
+export interface MegaMenuProps extends React.ComponentProps<typeof Flex> {
+    menuGroups: MenuGroup[];
+    className?: string;
+}
+export declare const MegaMenu: React.FC<MegaMenuProps>;

package/dist/src/modules/navigation/MobileMegaMenu.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+import { Flex } from "../../";
+interface MenuLink {
+    label: React.ReactNode;
+    href: string;
+    icon?: string;
+    description?: React.ReactNode;
+    selected?: boolean;
+}
+interface MenuSection {
+    title?: React.ReactNode;
+    links: MenuLink[];
+}
+interface MenuGroup {
+    id: string;
+    label: React.ReactNode;
+    suffixIcon?: string;
+    href?: string;
+    selected?: boolean;
+    sections?: MenuSection[];
+}
+interface MobileMegaMenuProps extends React.ComponentProps<typeof Flex> {
+    menuGroups: MenuGroup[];
+    onClose?: () => void;
+}
+declare const MobileMegaMenu: React.FC<MobileMegaMenuProps>;
+export { MobileMegaMenu };

package/dist/src/modules/navigation/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./MegaMenu";
+export * from "./MobileMegaMenu";
+export * from "./HeadingNav";
+export * from "./HeadingLink";
+export * from "./Kbar";

package/dist/src/utils/MissingDependency.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export interface MissingDependencyProps {
+    component: string;
+    packageName: string;
+}
+export declare const MissingDependency: React.FC<MissingDependencyProps>;

package/dist/src/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./devLogger";
+export * from "./MissingDependency";

package/dist/styles/size.scss

@@ -24,6 +24,26 @@
   height: fit-content;
 }
 
+.max-width-xs { 
+  max-width: var(--responsive-width-xs);
+}
+
+.max-width-s  { 
+  max-width: var(--responsive-width-s);
+}
+
+.max-width-m  { 
+  max-width: var(--responsive-width-m);
+}
+
+.max-width-l  { 
+  max-width: var(--responsive-width-l);
+}
+
+.max-width-xl { 
+  max-width: var(--responsive-width-xl);
+}
+
 .min-width-0 {
   min-width: 0;
 }

package/dist/test/dialogTestUtils.d.ts

@@ -0,0 +1,2 @@
+export declare const resetDialogState: () => void;
+//# sourceMappingURL=dialogTestUtils.d.ts.map

package/dist/test/dialogTestUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialogTestUtils.d.ts","sourceRoot":"","sources":["../../src/test/dialogTestUtils.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,YAW5B,CAAC"}

package/dist/test/dialogTestUtils.js

@@ -0,0 +1,12 @@
+export const resetDialogState = () => {
+    document.body.innerHTML = "";
+    document.body.style.overflow = "";
+    document.body.style.paddingRight = "";
+    document.documentElement.style.overflow = "";
+    document.body.childNodes.forEach((node) => {
+        if (node instanceof HTMLElement) {
+            node.inert = false;
+        }
+    });
+};
+//# sourceMappingURL=dialogTestUtils.js.map

package/dist/test/dialogTestUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialogTestUtils.js","sourceRoot":"","sources":["../../src/test/dialogTestUtils.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE;IACnC,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;IAC7B,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC;IAClC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,EAAE,CAAC;IACtC,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC;IAE7C,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;QACxC,IAAI,IAAI,YAAY,WAAW,EAAE,CAAC;YAChC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACrB,CAAC;IACH,CAAC,CAAC,CAAC;AACL,CAAC,CAAC"}

package/dist/test/setup.d.ts

@@ -0,0 +1,2 @@
+import "@testing-library/jest-dom";
+//# sourceMappingURL=setup.d.ts.map

package/dist/test/setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../src/test/setup.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC"}

package/dist/test/setup.js

@@ -0,0 +1,59 @@
+import "@testing-library/jest-dom";
+import { cleanup } from "@testing-library/react";
+import { afterEach, vi } from "vitest";
+class ResizeObserverMock {
+    observe() { }
+    unobserve() { }
+    disconnect() { }
+}
+const installBrowserMocks = () => {
+    if (!("ResizeObserver" in globalThis)) {
+        Object.defineProperty(globalThis, "ResizeObserver", {
+            configurable: true,
+            writable: true,
+            value: ResizeObserverMock,
+        });
+    }
+    Object.defineProperty(window, "scrollTo", {
+        configurable: true,
+        writable: true,
+        value: vi.fn(),
+    });
+    Object.defineProperty(window, "matchMedia", {
+        configurable: true,
+        writable: true,
+        value: vi.fn().mockImplementation((query) => ({
+            matches: false,
+            media: query,
+            onchange: null,
+            addListener: vi.fn(),
+            removeListener: vi.fn(),
+            addEventListener: vi.fn(),
+            removeEventListener: vi.fn(),
+            dispatchEvent: vi.fn(),
+        })),
+    });
+};
+installBrowserMocks();
+if (!("inert" in HTMLElement.prototype)) {
+    Object.defineProperty(HTMLElement.prototype, "inert", {
+        configurable: true,
+        get() {
+            return this.hasAttribute("inert");
+        },
+        set(value) {
+            if (value) {
+                this.setAttribute("inert", "");
+            }
+            else {
+                this.removeAttribute("inert");
+            }
+        },
+    });
+}
+afterEach(() => {
+    cleanup();
+    vi.restoreAllMocks();
+    installBrowserMocks();
+});
+//# sourceMappingURL=setup.js.map