@engrate/components 0.1.7 → 0.1.9

package/dist/components/ui/EngrateLogo/EngrateLogo.d.ts

@@ -0,0 +1,22 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const engrateLogoVariants: (props?: ({
+    size?: "sm" | "lg" | "md" | "xl" | "xs" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type ResponsiveCompact = boolean | {
+    base?: boolean;
+    sm?: boolean;
+    md?: boolean;
+    lg?: boolean;
+    xl?: boolean;
+    '2xl'?: boolean;
+};
+interface EngrateLogoProps extends React.SVGAttributes<SVGSVGElement>, VariantProps<typeof engrateLogoVariants> {
+    /**
+     * Show only the icon without the wordmark.
+     * Supports responsive values: `{ base: true, md: false }`
+     */
+    compact?: ResponsiveCompact;
+}
+declare const EngrateLogo: React.ForwardRefExoticComponent<EngrateLogoProps & React.RefAttributes<SVGSVGElement>>;
+export { EngrateLogo, engrateLogoVariants, type EngrateLogoProps, type ResponsiveCompact, };

package/dist/components/ui/EngrateLogo/index.d.ts

@@ -0,0 +1 @@
+export { EngrateLogo, engrateLogoVariants, type EngrateLogoProps, type ResponsiveCompact, } from './EngrateLogo';

package/dist/components/ui/Footer/Footer.d.ts

@@ -0,0 +1,86 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const footerVariants: (props?: ({
+    variant?: "default" | "filled" | "dark" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+interface FooterProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof footerVariants> {
+    /** Render as a child component */
+    asChild?: boolean;
+}
+/**
+ * Footer component for page footer content.
+ * Supports multiple variants and sizes for different use cases.
+ *
+ * @example
+ * ```tsx
+ * <Footer>
+ *   <FooterContent>
+ *     <FooterSection>
+ *       <FooterHeading>Company</FooterHeading>
+ *       <FooterLinks>
+ *         <Link href="/about">About</Link>
+ *         <Link href="/careers">Careers</Link>
+ *       </FooterLinks>
+ *     </FooterSection>
+ *   </FooterContent>
+ *   <FooterBottom>
+ *     <FooterCopyright>© 2026 Engrate</FooterCopyright>
+ *   </FooterBottom>
+ * </Footer>
+ * ```
+ */
+declare const Footer: React.ForwardRefExoticComponent<FooterProps & React.RefAttributes<HTMLElement>>;
+interface FooterContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Render as a child component */
+    asChild?: boolean;
+}
+/**
+ * Main content container for footer sections.
+ * Provides a responsive grid layout for footer columns.
+ */
+declare const FooterContent: React.ForwardRefExoticComponent<FooterContentProps & React.RefAttributes<HTMLDivElement>>;
+interface FooterSectionProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Render as a child component */
+    asChild?: boolean;
+}
+/**
+ * A section/column within the footer content.
+ * Typically contains a heading and a list of links.
+ */
+declare const FooterSection: React.ForwardRefExoticComponent<FooterSectionProps & React.RefAttributes<HTMLDivElement>>;
+interface FooterHeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    /** Render as a child component */
+    asChild?: boolean;
+}
+/**
+ * Heading for a footer section.
+ */
+declare const FooterHeading: React.ForwardRefExoticComponent<FooterHeadingProps & React.RefAttributes<HTMLHeadingElement>>;
+interface FooterLinksProps extends React.HTMLAttributes<HTMLElement> {
+    /** Render as a child component */
+    asChild?: boolean;
+}
+/**
+ * Container for navigation links within a footer section.
+ */
+declare const FooterLinks: React.ForwardRefExoticComponent<FooterLinksProps & React.RefAttributes<HTMLElement>>;
+interface FooterBottomProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Render as a child component */
+    asChild?: boolean;
+}
+/**
+ * Bottom section of the footer.
+ * Typically contains copyright text and legal links.
+ */
+declare const FooterBottom: React.ForwardRefExoticComponent<FooterBottomProps & React.RefAttributes<HTMLDivElement>>;
+interface FooterCopyrightProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    /** Render as a child component */
+    asChild?: boolean;
+}
+/**
+ * Copyright text component for the footer.
+ */
+declare const FooterCopyright: React.ForwardRefExoticComponent<FooterCopyrightProps & React.RefAttributes<HTMLParagraphElement>>;
+export { Footer, footerVariants, FooterContent, FooterSection, FooterHeading, FooterLinks, FooterBottom, FooterCopyright, };
+export type { FooterProps, FooterContentProps, FooterSectionProps, FooterHeadingProps, FooterLinksProps, FooterBottomProps, FooterCopyrightProps, };

package/dist/components/ui/Footer/index.d.ts

@@ -0,0 +1,2 @@
+export { Footer, footerVariants, FooterContent, FooterSection, FooterHeading, FooterLinks, FooterBottom, FooterCopyright, } from './Footer';
+export type { FooterProps, FooterContentProps, FooterSectionProps, FooterHeadingProps, FooterLinksProps, FooterBottomProps, FooterCopyrightProps, } from './Footer';

package/dist/components/ui/Grid/Grid.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 declare const gridVariants: (props?: ({
     cols?: 1 | 2 | 3 | 4 | 5 | 12 | 6 | null | undefined;
     gap?: "none" | "sm" | "lg" | "md" | "xl" | "xs" | "2xl" | null | undefined;
-    align?: "end" | "start" | "center" | "stretch" | "baseline" | null | undefined;
+    align?: "end" | "start" | "center" | "baseline" | "stretch" | null | undefined;
     justify?: "end" | "start" | "center" | "stretch" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type ColsValue = 1 | 2 | 3 | 4 | 5 | 6 | 12;

package/dist/components/ui/Header/Header.d.ts

@@ -0,0 +1,60 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const headerVariants: (props?: ({
+    variant?: "default" | "transparent" | "filled" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+    sticky?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+interface HeaderProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof headerVariants> {
+    /** Render as a child component */
+    asChild?: boolean;
+}
+/**
+ * Header component for page navigation and branding.
+ * Supports multiple variants and sticky positioning.
+ *
+ * @example
+ * ```tsx
+ * <Header>
+ *   <HeaderLogo>
+ *     <EngrateLogo />
+ *   </HeaderLogo>
+ *   <HeaderNav>
+ *     <Link variant="nav" href="/about">About</Link>
+ *   </HeaderNav>
+ *   <HeaderActions>
+ *     <Button>Sign In</Button>
+ *   </HeaderActions>
+ * </Header>
+ * ```
+ */
+declare const Header: React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLElement>>;
+interface HeaderLogoProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Render as a child component */
+    asChild?: boolean;
+}
+/**
+ * Container for the logo within the Header.
+ * Typically wraps an EngrateLogo or custom logo component.
+ */
+declare const HeaderLogo: React.ForwardRefExoticComponent<HeaderLogoProps & React.RefAttributes<HTMLDivElement>>;
+interface HeaderNavProps extends React.HTMLAttributes<HTMLElement> {
+    /** Render as a child component */
+    asChild?: boolean;
+}
+/**
+ * Navigation container within the Header.
+ * Wraps navigation links in a flex container.
+ */
+declare const HeaderNav: React.ForwardRefExoticComponent<HeaderNavProps & React.RefAttributes<HTMLElement>>;
+interface HeaderActionsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Render as a child component */
+    asChild?: boolean;
+}
+/**
+ * Container for action buttons/links in the Header.
+ * Typically contains CTAs like "Sign In" or "Get Started".
+ */
+declare const HeaderActions: React.ForwardRefExoticComponent<HeaderActionsProps & React.RefAttributes<HTMLDivElement>>;
+export { Header, headerVariants, HeaderLogo, HeaderNav, HeaderActions };
+export type { HeaderProps, HeaderLogoProps, HeaderNavProps, HeaderActionsProps };

package/dist/components/ui/Header/index.d.ts

@@ -0,0 +1,2 @@
+export { Header, headerVariants, HeaderLogo, HeaderNav, HeaderActions, } from './Header';
+export type { HeaderProps, HeaderLogoProps, HeaderNavProps, HeaderActionsProps, } from './Header';

package/dist/components/ui/Sidebar/Sidebar.d.ts

@@ -0,0 +1,105 @@
+import { VariantProps } from 'class-variance-authority';
+import { EngrateLogoProps } from '../EngrateLogo';
+import * as React from 'react';
+interface SidebarContextValue {
+    collapsed: boolean;
+    setCollapsed: (collapsed: boolean) => void;
+    collapsible: boolean;
+}
+declare function useSidebarContext(): SidebarContextValue;
+declare const sidebarVariants: (props?: ({
+    variant?: "default" | "bordered" | null | undefined;
+    width?: "default" | "sm" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+interface SidebarProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof sidebarVariants> {
+    /** Whether the sidebar is in collapsed state */
+    defaultCollapsed?: boolean;
+    /** Controlled collapsed state */
+    collapsed?: boolean;
+    /** Callback when collapsed state changes */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** Whether the sidebar is collapsible */
+    collapsible?: boolean;
+    /** Automatically collapse on mobile screens (default: true) */
+    autoCollapseMobile?: boolean;
+}
+/**
+ * Sidebar component for application navigation.
+ * Supports collapsible behavior, navigation items with icons, and sections.
+ *
+ * @example
+ * ```tsx
+ * <Sidebar>
+ *   <SidebarHeader>
+ *     <SidebarLogo />
+ *   </SidebarHeader>
+ *   <SidebarContent>
+ *     <SidebarGroup>
+ *       <SidebarGroupLabel>Navigation</SidebarGroupLabel>
+ *       <SidebarItem icon={<HomeIcon />} active>Home</SidebarItem>
+ *       <SidebarItem icon={<SettingsIcon />}>Settings</SidebarItem>
+ *     </SidebarGroup>
+ *   </SidebarContent>
+ *   <SidebarFooter>
+ *     <SidebarTrigger />
+ *   </SidebarFooter>
+ * </Sidebar>
+ * ```
+ */
+declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLElement>>;
+interface SidebarHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const SidebarHeader: React.ForwardRefExoticComponent<SidebarHeaderProps & React.RefAttributes<HTMLDivElement>>;
+interface SidebarContentProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const SidebarContent: React.ForwardRefExoticComponent<SidebarContentProps & React.RefAttributes<HTMLDivElement>>;
+interface SidebarFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const SidebarFooter: React.ForwardRefExoticComponent<SidebarFooterProps & React.RefAttributes<HTMLDivElement>>;
+interface SidebarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const SidebarGroup: React.ForwardRefExoticComponent<SidebarGroupProps & React.RefAttributes<HTMLDivElement>>;
+interface SidebarGroupLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const SidebarGroupLabel: React.ForwardRefExoticComponent<SidebarGroupLabelProps & React.RefAttributes<HTMLDivElement>>;
+declare const sidebarItemVariants: (props?: ({
+    active?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+interface SidebarItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof sidebarItemVariants> {
+    /** Icon to display before the label */
+    icon?: React.ReactNode;
+    /** Render as a child component (for use with Next.js Link, etc.) */
+    asChild?: boolean;
+}
+declare const SidebarItem: React.ForwardRefExoticComponent<SidebarItemProps & React.RefAttributes<HTMLButtonElement>>;
+interface SidebarTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+}
+declare const SidebarTrigger: React.ForwardRefExoticComponent<SidebarTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+interface SidebarSeparatorProps extends React.HTMLAttributes<HTMLHRElement> {
+}
+declare const SidebarSeparator: React.ForwardRefExoticComponent<SidebarSeparatorProps & React.RefAttributes<HTMLHRElement>>;
+interface SidebarLogoProps extends Omit<EngrateLogoProps, 'compact'> {
+}
+/**
+ * SidebarLogo component that automatically syncs the EngrateLogo compact state
+ * with the Sidebar's collapsed state. Shows the full logo when expanded and
+ * the compact icon-only version when collapsed.
+ *
+ * Must be used within a Sidebar component.
+ *
+ * @example
+ * ```tsx
+ * <Sidebar>
+ *   <SidebarHeader>
+ *     <SidebarLogo />
+ *   </SidebarHeader>
+ *   ...
+ * </Sidebar>
+ * ```
+ */
+declare function SidebarLogo({ ...props }: SidebarLogoProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SidebarLogo {
+    var displayName: string;
+}
+export { Sidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarItem, SidebarTrigger, SidebarSeparator, SidebarLogo, sidebarVariants, sidebarItemVariants, useSidebarContext, };
+export type { SidebarProps, SidebarHeaderProps, SidebarContentProps, SidebarFooterProps, SidebarGroupProps, SidebarGroupLabelProps, SidebarItemProps, SidebarTriggerProps, SidebarSeparatorProps, SidebarLogoProps, };

package/dist/components/ui/Sidebar/index.d.ts

@@ -0,0 +1 @@
+export { Sidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarItem, SidebarTrigger, SidebarSeparator, sidebarVariants, sidebarItemVariants, useSidebarContext, type SidebarProps, type SidebarHeaderProps, type SidebarContentProps, type SidebarFooterProps, type SidebarGroupProps, type SidebarGroupLabelProps, type SidebarItemProps, type SidebarTriggerProps, type SidebarSeparatorProps, } from './Sidebar';

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

@@ -3,7 +3,7 @@ import * as React from 'react';
 declare const stackVariants: (props?: ({
     direction?: "horizontal" | "vertical" | null | undefined;
     gap?: "none" | "sm" | "lg" | "md" | "xl" | "xs" | "2xl" | null | undefined;
-    align?: "end" | "start" | "center" | "stretch" | "baseline" | null | undefined;
+    align?: "end" | "start" | "center" | "baseline" | "stretch" | null | undefined;
     justify?: "end" | "start" | "center" | "between" | "around" | "evenly" | null | undefined;
     wrap?: "wrap" | "nowrap" | "wrap-reverse" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -12,10 +12,13 @@ export * from './DatePicker';
 export * from './DateTimePicker';
 export * from './Divider';
 export * from './DropdownMenu';
+export * from './EngrateLogo';
 export * from './Eyebrow';
+export * from './Footer';
 export * from './FormField';
 export * from './FormMessage';
 export * from './Grid';
+export * from './Header';
 export * from './Heading';
 export * from './Input';
 export * from './Label';
@@ -27,6 +30,7 @@ export * from './PieChart';
 export * from './ProgressIndicator';
 export * from './Radio';
 export * from './Select';
+export * from './Sidebar';
 export * from './Skeleton';
 export * from './Spinner';
 export * from './Stack';