@noxickon/onyx 2.0.4 → 4.0.0

package/dist/layouts.d.ts

@@ -1,440 +0,0 @@
-import { ComponentPropsWithoutRef } from 'react';
-import { ComponentPropsWithRef } from 'react';
-import { IconProps } from '@mdi/react/dist/IconProps';
-import { JSX } from 'react/jsx-runtime';
-import { ReactNode } from 'react';
-
-declare const COLOR_STYLES: {
-    readonly purple: {
-        readonly background: "bg-purple-500/10";
-        readonly backgroundSolid: "bg-purple-500";
-        readonly text: "text-purple-400";
-        readonly border: "border border-purple-500/20";
-        readonly stroke: "stroke-purple-500";
-    };
-    readonly lime: {
-        readonly background: "bg-lime-400/10";
-        readonly backgroundSolid: "bg-lime-400";
-        readonly text: "text-lime-300";
-        readonly border: "border border-lime-400/20";
-        readonly stroke: "stroke-lime-400";
-    };
-    readonly red: {
-        readonly background: "bg-red-500/10";
-        readonly backgroundSolid: "bg-red-500";
-        readonly text: "text-red-400";
-        readonly border: "border border-red-500/20";
-        readonly stroke: "stroke-red-500";
-    };
-    readonly yellow: {
-        readonly background: "bg-yellow-500/10";
-        readonly backgroundSolid: "bg-yellow-500";
-        readonly text: "text-yellow-400";
-        readonly border: "border border-yellow-500/20";
-        readonly stroke: "stroke-yellow-500";
-    };
-    readonly green: {
-        readonly background: "bg-green-500/10";
-        readonly backgroundSolid: "bg-green-500";
-        readonly text: "text-green-400";
-        readonly border: "border border-green-500/20";
-        readonly stroke: "stroke-green-500";
-    };
-    readonly blue: {
-        readonly background: "bg-blue-500/10";
-        readonly backgroundSolid: "bg-blue-500";
-        readonly text: "text-blue-400";
-        readonly border: "border border-blue-500/20";
-        readonly stroke: "stroke-blue-500";
-    };
-    readonly indigo: {
-        readonly background: "bg-indigo-500/10";
-        readonly backgroundSolid: "bg-indigo-500";
-        readonly text: "text-indigo-400";
-        readonly border: "border border-indigo-500/20";
-        readonly stroke: "stroke-indigo-500";
-    };
-    readonly pink: {
-        readonly background: "bg-pink-500/10";
-        readonly backgroundSolid: "bg-pink-500";
-        readonly text: "text-pink-400";
-        readonly border: "border border-pink-500/20";
-        readonly stroke: "stroke-pink-500";
-    };
-    readonly amber: {
-        readonly background: "bg-amber-500/10";
-        readonly backgroundSolid: "bg-amber-500";
-        readonly text: "text-amber-400";
-        readonly border: "border border-amber-500/20";
-        readonly stroke: "stroke-amber-500";
-    };
-    readonly emerald: {
-        readonly background: "bg-emerald-500/10";
-        readonly backgroundSolid: "bg-emerald-500";
-        readonly text: "text-emerald-400";
-        readonly border: "border border-emerald-500/20";
-        readonly stroke: "stroke-emerald-500";
-    };
-    readonly teal: {
-        readonly background: "bg-teal-500/10";
-        readonly backgroundSolid: "bg-teal-500";
-        readonly text: "text-teal-400";
-        readonly border: "border border-teal-500/20";
-        readonly stroke: "stroke-teal-500";
-    };
-    readonly cyan: {
-        readonly background: "bg-cyan-500/10";
-        readonly backgroundSolid: "bg-cyan-500";
-        readonly text: "text-cyan-400";
-        readonly border: "border border-cyan-500/20";
-        readonly stroke: "stroke-cyan-500";
-    };
-    readonly sky: {
-        readonly background: "bg-sky-500/10";
-        readonly backgroundSolid: "bg-sky-500";
-        readonly text: "text-sky-400";
-        readonly border: "border border-sky-500/20";
-        readonly stroke: "stroke-sky-500";
-    };
-    readonly violet: {
-        readonly background: "bg-violet-500/10";
-        readonly backgroundSolid: "bg-violet-500";
-        readonly text: "text-violet-400";
-        readonly border: "border border-violet-500/20";
-        readonly stroke: "stroke-violet-500";
-    };
-    readonly fuchsia: {
-        readonly background: "bg-fuchsia-500/10";
-        readonly backgroundSolid: "bg-fuchsia-500";
-        readonly text: "text-fuchsia-400";
-        readonly border: "border border-fuchsia-500/20";
-        readonly stroke: "stroke-fuchsia-500";
-    };
-    readonly orange: {
-        readonly background: "bg-orange-500/10";
-        readonly backgroundSolid: "bg-orange-500";
-        readonly text: "text-orange-400";
-        readonly border: "border border-orange-500/20";
-        readonly stroke: "stroke-orange-500";
-    };
-    readonly rose: {
-        readonly background: "bg-rose-500/10";
-        readonly backgroundSolid: "bg-rose-500";
-        readonly text: "text-rose-400";
-        readonly border: "border border-rose-500/20";
-        readonly stroke: "stroke-rose-500";
-    };
-    readonly gray: {
-        readonly background: "bg-gray-1100/10";
-        readonly backgroundSolid: "bg-gray-1100";
-        readonly text: "text-gray-1100";
-        readonly border: "border border-gray-1100/20";
-        readonly stroke: "stroke-gray-1100";
-    };
-};
-
-declare type ColorStyleName = keyof typeof COLOR_STYLES;
-
-export declare const OxAppLayout: ({ children, className, ...domProps }: OxAppLayoutProps) => JSX.Element;
-
-export declare interface OxAppLayoutProps extends ComponentPropsWithRef<'div'> {
-    children: ReactNode;
-}
-
-declare interface OxHeaderProps extends ComponentPropsWithRef<'header'> {
-    brand?: ReactNode;
-    children: ReactNode;
-    hasSidebar?: boolean;
-    navClassName?: string;
-    toggleSidebar?: () => void;
-}
-
-declare interface OxIconProps extends Omit<IconProps, 'path'> {
-    path?: string;
-    placeholder?: boolean;
-}
-
-export declare const OxLegacyHeader: ({ brand, children, className, hasSidebar, navClassName, toggleSidebar, ...domProps }: OxHeaderProps) => JSX.Element;
-
-export declare const OxLegacyMainContent: ({ children, className, color, icon, subtitle, title, ...domProps }: OxMainContentProps_2) => JSX.Element;
-
-export declare const OxLegacySidebar: typeof OxSidebar_2 & {
-    Body: typeof OxSidebarBody;
-    Button: typeof OxSidebarButton;
-    Footer: typeof OxSidebarFooter;
-    Group: typeof OxSidebarGroup_2;
-    Header: typeof OxSidebarHeader;
-    Icon: typeof OxSidebarIcon;
-    Label: typeof OxSidebarLabel;
-    Link: typeof OxSidebarLink;
-};
-
-export declare const OxMainContent: (({ children, className, ...domProps }: OxMainContentProps) => JSX.Element) & {
-    Header: ({ children, className, ...domProps }: OxMainContentHeaderProps) => JSX.Element;
-    Body: ({ children, className, ...domProps }: OxMainContentBodyProps) => JSX.Element;
-};
-
-export declare interface OxMainContentBodyProps extends ComponentPropsWithRef<'div'> {
-    children: ReactNode;
-}
-
-export declare interface OxMainContentHeaderProps extends ComponentPropsWithRef<'div'> {
-    children: ReactNode;
-}
-
-export declare interface OxMainContentProps extends ComponentPropsWithRef<'main'> {
-    children: ReactNode;
-}
-
-declare interface OxMainContentProps_2 extends ComponentPropsWithRef<'main'> {
-    children: ReactNode;
-    color?: ColorStyleName;
-    icon?: string;
-    subtitle?: string;
-    title?: string;
-}
-
-export declare const OxSidebar: typeof OxSidebar_3 & {
-    Content: typeof OxSidebarContent;
-    Footer: typeof OxSidebarFooter_2;
-    Header: typeof OxSidebarHeader_2;
-    Separator: typeof OxSidebarSeparator;
-    Trigger: typeof OxSidebarTrigger;
-};
-
-declare const OxSidebar_2: ({ children, className, desktopCollapsed, hasHeader, mobileCollapsed, onClose, ...domProps }: OxSidebarProps_2) => JSX.Element;
-
-declare const OxSidebar_3: ({ children, className, ...domProps }: OxSidebarProps) => JSX.Element;
-
-declare const OxSidebarBody: ({ children, className, ...domProps }: OxSidebarBodyProps) => JSX.Element;
-
-declare interface OxSidebarBodyProps extends ComponentPropsWithRef<'div'> {
-    children: ReactNode;
-}
-
-declare const OxSidebarButton: ({ active, children, className, disabled, ...domProps }: OxSidebarButtonProps) => JSX.Element;
-
-declare interface OxSidebarButtonProps extends ComponentPropsWithRef<'button'> {
-    active?: boolean;
-    children: ReactNode;
-    onClick: () => void;
-}
-
-declare const OxSidebarContent: ({ children, className, ...domProps }: OxSidebarContentProps) => JSX.Element;
-
-export declare interface OxSidebarContentProps extends ComponentPropsWithRef<'div'> {
-    children: ReactNode;
-}
-
-declare interface OxSidebarContextType {
-    closeSidebar: () => void;
-    isMobile: boolean;
-    mobileOpen: boolean;
-    openSidebar: () => void;
-    toggleSidebar: () => void;
-}
-
-declare const OxSidebarFooter: ({ children, className, ...domProps }: OxSidebarFooterProps_2) => JSX.Element;
-
-declare const OxSidebarFooter_2: ({ children, className, ...domProps }: OxSidebarFooterProps) => JSX.Element;
-
-export declare interface OxSidebarFooterProps extends ComponentPropsWithRef<'div'> {
-    children: ReactNode;
-}
-
-declare interface OxSidebarFooterProps_2 extends ComponentPropsWithRef<'div'> {
-    children: ReactNode;
-}
-
-export declare const OxSidebarGroup: typeof OxSidebarGroup_3 & {
-    Action: typeof OxSidebarGroupAction;
-    Content: typeof OxSidebarGroupContent;
-    Label: typeof OxSidebarGroupLabel;
-};
-
-declare const OxSidebarGroup_2: ({ children, className, headline, ...domProps }: OxSidebarGroupProps_2) => JSX.Element;
-
-declare const OxSidebarGroup_3: ({ children, className, ...domProps }: OxSidebarGroupProps) => JSX.Element;
-
-declare const OxSidebarGroupAction: ({ children, className, ...domProps }: OxSidebarGroupActionProps) => JSX.Element;
-
-export declare interface OxSidebarGroupActionProps extends ComponentPropsWithRef<'button'> {
-    children: ReactNode;
-}
-
-declare const OxSidebarGroupContent: ({ children, className, ...domProps }: OxSidebarGroupContentProps) => JSX.Element;
-
-export declare interface OxSidebarGroupContentProps extends ComponentPropsWithRef<'div'> {
-    children: ReactNode;
-}
-
-declare const OxSidebarGroupLabel: ({ children, className, ...domProps }: OxSidebarGroupLabelProps) => JSX.Element;
-
-export declare interface OxSidebarGroupLabelProps extends ComponentPropsWithRef<'div'> {
-    children: ReactNode;
-}
-
-export declare interface OxSidebarGroupProps extends ComponentPropsWithRef<'div'> {
-    children: ReactNode;
-}
-
-declare interface OxSidebarGroupProps_2 extends ComponentPropsWithRef<'div'> {
-    children: ReactNode;
-    headline: string;
-}
-
-declare const OxSidebarHeader: ({ children, className, ...domProps }: OxSidebarHeaderProps_2) => JSX.Element;
-
-declare const OxSidebarHeader_2: ({ children, className, ...domProps }: OxSidebarHeaderProps) => JSX.Element;
-
-export declare interface OxSidebarHeaderProps extends ComponentPropsWithRef<'div'> {
-    children: ReactNode;
-}
-
-declare interface OxSidebarHeaderProps_2 extends ComponentPropsWithRef<'div'> {
-    children: ReactNode;
-}
-
-declare const OxSidebarIcon: ({ className, size, ...props }: OxSidebarIconProps) => JSX.Element;
-
-declare type OxSidebarIconProps = OxIconProps;
-
-declare const OxSidebarLabel: ({ children, className, ...domProps }: OxSidebarLabelProps) => JSX.Element;
-
-declare interface OxSidebarLabelProps extends ComponentPropsWithRef<'span'> {
-    children: ReactNode;
-}
-
-declare const OxSidebarLink: ({ active, children, className, disabled, href, ...domProps }: OxSidebarLinkProps) => JSX.Element;
-
-declare interface OxSidebarLinkProps extends ComponentPropsWithRef<'a'> {
-    active?: boolean;
-    children: ReactNode;
-    disabled?: boolean;
-    href: string;
-}
-
-export declare const OxSidebarMenu: typeof OxSidebarMenu_2 & {
-    Action: typeof OxSidebarMenuAction;
-    Badge: typeof OxSidebarMenuBadge;
-    Button: typeof OxSidebarMenuButton;
-    Icon: typeof OxSidebarMenuIcon;
-    Item: typeof OxSidebarMenuItem;
-    Skeleton: typeof OxSidebarMenuSkeleton;
-    Sub: typeof OxSidebarMenuSub;
-    SubButton: typeof OxSidebarMenuSubButton;
-    SubItem: typeof OxSidebarMenuSubItem;
-};
-
-declare const OxSidebarMenu_2: ({ children, className, ...domProps }: OxSidebarMenuProps) => JSX.Element;
-
-declare const OxSidebarMenuAction: ({ children, className, ...domProps }: OxSidebarMenuActionProps) => JSX.Element;
-
-export declare interface OxSidebarMenuActionProps extends ComponentPropsWithRef<'button'> {
-    children: ReactNode;
-}
-
-declare const OxSidebarMenuBadge: ({ children, className }: OxSidebarMenuBadgeProps) => JSX.Element;
-
-export declare interface OxSidebarMenuBadgeProps {
-    children: ReactNode;
-    className?: string;
-}
-
-declare const OxSidebarMenuButton: (props: OxSidebarMenuButtonProps) => JSX.Element;
-
-export declare type OxSidebarMenuButtonButtonProps = SidebarMenuButtonBaseProps & Omit<ComponentPropsWithRef<'button'>, keyof SidebarMenuButtonBaseProps | 'type'> & {
-    href?: never;
-    type?: 'button';
-};
-
-export declare type OxSidebarMenuButtonLinkProps = SidebarMenuButtonBaseProps & Omit<ComponentPropsWithRef<'a'>, keyof SidebarMenuButtonBaseProps | 'href'> & {
-    disabled?: boolean;
-    href: string;
-};
-
-export declare type OxSidebarMenuButtonProps = OxSidebarMenuButtonLinkProps | OxSidebarMenuButtonButtonProps;
-
-declare const OxSidebarMenuIcon: ({ className, path, placeholder }: OxSidebarMenuIconProps) => JSX.Element;
-
-export declare interface OxSidebarMenuIconProps {
-    className?: string;
-    path?: string;
-    placeholder?: boolean;
-}
-
-declare const OxSidebarMenuItem: ({ children, className, defaultOpen, hasSub, ...domProps }: OxSidebarMenuItemProps) => JSX.Element;
-
-export declare interface OxSidebarMenuItemProps extends ComponentPropsWithRef<'li'> {
-    children: ReactNode;
-    defaultOpen?: boolean;
-    hasSub?: boolean;
-}
-
-export declare interface OxSidebarMenuProps extends ComponentPropsWithRef<'ul'> {
-    children: ReactNode;
-}
-
-declare const OxSidebarMenuSkeleton: ({ className }: OxSidebarMenuSkeletonProps) => JSX.Element;
-
-export declare interface OxSidebarMenuSkeletonProps {
-    className?: string;
-}
-
-declare const OxSidebarMenuSub: ({ children, className, ...domProps }: OxSidebarMenuSubProps) => JSX.Element;
-
-declare const OxSidebarMenuSubButton: ({ children, className, href, ...domProps }: OxSidebarMenuSubButtonProps) => JSX.Element;
-
-export declare interface OxSidebarMenuSubButtonProps extends ComponentPropsWithRef<'button'> {
-    children: ReactNode;
-    href?: string;
-}
-
-declare const OxSidebarMenuSubItem: ({ children, className, ...domProps }: OxSidebarMenuSubItemProps) => JSX.Element;
-
-export declare interface OxSidebarMenuSubItemProps extends ComponentPropsWithRef<'li'> {
-    children: ReactNode;
-}
-
-export declare interface OxSidebarMenuSubProps extends ComponentPropsWithRef<'ul'> {
-    children: ReactNode;
-}
-
-export declare interface OxSidebarProps extends ComponentPropsWithoutRef<'aside'> {
-    children: ReactNode;
-}
-
-declare interface OxSidebarProps_2 extends ComponentPropsWithRef<'nav'> {
-    children: ReactNode;
-    desktopCollapsed?: boolean;
-    hasHeader?: boolean;
-    mobileCollapsed?: boolean;
-    onClose?: () => void;
-}
-
-export declare function OxSidebarProvider({ children }: OxSidebarProviderProps): JSX.Element;
-
-declare interface OxSidebarProviderProps {
-    children: ReactNode;
-}
-
-declare const OxSidebarSeparator: ({ className, ...domProps }: OxSidebarSeparatorProps) => JSX.Element;
-
-export declare interface OxSidebarSeparatorProps {
-    className?: string;
-}
-
-declare const OxSidebarTrigger: ({ className, onClick }: OxSidebarTriggerProps) => JSX.Element;
-
-export declare interface OxSidebarTriggerProps {
-    className?: string;
-    onClick?: () => void;
-}
-
-declare type SidebarMenuButtonBaseProps = {
-    children: ReactNode;
-};
-
-export declare function useOxSidebar(): OxSidebarContextType;
-
-export { }

