@hyphen/hyphen-components 2.24.1 → 2.25.1

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

@@ -0,0 +1,50 @@
+import React from 'react';
+interface SidebarContextProps {
+    state: 'expanded' | 'collapsed';
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    openMobile: boolean;
+    setOpenMobile: (open: boolean) => void;
+    isMobile: boolean;
+    toggleSidebar: () => void;
+}
+declare function useSidebar(): SidebarContextProps;
+declare const SidebarProvider: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    defaultOpen?: boolean | undefined;
+    open?: boolean | undefined;
+    onOpenChange?: ((open: boolean) => void) | undefined;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Sidebar: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    side?: "left" | undefined;
+    collapsible?: "offcanvas" | "icon" | "none" | undefined;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarTrigger: React.ForwardRefExoticComponent<(Omit<{
+    as?: "button" | undefined;
+} & import("../Button/Button").BaseButtonProps & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>, "ref"> | Omit<{
+    as: "a";
+} & import("../Button/Button").BaseButtonProps & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>, "ref">) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+declare const SidebarInset: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarMenu: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
+declare const SidebarMenuItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+declare const SidebarMenuButton: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    asChild?: boolean | undefined;
+    isActive?: boolean | undefined;
+    icon?: "link" | "menu" | "search" | "circle" | "filter" | "key" | "download" | "add" | "alarm-disable" | "alarm" | "analytics" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "arrows-maximize" | "at" | "ban" | "block" | "blocks" | "book-open" | "c-add" | "c-check" | "c-delete" | "c-in-progress" | "c-info" | "c-question" | "c-remove" | "c-warning" | "calendar-create" | "calendar" | "camera" | "caret-down" | "caret-left" | "caret-right" | "caret-sm-down" | "caret-sm-left" | "caret-sm-right" | "caret-sm-up" | "caret-up-down" | "caret-up" | "chart-bar" | "chart-line" | "chat" | "check" | "checkbox-btn-checked" | "checkbox-btn-indeterminate" | "checkbox-btn" | "circle-filled" | "clipboard" | "cloud" | "contact" | "copy-document" | "dashboard" | "database" | "dock-left" | "document" | "dots" | "electricity-bolt" | "exclamation-mark" | "eye-slash" | "eye" | "flag" | "gear" | "grab" | "hash-mark" | "heart-o" | "heart" | "home" | "info" | "integrations" | "launch-app" | "lightbulb" | "list" | "lock" | "logo-env" | "logo-link" | "logo-toggle" | "logout" | "mail" | "minus" | "moon" | "paperclip" | "path-intersect" | "pause" | "pc" | "pencil" | "phone" | "photo" | "play" | "radio-btn-checked" | "radio-btn-unchecked" | "refresh" | "remove" | "rewind" | "send" | "settings" | "skip" | "stack" | "star-o" | "star" | "stopwatch" | "subtract" | "sun" | "t-warning" | "tag" | "terminal" | "time-alarm" | "time-clock" | "trash" | "unlocked" | "upload" | "user-create" | "user" | "users" | "wifi-off" | "wifi" | "zoom-in" | "zoom-out" | undefined;
+}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SidebarGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarGroupLabel: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarMenuSub: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
+declare const SidebarMenuSubItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+declare const SidebarMenuSubButton: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLAnchorElement> & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    asChild?: boolean | undefined;
+    isActive?: boolean | undefined;
+}, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+declare const SidebarMenuAction: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    asChild?: boolean | undefined;
+}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SidebarRail: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SidebarMenuBadge: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarTrigger, useSidebar, };

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Meta } from '@storybook/react';
+import { Sidebar } from './Sidebar';
+declare const meta: Meta<typeof Sidebar>;
+export default meta;
+export declare const SidebarExample: () => React.JSX.Element;

package/dist/css/reset.css

@@ -7,6 +7,10 @@
   box-sizing: border-box;
 }
 
+* {
+  border-color: var(--color-border-subtle);
+}
+
 html,
 body {
   height: 100%;
@@ -73,6 +77,12 @@ a:not([class]) {
   text-decoration-skip-ink: auto;
 }
 
+a,
+a:visited {
+  color: inherit;
+  text-decoration: none;
+}
+
 img {
   max-width: 100%;
 }

package/dist/css/utilities.css

@@ -6232,6 +6232,337 @@
     position: initial;
   }
 }
