@neasg/design-system 0.1.3 → 0.2.1

package/dist/theme.d.ts

@@ -30,6 +30,130 @@ export declare const neaPalette: {
         readonly name: "Green 900";
         readonly token: "--nea-green-900";
     }];
+    readonly blue: readonly [{
+        readonly name: "Blue 50";
+        readonly token: "--nea-blue-50";
+    }, {
+        readonly name: "Blue 100";
+        readonly token: "--nea-blue-100";
+    }, {
+        readonly name: "Blue 200";
+        readonly token: "--nea-blue-200";
+    }, {
+        readonly name: "Blue 300";
+        readonly token: "--nea-blue-300";
+    }, {
+        readonly name: "Blue 400";
+        readonly token: "--nea-blue-400";
+    }, {
+        readonly name: "Blue 500";
+        readonly token: "--nea-blue-500";
+    }, {
+        readonly name: "Blue 600";
+        readonly token: "--nea-blue-600";
+    }, {
+        readonly name: "Blue 700";
+        readonly token: "--nea-blue-700";
+    }, {
+        readonly name: "Blue 800";
+        readonly token: "--nea-blue-800";
+    }, {
+        readonly name: "Blue 900";
+        readonly token: "--nea-blue-900";
+    }];
+    readonly amber: readonly [{
+        readonly name: "Amber 50";
+        readonly token: "--nea-amber-50";
+    }, {
+        readonly name: "Amber 100";
+        readonly token: "--nea-amber-100";
+    }, {
+        readonly name: "Amber 200";
+        readonly token: "--nea-amber-200";
+    }, {
+        readonly name: "Amber 300";
+        readonly token: "--nea-amber-300";
+    }, {
+        readonly name: "Amber 400";
+        readonly token: "--nea-amber-400";
+    }, {
+        readonly name: "Amber 500";
+        readonly token: "--nea-amber-500";
+    }, {
+        readonly name: "Amber 600";
+        readonly token: "--nea-amber-600";
+    }, {
+        readonly name: "Amber 700";
+        readonly token: "--nea-amber-700";
+    }, {
+        readonly name: "Amber 800";
+        readonly token: "--nea-amber-800";
+    }, {
+        readonly name: "Amber 900";
+        readonly token: "--nea-amber-900";
+    }];
+    readonly red: readonly [{
+        readonly name: "Red 50";
+        readonly token: "--nea-red-50";
+    }, {
+        readonly name: "Red 100";
+        readonly token: "--nea-red-100";
+    }, {
+        readonly name: "Red 200";
+        readonly token: "--nea-red-200";
+    }, {
+        readonly name: "Red 300";
+        readonly token: "--nea-red-300";
+    }, {
+        readonly name: "Red 400";
+        readonly token: "--nea-red-400";
+    }, {
+        readonly name: "Red 500";
+        readonly token: "--nea-red-500";
+    }, {
+        readonly name: "Red 600";
+        readonly token: "--nea-red-600";
+    }, {
+        readonly name: "Red 700";
+        readonly token: "--nea-red-700";
+    }, {
+        readonly name: "Red 800";
+        readonly token: "--nea-red-800";
+    }, {
+        readonly name: "Red 900";
+        readonly token: "--nea-red-900";
+    }];
+    readonly violet: readonly [{
+        readonly name: "Violet 50";
+        readonly token: "--nea-violet-50";
+    }, {
+        readonly name: "Violet 100";
+        readonly token: "--nea-violet-100";
+    }, {
+        readonly name: "Violet 200";
+        readonly token: "--nea-violet-200";
+    }, {
+        readonly name: "Violet 300";
+        readonly token: "--nea-violet-300";
+    }, {
+        readonly name: "Violet 400";
+        readonly token: "--nea-violet-400";
+    }, {
+        readonly name: "Violet 500";
+        readonly token: "--nea-violet-500";
+    }, {
+        readonly name: "Violet 600";
+        readonly token: "--nea-violet-600";
+    }, {
+        readonly name: "Violet 700";
+        readonly token: "--nea-violet-700";
+    }, {
+        readonly name: "Violet 800";
+        readonly token: "--nea-violet-800";
+    }, {
+        readonly name: "Violet 900";
+        readonly token: "--nea-violet-900";
+    }];
     readonly neutral: readonly [{
         readonly name: "Neutral 0";
         readonly token: "--nea-neutral-0";
@@ -100,6 +224,26 @@ export declare const semanticColorTokens: readonly [{
     readonly name: "Destructive";
     readonly token: "--destructive";
     readonly foregroundToken: "--destructive-foreground";
+}, {
+    readonly name: "Status Success";
+    readonly token: "--status-success";
+    readonly foregroundToken: "--status-success-foreground";
+}, {
+    readonly name: "Status Warning";
+    readonly token: "--status-warning";
+    readonly foregroundToken: "--status-warning-foreground";
+}, {
+    readonly name: "Status Info";
+    readonly token: "--status-info";
+    readonly foregroundToken: "--status-info-foreground";
+}, {
+    readonly name: "Status Accent";
+    readonly token: "--status-accent";
+    readonly foregroundToken: "--status-accent-foreground";
+}, {
+    readonly name: "Status Destructive";
+    readonly token: "--status-destructive";
+    readonly foregroundToken: "--status-destructive-foreground";
 }, {
     readonly name: "Border";
     readonly token: "--border";
@@ -110,3 +254,118 @@ export declare const semanticColorTokens: readonly [{
     readonly name: "Ring";
     readonly token: "--ring";
 }];
+export declare const typographyTokens: readonly [{
+    readonly name: "Sans Font";
+    readonly token: "--font-sans";
+}, {
+    readonly name: "Monospace Font";
+    readonly token: "--font-mono";
+}, {
+    readonly name: "Root Font Size";
+    readonly token: "--font-size-root";
+}, {
+    readonly name: "Weight Regular";
+    readonly token: "--font-weight-regular";
+}, {
+    readonly name: "Weight Medium";
+    readonly token: "--font-weight-medium";
+}, {
+    readonly name: "Weight Semibold";
+    readonly token: "--font-weight-semibold";
+}, {
+    readonly name: "Weight Bold";
+    readonly token: "--font-weight-bold";
+}];
+export declare const radiusTokens: readonly [{
+    readonly name: "Base Radius";
+    readonly token: "--radius";
+}, {
+    readonly name: "Radius Small";
+    readonly token: "--radius-sm";
+}, {
+    readonly name: "Radius Medium";
+    readonly token: "--radius-md";
+}, {
+    readonly name: "Radius Large";
+    readonly token: "--radius-lg";
+}, {
+    readonly name: "Radius XLarge";
+    readonly token: "--radius-xl";
+}];
+export declare const spacingTokens: readonly [{
+    readonly name: "Space 0";
+    readonly token: "--space-0";
+}, {
+    readonly name: "Space 1";
+    readonly token: "--space-1";
+}, {
+    readonly name: "Space 2";
+    readonly token: "--space-2";
+}, {
+    readonly name: "Space 3";
+    readonly token: "--space-3";
+}, {
+    readonly name: "Space 4";
+    readonly token: "--space-4";
+}, {
+    readonly name: "Space 5";
+    readonly token: "--space-5";
+}, {
+    readonly name: "Space 6";
+    readonly token: "--space-6";
+}, {
+    readonly name: "Space 8";
+    readonly token: "--space-8";
+}, {
+    readonly name: "Space 10";
+    readonly token: "--space-10";
+}, {
+    readonly name: "Space 12";
+    readonly token: "--space-12";
+}];
+export declare const layoutTokens: readonly [{
+    readonly name: "Shell Background";
+    readonly token: "--layout-shell-background";
+}, {
+    readonly name: "Sidebar Width";
+    readonly token: "--layout-sidebar-width";
+}, {
+    readonly name: "Sidebar Collapsed Width";
+    readonly token: "--layout-sidebar-collapsed-width";
+}, {
+    readonly name: "Sidebar Padding Inline";
+    readonly token: "--layout-sidebar-padding-inline";
+}, {
+    readonly name: "Sidebar Padding Top";
+    readonly token: "--layout-sidebar-padding-top";
+}, {
+    readonly name: "Content Gap Start";
+    readonly token: "--layout-content-gap-start";
+}, {
+    readonly name: "Content Gap Start MD";
+    readonly token: "--layout-content-gap-start-md";
+}, {
+    readonly name: "Content Gap Start LG";
+    readonly token: "--layout-content-gap-start-lg";
+}, {
+    readonly name: "Content Padding";
+    readonly token: "--layout-content-padding";
+}, {
+    readonly name: "Content Padding MD";
+    readonly token: "--layout-content-padding-md";
+}, {
+    readonly name: "Content Padding LG";
+    readonly token: "--layout-content-padding-lg";
+}, {
+    readonly name: "Surface Padding";
+    readonly token: "--layout-surface-padding";
+}, {
+    readonly name: "Surface Padding MD";
+    readonly token: "--layout-surface-padding-md";
+}, {
+    readonly name: "Surface Padding LG";
+    readonly token: "--layout-surface-padding-lg";
+}, {
+    readonly name: "Surface Gap";
+    readonly token: "--layout-surface-gap";
+}];

package/dist/theme.js

@@ -11,6 +11,54 @@ export const neaPalette = {
         { name: "Green 800", token: "--nea-green-800" },
         { name: "Green 900", token: "--nea-green-900" },
     ],
+    blue: [
+        { name: "Blue 50", token: "--nea-blue-50" },
+        { name: "Blue 100", token: "--nea-blue-100" },
+        { name: "Blue 200", token: "--nea-blue-200" },
+        { name: "Blue 300", token: "--nea-blue-300" },
+        { name: "Blue 400", token: "--nea-blue-400" },
+        { name: "Blue 500", token: "--nea-blue-500" },
+        { name: "Blue 600", token: "--nea-blue-600" },
+        { name: "Blue 700", token: "--nea-blue-700" },
+        { name: "Blue 800", token: "--nea-blue-800" },
+        { name: "Blue 900", token: "--nea-blue-900" },
+    ],
+    amber: [
+        { name: "Amber 50", token: "--nea-amber-50" },
+        { name: "Amber 100", token: "--nea-amber-100" },
+        { name: "Amber 200", token: "--nea-amber-200" },
+        { name: "Amber 300", token: "--nea-amber-300" },
+        { name: "Amber 400", token: "--nea-amber-400" },
+        { name: "Amber 500", token: "--nea-amber-500" },
+        { name: "Amber 600", token: "--nea-amber-600" },
+        { name: "Amber 700", token: "--nea-amber-700" },
+        { name: "Amber 800", token: "--nea-amber-800" },
+        { name: "Amber 900", token: "--nea-amber-900" },
+    ],
+    red: [
+        { name: "Red 50", token: "--nea-red-50" },
+        { name: "Red 100", token: "--nea-red-100" },
+        { name: "Red 200", token: "--nea-red-200" },
+        { name: "Red 300", token: "--nea-red-300" },
+        { name: "Red 400", token: "--nea-red-400" },
+        { name: "Red 500", token: "--nea-red-500" },
+        { name: "Red 600", token: "--nea-red-600" },
+        { name: "Red 700", token: "--nea-red-700" },
+        { name: "Red 800", token: "--nea-red-800" },
+        { name: "Red 900", token: "--nea-red-900" },
+    ],
+    violet: [
+        { name: "Violet 50", token: "--nea-violet-50" },
+        { name: "Violet 100", token: "--nea-violet-100" },
+        { name: "Violet 200", token: "--nea-violet-200" },
+        { name: "Violet 300", token: "--nea-violet-300" },
+        { name: "Violet 400", token: "--nea-violet-400" },
+        { name: "Violet 500", token: "--nea-violet-500" },
+        { name: "Violet 600", token: "--nea-violet-600" },
+        { name: "Violet 700", token: "--nea-violet-700" },
+        { name: "Violet 800", token: "--nea-violet-800" },
+        { name: "Violet 900", token: "--nea-violet-900" },
+    ],
     neutral: [
         { name: "Neutral 0", token: "--nea-neutral-0" },
         { name: "Neutral 50", token: "--nea-neutral-50" },
@@ -35,7 +83,77 @@ export const semanticColorTokens = [
     { name: "Muted", token: "--muted", foregroundToken: "--muted-foreground" },
     { name: "Accent", token: "--accent", foregroundToken: "--accent-foreground" },
     { name: "Destructive", token: "--destructive", foregroundToken: "--destructive-foreground" },
+    {
+        name: "Status Success",
+        token: "--status-success",
+        foregroundToken: "--status-success-foreground",
+    },
+    {
+        name: "Status Warning",
+        token: "--status-warning",
+        foregroundToken: "--status-warning-foreground",
+    },
+    {
+        name: "Status Info",
+        token: "--status-info",
+        foregroundToken: "--status-info-foreground",
+    },
+    {
+        name: "Status Accent",
+        token: "--status-accent",
+        foregroundToken: "--status-accent-foreground",
+    },
+    {
+        name: "Status Destructive",
+        token: "--status-destructive",
+        foregroundToken: "--status-destructive-foreground",
+    },
     { name: "Border", token: "--border" },
     { name: "Input", token: "--input" },
     { name: "Ring", token: "--ring" },
 ];
+export const typographyTokens = [
+    { name: "Sans Font", token: "--font-sans" },
+    { name: "Monospace Font", token: "--font-mono" },
+    { name: "Root Font Size", token: "--font-size-root" },
+    { name: "Weight Regular", token: "--font-weight-regular" },
+    { name: "Weight Medium", token: "--font-weight-medium" },
+    { name: "Weight Semibold", token: "--font-weight-semibold" },
+    { name: "Weight Bold", token: "--font-weight-bold" },
+];
+export const radiusTokens = [
+    { name: "Base Radius", token: "--radius" },
+    { name: "Radius Small", token: "--radius-sm" },
+    { name: "Radius Medium", token: "--radius-md" },
+    { name: "Radius Large", token: "--radius-lg" },
+    { name: "Radius XLarge", token: "--radius-xl" },
+];
+export const spacingTokens = [
+    { name: "Space 0", token: "--space-0" },
+    { name: "Space 1", token: "--space-1" },
+    { name: "Space 2", token: "--space-2" },
+    { name: "Space 3", token: "--space-3" },
+    { name: "Space 4", token: "--space-4" },
+    { name: "Space 5", token: "--space-5" },
+    { name: "Space 6", token: "--space-6" },
+    { name: "Space 8", token: "--space-8" },
+    { name: "Space 10", token: "--space-10" },
+    { name: "Space 12", token: "--space-12" },
+];
+export const layoutTokens = [
+    { name: "Shell Background", token: "--layout-shell-background" },
+    { name: "Sidebar Width", token: "--layout-sidebar-width" },
+    { name: "Sidebar Collapsed Width", token: "--layout-sidebar-collapsed-width" },
+    { name: "Sidebar Padding Inline", token: "--layout-sidebar-padding-inline" },
+    { name: "Sidebar Padding Top", token: "--layout-sidebar-padding-top" },
+    { name: "Content Gap Start", token: "--layout-content-gap-start" },
+    { name: "Content Gap Start MD", token: "--layout-content-gap-start-md" },
+    { name: "Content Gap Start LG", token: "--layout-content-gap-start-lg" },
+    { name: "Content Padding", token: "--layout-content-padding" },
+    { name: "Content Padding MD", token: "--layout-content-padding-md" },
+    { name: "Content Padding LG", token: "--layout-content-padding-lg" },
+    { name: "Surface Padding", token: "--layout-surface-padding" },
+    { name: "Surface Padding MD", token: "--layout-surface-padding-md" },
+    { name: "Surface Padding LG", token: "--layout-surface-padding-lg" },
+    { name: "Surface Gap", token: "--layout-surface-gap" },
+];

package/dist/tooltip.d.ts

@@ -1,7 +1,19 @@
 import * as React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
-declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
+declare function TooltipProvider({ delayDuration, ...props }: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>): import("react/jsx-runtime").JSX.Element;
+declare const TooltipRoot: React.FC<TooltipPrimitive.TooltipProps>;
 declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+export interface TooltipProps {
+    content: React.ReactNode;
+    children: React.ReactElement;
+    delayDuration?: number;
+    side?: React.ComponentProps<typeof TooltipContent>["side"];
+    sideOffset?: number;
+    contentClassName?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+declare function Tooltip({ content, children, delayDuration, side, sideOffset, contentClassName, open, defaultOpen, onOpenChange, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export { Tooltip, TooltipRoot, TooltipTrigger, TooltipContent, TooltipProvider };

package/dist/tooltip.js

@@ -1,11 +1,16 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { cn } from "./lib/utils";
-const TooltipProvider = TooltipPrimitive.Provider;
-const Tooltip = TooltipPrimitive.Root;
+function TooltipProvider({ delayDuration = 100, ...props }) {
+    return _jsx(TooltipPrimitive.Provider, { delayDuration: delayDuration, ...props });
+}
+const TooltipRoot = TooltipPrimitive.Root;
 const TooltipTrigger = TooltipPrimitive.Trigger;
 const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn("z-50 overflow-hidden rounded-md bg-[#111827] px-3 py-1.5 text-sm text-white shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className), ...props }) })));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+function Tooltip({ content, children, delayDuration = 100, side = "top", sideOffset = 4, contentClassName, open, defaultOpen, onOpenChange, }) {
+    return (_jsx(TooltipProvider, { delayDuration: delayDuration, children: _jsxs(TooltipRoot, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, children: [_jsx(TooltipTrigger, { asChild: true, children: children }), _jsx(TooltipContent, { side: side, sideOffset: sideOffset, className: contentClassName, children: content })] }) }));
+}
+export { Tooltip, TooltipRoot, TooltipTrigger, TooltipContent, TooltipProvider };

package/dist/typography.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const typographyVariants: (props?: ({
+    variant?: "label" | "body" | "caption" | "title" | "heading" | "subheading" | "bodySm" | "eyebrow" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface TypographyProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof typographyVariants> {
+    as?: keyof React.JSX.IntrinsicElements;
+    asChild?: boolean;
+}
+declare const Typography: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLElement>>;
+export { Typography, typographyVariants };

package/dist/typography.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "./lib/utils";
+const typographyVariants = cva("", {
+    variants: {
+        variant: {
+            title: "text-2xl font-bold tracking-tight text-foreground",
+            heading: "text-xl font-semibold tracking-tight text-foreground",
+            subheading: "text-lg font-semibold text-foreground",
+            body: "text-base leading-6 text-foreground",
+            bodySm: "text-sm leading-6 text-foreground",
+            label: "text-sm font-medium leading-none text-foreground",
+            caption: "text-sm leading-5 text-muted-foreground",
+            eyebrow: "text-xs font-semibold uppercase tracking-wider text-muted-foreground",
+        },
+    },
+    defaultVariants: {
+        variant: "body",
+    },
+});
+const defaultElementByVariant = {
+    title: "h2",
+    heading: "h3",
+    subheading: "h4",
+    body: "p",
+    bodySm: "p",
+    label: "span",
+    caption: "span",
+    eyebrow: "span",
+};
+const Typography = React.forwardRef(({ as, asChild = false, className, variant, ...props }, ref) => {
+    const resolvedVariant = (variant !== null && variant !== void 0 ? variant : "body");
+    const Comp = asChild
+        ? Slot
+        : as !== null && as !== void 0 ? as : defaultElementByVariant[resolvedVariant];
+    return (_jsx(Comp, { ref: ref, className: cn(typographyVariants({ variant: resolvedVariant }), className), ...props }));
+});
+Typography.displayName = "Typography";
+export { Typography, typographyVariants };

package/dist/use-search-highlight.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+export interface SearchHighlightSegment {
+    text: string;
+    matched: boolean;
+}
+declare function useSearchHighlight(text: string, query: string): SearchHighlightSegment[];
+export interface SearchHighlightProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+    text: string;
+    query: string;
+    markClassName?: string;
+}
+declare function SearchHighlight({ text, query, className, markClassName, ...props }: SearchHighlightProps): import("react/jsx-runtime").JSX.Element;
+export { SearchHighlight, useSearchHighlight };

package/dist/use-search-highlight.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "./lib/utils";
+function createSearchHighlightSegments(text, query) {
+    if (!text) {
+        return [];
+    }
+    const normalizedQuery = query.trim();
+    if (!normalizedQuery) {
+        return [{ text, matched: false }];
+    }
+    const normalizedText = text.toLocaleLowerCase();
+    const normalizedMatch = normalizedQuery.toLocaleLowerCase();
+    const segments = [];
+    let cursor = 0;
+    while (cursor < text.length) {
+        const matchIndex = normalizedText.indexOf(normalizedMatch, cursor);
+        if (matchIndex === -1) {
+            segments.push({
+                text: text.slice(cursor),
+                matched: false,
+            });
+            break;
+        }
+        if (matchIndex > cursor) {
+            segments.push({
+                text: text.slice(cursor, matchIndex),
+                matched: false,
+            });
+        }
+        segments.push({
+            text: text.slice(matchIndex, matchIndex + normalizedQuery.length),
+            matched: true,
+        });
+        cursor = matchIndex + normalizedQuery.length;
+    }
+    return segments.length ? segments : [{ text, matched: false }];
+}
+function useSearchHighlight(text, query) {
+    return React.useMemo(() => createSearchHighlightSegments(text, query), [query, text]);
+}
+function SearchHighlight({ text, query, className, markClassName, ...props }) {
+    const segments = useSearchHighlight(text, query);
+    return (_jsx("span", { className: className, ...props, children: segments.map((segment, index) => segment.matched ? (_jsx("mark", { className: cn("rounded-[2px] bg-[hsl(var(--status-warning))] px-0.5 font-medium text-[hsl(var(--status-warning-foreground))]", markClassName), children: segment.text }, `${segment.text}-${index}`)) : (_jsx(React.Fragment, { children: segment.text }, `${segment.text}-${index}`))) }));
+}
+export { SearchHighlight, useSearchHighlight };