package/dist/pages.d.ts

@@ -1,15 +0,0 @@
-import { ComponentPropsWithRef } from 'react';
-import { DocumentNode } from 'graphql';
-import { JSX } from 'react/jsx-runtime';
-
-export declare const OxLogin: ({ cacheQuery, className, mutation, onSubmit, subtitle, title, ...props }: OxLoginProps) => JSX.Element;
-
-export declare interface OxLoginProps extends ComponentPropsWithRef<'div'> {
-    cacheQuery?: DocumentNode;
-    mutation?: DocumentNode;
-    onSubmit: (response: unknown) => void;
-    subtitle?: string;
-    title?: string;
-}
-
-export { }

package/dist/routes.d.ts

@@ -1,28 +0,0 @@
-import { ReactNode } from 'react';
-
-export declare const OxGuestRoute: ({ children, onAuthenticated, onLoading, }: OxGuestRouteProps) => ReactNode;
-
-export declare interface OxGuestRouteProps {
-    children: ReactNode;
-    onAuthenticated?: ReactNode;
-    onLoading?: ReactNode;
-}
-
-export declare const OxProtectedRoute: ({ children, onLoading, onUnauthenticated, }: OxProtectedRouteProps) => ReactNode;
-
-export declare interface OxProtectedRouteProps {
-    children: ReactNode;
-    onLoading?: ReactNode;
-    onUnauthenticated?: ReactNode;
-}
-
-export declare const OxRoleRoute: ({ children, onLoading, onUnauthorized, roles, }: OxRoleRouteProps) => ReactNode;
-
-export declare interface OxRoleRouteProps {
-    children: ReactNode;
-    onLoading?: ReactNode;
-    onUnauthorized?: ReactNode;
-    roles?: string[];
-}
-
-export { }