+.transform {
+  --hy-translate-x: 0;
+  --hy-translate-y: 0;
+  --hy-skew-x: 0;
+  --hy-skew-y: 0;
+  --hy-scale-x: 1;
+  --hy-scale-y: 1;
+  transition: transform 0.2s ease-out;
+  transform: translate(var(--hy-translate-x), var(--hy-translate-y)) rotate(var(--hy-rotate)) skewX(var(--hy-skew-x)) skewY(var(--hy-skew-y)) scaleX(var(--hy-scale-x)) scaleY(var(--hy-scale-y));
+}
+
+/* Rotation Variables */
+.rotate-0 {
+  --hy-rotate: 0deg;
+}
+
+.rotate-1 {
+  --hy-rotate: 1deg;
+}
+
+.rotate-2 {
+  --hy-rotate: 2deg;
+}
+
+.rotate-3 {
+  --hy-rotate: 3deg;
+}
+
+.rotate-6 {
+  --hy-rotate: 6deg;
+}
+
+.rotate-12 {
+  --hy-rotate: 12deg;
+}
+
+.rotate-45 {
+  --hy-rotate: 45deg;
+}
+
+.rotate-90 {
+  --hy-rotate: 90deg;
+}
+
+[data-state=open] .data-\[state\=open\]\:rotate-90 {
+  --hy-rotate: 90deg;
+}
+
+.rotate-180 {
+  --hy-rotate: 180deg;
+}
+
+/* Positive Translate X classes */
+.translate-x-0 {
+  --hy-translate-x: var(--size-dimension-0);
+}
+
+.translate-x-2xs {
+  --hy-translate-x: var(--size-dimension-2xs);
+}
+
+.translate-x-xs {
+  --hy-translate-x: var(--size-dimension-xs);
+}
+
+.translate-x-sm {
+  --hy-translate-x: var(--size-dimension-sm);
+}
+
+.translate-x-md {
+  --hy-translate-x: var(--size-dimension-md);
+}
+
+.translate-x-lg {
+  --hy-translate-x: var(--size-dimension-lg);
+}
+
+.translate-x-xl {
+  --hy-translate-x: var(--size-dimension-xl);
+}
+
+.translate-x-2xl {
+  --hy-translate-x: var(--size-dimension-2xl);
+}
+
+.translate-x-3xl {
+  --hy-translate-x: var(--size-dimension-3xl);
+}
+
+.translate-x-4xl {
+  --hy-translate-x: var(--size-dimension-4xl);
+}
+
+.translate-x-5xl {
+  --hy-translate-x: var(--size-dimension-5xl);
+}
+
+.translate-x-6xl {
+  --hy-translate-x: var(--size-dimension-6xl);
+}
+
+.translate-x-7xl {
+  --hy-translate-x: var(--size-dimension-7xl);
+}
+
+.translate-x-8xl {
+  --hy-translate-x: var(--size-dimension-8xl);
+}
+
+.translate-x-9xl {
+  --hy-translate-x: var(--size-dimension-9xl);
+}
+
+.translate-x-10xl {
+  --hy-translate-x: var(--size-dimension-10xl);
+}
+
+/* Negative Translate X classes */
+.-translate-x-2xs {
+  --hy-translate-x: calc(var(--size-dimension-2xs) * -1);
+}
+
+.-translate-x-xs {
+  --hy-translate-x: calc(var(--size-dimension-xs) * -1);
+}
+
+.-translate-x-sm {
+  --hy-translate-x: calc(var(--size-dimension-sm) * -1);
+}
+
+.-translate-x-md {
+  --hy-translate-x: calc(var(--size-dimension-md) * -1);
+}
+
+.-translate-x-lg {
+  --hy-translate-x: calc(var(--size-dimension-lg) * -1);
+}
+
+.-translate-x-xl {
+  --hy-translate-x: calc(var(--size-dimension-xl) * -1);
+}
+
+.-translate-x-2xl {
+  --hy-translate-x: calc(var(--size-dimension-2xl) * -1);
+}
+
+.-translate-x-3xl {
+  --hy-translate-x: calc(var(--size-dimension-3xl) * -1);
+}
+
+.-translate-x-4xl {
+  --hy-translate-x: calc(var(--size-dimension-4xl) * -1);
+}
+
+.-translate-x-5xl {
+  --hy-translate-x: calc(var(--size-dimension-5xl) * -1);
+}
+
+.-translate-x-6xl {
+  --hy-translate-x: calc(var(--size-dimension-6xl) * -1);
+}
+
+.-translate-x-7xl {
+  --hy-translate-x: calc(var(--size-dimension-7xl) * -1);
+}
+
+.-translate-x-8xl {
+  --hy-translate-x: calc(var(--size-dimension-8xl) * -1);
+}
+
+.-translate-x-9xl {
+  --hy-translate-x: calc(var(--size-dimension-9xl) * -1);
+}
+
+.-translate-x-10xl {
+  --hy-translate-x: calc(var(--size-dimension-10xl) * -1);
+}
+
+/* Positive Translate Y classes */
+.translate-y-0 {
+  --hy-translate-y: var(--size-dimension-0);
+}
+
+.translate-y-2xs {
+  --hy-translate-y: var(--size-dimension-2xs);
+}
+
+.translate-y-xs {
+  --hy-translate-y: var(--size-dimension-xs);
+}
+
+.translate-y-sm {
+  --hy-translate-y: var(--size-dimension-sm);
+}
+
+.translate-y-md {
+  --hy-translate-y: var(--size-dimension-md);
+}
+
+.translate-y-lg {
+  --hy-translate-y: var(--size-dimension-lg);
+}
+
+.translate-y-xl {
+  --hy-translate-y: var(--size-dimension-xl);
+}
+
+.translate-y-2xl {
+  --hy-translate-y: var(--size-dimension-2xl);
+}
+
+.translate-y-3xl {
+  --hy-translate-y: var(--size-dimension-3xl);
+}
+
+.translate-y-4xl {
+  --hy-translate-y: var(--size-dimension-4xl);
+}
+
+.translate-y-5xl {
+  --hy-translate-y: var(--size-dimension-5xl);
+}
+
+.translate-y-6xl {
+  --hy-translate-y: var(--size-dimension-6xl);
+}
+
+.translate-y-7xl {
+  --hy-translate-y: var(--size-dimension-7xl);
+}
+
+.translate-y-8xl {
+  --hy-translate-y: var(--size-dimension-8xl);
+}
+
+.translate-y-9xl {
+  --hy-translate-y: var(--size-dimension-9xl);
+}
+
+.translate-y-10xl {
+  --hy-translate-y: var(--size-dimension-10xl);
+}
+
+/* Negative Translate Y classes */
+.-translate-y-2xs {
+  --hy-translate-y: calc(var(--size-dimension-2xs) * -1);
+}
+
+.-translate-y-xs {
+  --hy-translate-y: calc(var(--size-dimension-xs) * -1);
+}
+
+.-translate-y-sm {
+  --hy-translate-y: calc(var(--size-dimension-sm) * -1);
+}
+
+.-translate-y-md {
+  --hy-translate-y: calc(var(--size-dimension-md) * -1);
+}
+
+.-translate-y-lg {
+  --hy-translate-y: calc(var(--size-dimension-lg) * -1);
+}
+
+.-translate-y-xl {
+  --hy-translate-y: calc(var(--size-dimension-xl) * -1);
+}
+
+.-translate-y-2xl {
+  --hy-translate-y: calc(var(--size-dimension-2xl) * -1);
+}
+
+.-translate-y-3xl {
+  --hy-translate-y: calc(var(--size-dimension-3xl) * -1);
+}
+
+.-translate-y-4xl {
+  --hy-translate-y: calc(var(--size-dimension-4xl) * -1);
+}
+
+.-translate-y-5xl {
+  --hy-translate-y: calc(var(--size-dimension-5xl) * -1);
+}
+
+.-translate-y-6xl {
+  --hy-translate-y: calc(var(--size-dimension-6xl) * -1);
+}
+
+.-translate-y-7xl {
+  --hy-translate-y: calc(var(--size-dimension-7xl) * -1);
+}
+
+.-translate-y-8xl {
+  --hy-translate-y: calc(var(--size-dimension-8xl) * -1);
+}
+
+.-translate-y-9xl {
+  --hy-translate-y: calc(var(--size-dimension-9xl) * -1);
+}
+
+.-translate-y-10xl {
+  --hy-translate-y: calc(var(--size-dimension-10xl) * -1);
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .outline-none {
   outline: none;
 }
+
+.hover-show-child .hover-child {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.hover-show-child:hover .hover-child {
+  opacity: 1;
+}

package/dist/hooks/index.d.ts

@@ -1,6 +1,6 @@
 export * from './useBreakpoint/useBreakpoint';
 export * from './useIsMobile/useIsMobile';
-export * from './useIsomorphicLayoutEffect/useIsomorphicLayouEffect';
+export * from './useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';
 export * from './useOpenClose/useOpenClose';
 export * from './useTheme/useTheme';
 export * from './useWindowSize/useWindowSize';