package/dist/shared.css

@@ -1,129 +0,0 @@
-:root {
-  /* Menu components (Dropdown, Select, etc) */
-  --ox-menu-icon-col: 1;
-  --ox-menu-label-col: 2;
-  --ox-menu-shortcut-col: 3;
-}
-
-@theme {
-  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
-  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
-
-  --container-8xl: 88rem; /* 1408px */
-  --container-9xl: 96rem; /* 1536px */
-  --container-10xl: 104rem; /* 1664px */
-  --container-11xl: 112rem; /* 1792px */
-  --container-12xl: 120rem; /* 1920px - Full HD */
-  --container-13xl: 128rem; /* 2048px */
-  --container-14xl: 136rem; /* 2176px */
-  --container-15xl: 144rem; /* 2304px */
-  --container-16xl: 160rem; /* 2560px - 2K/QHD */
-
-  --text-xxs: 0.625rem;
-  --text-xxs--line-height: 0.875rem;
-  --text-xxxs: 0.5rem;
-  --text-xxxs--line-height: 0.75rem;
-
-  --color-gray-50: #0d0d0c;
-  --color-gray-100: #111110;
-  --color-gray-150: #161615;
-  --color-gray-200: #191918;
-  --color-gray-300: #222221;
-  --color-gray-400: #2a2a28;
-  --color-gray-500: #31312e;
-  --color-gray-600: #3b3a37;
-  --color-gray-700: #494844;
-  --color-gray-800: #62605b;
-  --color-gray-900: #6f6d66;
-  --color-gray-1000: #7c7b74;
-  --color-gray-1100: #b5b3ad;
-  --color-gray-1200: #fff;
-}
-
-@utility ox-default-disabled {
-  opacity: 50%;
-  cursor: not-allowed;
-  color: theme('colors.gray.800');
-}
-
-@layer components {
-  .ox-gray-border {
-    @apply border border-gray-400;
-  }
-
-  .ox-rose-border {
-    @apply border border-rose-400;
-  }
-
-  .ox-violet-outset-focus {
-    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-violet-700 focus-visible:ring-offset-1 focus-visible:ring-offset-gray-100;
-  }
-
-  .ox-violet-outset-within-focus {
-    @apply focus-within:ring-2 focus-within:ring-violet-700 focus-within:ring-offset-1 focus-within:ring-offset-gray-100;
-  }
-
-  .ox-violet-inset-focus {
-    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-violet-700 focus-visible:ring-inset;
-  }
-
-  .ox-gray-outset-focus {
-    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-1000 focus-visible:ring-offset-1 focus-visible:ring-offset-gray-100;
-  }
-
-  .ox-gray-inset-focus {
-    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-1000 focus-visible:ring-inset;
-  }
-
-  .ox-rose-outset-focus {
-    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:ring-offset-1 focus-visible:ring-offset-gray-100;
-  }
-
-  .ox-rose-inset-focus {
-    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:ring-inset;
-  }
-
-  .ox-backdrop-blur-parent {
-    backdrop-filter: blur(0);
-    -webkit-backdrop-filter: blur(0);
-  }
-
-  .ox-pagination-button-base {
-    @apply inline-flex items-center justify-center rounded-lg border border-transparent bg-transparent transition-colors duration-150 enabled:cursor-pointer enabled:text-gray-1200;
-  }
-
-  .ox-pagination-button {
-    @apply inline-flex items-center justify-center rounded-lg border border-transparent bg-transparent enabled:cursor-pointer enabled:text-gray-1200 enabled:hover:bg-gray-300 disabled:ox-default-disabled;
-  }
-
-  * {
-    scrollbar-width: thin;
-    scrollbar-color: color-mix(in oklab, var(--color-white) 25%, transparent) transparent;
-  }
-
-  *::-webkit-scrollbar {
-    width: 12px;
-  }
-
-  *::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  *::-webkit-scrollbar-thumb {
-    background-color: color-mix(in oklab, var(--color-white) 25%, transparent);
-    border-radius: 6px;
-    border: 3px solid transparent;
-  }
-
-  *::-webkit-scrollbar-thumb:hover {
-    background-color: color-mix(in oklab, var(--color-white) 40%, transparent);
-  }
-}
-
-input:-webkit-autofill,
-input:-webkit-autofill:hover,
-input:-webkit-autofill:focus,
-input:-webkit-autofill:active {
-  transition: background-color 5000s ease-in-out 0s;
-  -webkit-text-fill-color: white !important;
-}