levannta-ui 1.0.4 → 1.0.6

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

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { SidebarItemProps } from './index';
+
+interface SidebarItemComponentProps extends SidebarItemProps {
+    collapsed: boolean;
+}
+export declare const SidebarItem: React.FC<SidebarItemComponentProps>;
+export default SidebarItem;

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

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+
+export interface SidebarItemProps {
+    icon: React.ReactNode;
+    url: string;
+    label: string;
+    submenu?: SidebarItemProps[];
+}
+export interface SidebarProps {
+    logo?: React.ReactNode;
+    logoCollapsed?: React.ReactNode;
+    items: SidebarItemProps[];
+    logoutIcon?: React.ReactNode;
+    onLogout?: () => void;
+    logoutLabel?: string;
+    collapsed?: boolean;
+    onToggle?: () => void;
+}
+export declare const Sidebar: React.FC<SidebarProps>;
+export default Sidebar;

package/dist/index.css

@@ -1 +1 @@
-.button{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;font-size:12px;line-height:24px;font-weight:600;transition:all .2s;outline:none;cursor:pointer;border:none;padding:8px 24px}.button:focus-visible{outline:6px solid #D5FFF2;outline-offset:2px}.button:disabled{opacity:.4;pointer-events:none}.button-filled{background-color:var(--button-bg, hsl(221.2 83.2% 53.3%));color:var(--button-text, white);border:none}.button-filled:hover:not(:disabled){background-color:var(--button-hover, hsl(221.2 83.2% 47.3%))}.button-outlined{background-color:transparent;color:var(--button-bg, hsl(221.2 83.2% 53.3%));border:1px solid var(--button-border, hsl(214.3 31.8% 91.4%))}.button-outlined:hover:not(:disabled){background-color:var(--button-bg-light, hsl(210 40% 96.1% / .3));color:var(--button-bg-hover, hsl(221.2 83.2% 47.3%))}.button-icon{width:48px;height:48px;padding:0;min-width:unset;justify-content:center;align-items:center;border-radius:8px;background-color:transparent;color:var(--button-bg, hsl(221.2 83.2% 53.3%))}.button-icon:hover:not(:disabled){background-color:var(--button-bg-light, hsl(210 40% 96.1% / .3))}.button-icon.button-size-sm{width:36px;height:36px}.button-icon.button-size-md{width:48px;height:48px}.button-icon.button-size-lg{width:56px;height:56px}.button-icon.button-size-xl{width:64px;height:64px}.button-icon.button-pill{border-radius:50%}.button-active{background-color:var(--button-bg-active, #076046);color:var(--button-text-active, #F9FAFB);border-color:var(--button-border-active, transparent)}.button-filled.button-active{background-color:var(--button-bg-active, #076046);color:var(--button-text-active, #F9FAFB)}.button-outlined.button-active{background-color:transparent;color:var(--button-text-active, #F9FAFB);border-color:var(--button-border-active, #076046)}.button-icon.button-active{background-color:var(--button-bg-active, #076046);color:var(--button-text-active, #F9FAFB)}.button-color-primary{--button-bg: #00F7AA;--button-text:#364153;--button-hover: #AEFFE6;--button-border: #00F7AA;--button-bg-light: hsl(221.2 83.2% 96%);--button-bg-hover: #AEFFE6;--button-bg-active: #076046;--button-text-active: #F9FAFB;--button-border-active: #076046}.button-color-secondary{--button-bg: #00B6FF;--button-text: #364153;--button-hover: #A7F0FF;--button-border: #00B6FF;--button-bg-light: hsl(142.1 76.2% 96%);--button-bg-hover: #A7F0FF;--button-bg-active: #0056B3;--button-text-active: #F9FAFB;--button-border-active: #0056B3}.button-color-error{--button-bg: #FB2C36;--button-text: #F2F3F7;--button-hover: #FF6467;--button-border: #FB2C36;--button-bg-light: hsl(0 84.2% 96%);--button-bg-hover: #FF6467;--button-bg-active: #9F0712;--button-text-active: #F2F3F7;--button-border-active: #9F0712}.button-color-clear{--button-bg: transparent;--button-text: #364153;--button-hover: #F9FAFB;--button-border: #D4D4D4;--button-bg-light: hsl(215.4 16.3% 96%);--button-bg-hover: #F9FAFB;--button-bg-active: transparent;--button-text-active: #364153;--button-border-active: transparent}.button-outlined-primary{color:var(--button-bg);border-color:var(--button-border)}.button-outlined-primary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-outlined-secondary{color:var(--button-bg);border-color:var(--button-border)}.button-outlined-secondary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-outlined-error{color:var(--button-bg);border-color:var(--button-border)}.button-outlined-error:hover:not(:disabled){background-color:var(--button-bg-light)}.button-outlined-clear{color:var(--button-bg);border-color:var(--button-border)}.button-outlined-clear:hover:not(:disabled){background-color:var(--button-bg-light)}.button-outlined-primary.button-active,.button-filled-primary.button-active,.button-icon-primary.button-active,.button-outlined-secondary.button-active,.button-filled-secondary.button-active,.button-icon-secondary.button-active,.button-outlined-error.button-active,.button-filled-error.button-active,.button-icon-error.button-active,.button-outlined-clear.button-active,.button-filled-clear.button-active,.button-icon-clear.button-active{background-color:var(--button-bg-active);color:var(--button-text-active);border-color:var(--button-border-active)}.button-filled-primary{background-color:var(--button-bg);color:var(--button-text)}.button-filled-primary:hover:not(:disabled){background-color:var(--button-hover)}.button-filled-secondary{background-color:var(--button-bg);color:var(--button-text)}.button-filled-secondary:hover:not(:disabled){background-color:var(--button-hover)}.button-filled-error{background-color:var(--button-bg);color:var(--button-text)}.button-filled-error:hover:not(:disabled){background-color:var(--button-hover)}.button-filled-clear{background-color:var(--button-bg);color:var(--button-text)}.button-filled-clear:hover:not(:disabled){background-color:var(--button-hover)}.button-icon-primary{color:var(--button-bg)}.button-icon-primary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-secondary{color:var(--button-bg)}.button-icon-secondary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-error{color:var(--button-bg)}.button-icon-error:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-clear{color:var(--button-bg)}.button-icon-clear:hover:not(:disabled){background-color:var(--button-bg-light)}.button-size-sm{min-width:94px;height:48px;font-size:12px}.button-size-md{min-width:101px;height:56px;font-size:16px}.button-size-lg{min-width:107px;height:72px;font-size:18px}.button-size-xl{min-width:130px;height:80px;font-size:20px}.button-pill{border-radius:9999px}.button-with-icon-left{position:relative;padding-left:3rem}.button-with-icon-right{position:relative;padding-right:3rem}.button-with-icon-left-justified{padding-left:5rem}.button-with-icon-right-justified{padding-right:5rem}.button-icon-left{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center}.button-icon-right{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center}.button-with-icon-left-justified .button-icon-left{left:1.75rem}.button-with-icon-right-justified .button-icon-right{right:1.75rem}.button-with-icon-left.button-with-icon-right{padding-left:2.5rem;padding-right:2.5rem}.button-size-sm .button-icon-left,.button-size-sm .button-icon-right{font-size:.875rem}.button-size-md .button-icon-left,.button-size-md .button-icon-right{font-size:1rem}.button-size-lg .button-icon-left,.button-size-lg .button-icon-right{font-size:1.125rem}.button-size-xl .button-icon-left,.button-size-xl .button-icon-right{font-size:1.25rem}.button-icon-only{width:48px;height:48px;padding:0;min-width:unset;justify-content:center;align-items:center;border-radius:8px;display:flex}.button-size-sm.button-icon-only{width:36px;height:36px}.button-size-md.button-icon-only{width:48px;height:48px}.button-size-lg.button-icon-only{width:56px;height:56px}.button-size-xl.button-icon-only{width:64px;height:64px}.button-pill.button-icon-only{border-radius:50%}.button-icon-only.button-color-primary{color:var(--button-bg);background-color:transparent}.button-icon-only.button-color-primary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-only.button-color-secondary{color:var(--button-bg);background-color:transparent}.button-icon-only.button-color-secondary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-only.button-color-error{color:var(--button-bg);background-color:transparent}.button-icon-only.button-color-error:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-only.button-color-clear{color:var(--button-bg);background-color:transparent}.button-icon-only.button-color-clear:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-only.button-active{color:var(--button-text-active);background-color:var(--button-bg-active)}
+.button{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;font-size:12px;line-height:24px;font-weight:600;transition:all .2s;outline:none;cursor:pointer;border:none;padding:8px 24px}.button:focus-visible{outline:6px solid #D5FFF2;outline-offset:2px}.button:disabled{opacity:.4;pointer-events:none}.button-filled{background-color:var(--button-bg, hsl(221.2 83.2% 53.3%));color:var(--button-text, white);border:none}.button-filled:hover:not(:disabled){background-color:var(--button-hover, hsl(221.2 83.2% 47.3%))}.button-outlined{background-color:transparent;color:var(--button-bg, hsl(221.2 83.2% 53.3%));border:1px solid var(--button-border, hsl(214.3 31.8% 91.4%))}.button-outlined:hover:not(:disabled){background-color:var(--button-bg-light, hsl(210 40% 96.1% / .3));color:var(--button-bg-hover, hsl(221.2 83.2% 47.3%))}.button-icon{width:48px;height:48px;padding:0;min-width:unset;justify-content:center;align-items:center;border-radius:8px;background-color:transparent;color:var(--button-bg, hsl(221.2 83.2% 53.3%))}.button-icon:hover:not(:disabled){background-color:var(--button-bg-light, hsl(210 40% 96.1% / .3))}.button-icon.button-size-sm{width:36px;height:36px}.button-icon.button-size-md{width:48px;height:48px}.button-icon.button-size-lg{width:56px;height:56px}.button-icon.button-size-xl{width:64px;height:64px}.button-icon.button-pill{border-radius:50%}.button-active{background-color:var(--button-bg-active, #076046);color:var(--button-text-active, #F9FAFB);border-color:var(--button-border-active, transparent)}.button-filled.button-active{background-color:var(--button-bg-active, #076046);color:var(--button-text-active, #F9FAFB)}.button-outlined.button-active{background-color:transparent;color:var(--button-text-active, #F9FAFB);border-color:var(--button-border-active, #076046)}.button-icon.button-active{background-color:var(--button-bg-active, #076046);color:var(--button-text-active, #F9FAFB)}.button-color-primary{--button-bg: #00F7AA;--button-text:#364153;--button-hover: #AEFFE6;--button-border: #00F7AA;--button-bg-light: hsl(221.2 83.2% 96%);--button-bg-hover: #AEFFE6;--button-bg-active: #076046;--button-text-active: #F9FAFB;--button-border-active: #076046}.button-color-secondary{--button-bg: #00B6FF;--button-text: #364153;--button-hover: #A7F0FF;--button-border: #00B6FF;--button-bg-light: hsl(142.1 76.2% 96%);--button-bg-hover: #A7F0FF;--button-bg-active: #0056B3;--button-text-active: #F9FAFB;--button-border-active: #0056B3}.button-color-error{--button-bg: #FB2C36;--button-text: #F2F3F7;--button-hover: #FF6467;--button-border: #FB2C36;--button-bg-light: hsl(0 84.2% 96%);--button-bg-hover: #FF6467;--button-bg-active: #9F0712;--button-text-active: #F2F3F7;--button-border-active: #9F0712}.button-color-clear{--button-bg: transparent;--button-text: #364153;--button-hover: #F9FAFB;--button-border: #D4D4D4;--button-bg-light: hsl(215.4 16.3% 96%);--button-bg-hover: #F9FAFB;--button-bg-active: transparent;--button-text-active: #364153;--button-border-active: transparent}.button-outlined-primary{color:var(--button-bg);border-color:var(--button-border)}.button-outlined-primary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-outlined-secondary{color:var(--button-bg);border-color:var(--button-border)}.button-outlined-secondary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-outlined-error{color:var(--button-text);border-color:var(--button-border)}.button-outlined-error:hover:not(:disabled){background-color:var(--button-bg-light)}.button-outlined-clear{color:var(--button-text);border-color:var(--button-border)}.button-outlined-clear:hover:not(:disabled){color:var(--button-text);background-color:var(--button-bg-light)}.button-outlined-primary.button-active,.button-filled-primary.button-active,.button-icon-primary.button-active,.button-outlined-secondary.button-active,.button-filled-secondary.button-active,.button-icon-secondary.button-active,.button-outlined-error.button-active,.button-filled-error.button-active,.button-icon-error.button-active,.button-outlined-clear.button-active,.button-filled-clear.button-active,.button-icon-clear.button-active{background-color:var(--button-bg-active);color:var(--button-text-active);border-color:var(--button-border-active)}.button-filled-primary{background-color:var(--button-bg);color:var(--button-text)}.button-filled-primary:hover:not(:disabled){background-color:var(--button-hover)}.button-filled-secondary{background-color:var(--button-bg);color:var(--button-text)}.button-filled-secondary:hover:not(:disabled){background-color:var(--button-hover)}.button-filled-error{background-color:var(--button-bg);color:var(--button-text)}.button-filled-error:hover:not(:disabled){background-color:var(--button-hover)}.button-filled-clear{background-color:var(--button-bg);color:var(--button-text)}.button-filled-clear:hover:not(:disabled){background-color:var(--button-hover)}.button-icon-primary{color:var(--button-bg)}.button-icon-primary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-secondary{color:var(--button-bg)}.button-icon-secondary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-error{color:var(--button-bg)}.button-icon-error:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-clear{color:var(--button-bg)}.button-icon-clear:hover:not(:disabled){background-color:var(--button-bg-light)}.button-size-sm{min-width:94px;height:48px;font-size:12px}.button-size-md{min-width:101px;height:56px;font-size:16px}.button-size-lg{min-width:107px;height:72px;font-size:18px}.button-size-xl{min-width:130px;height:80px;font-size:20px}.button-pill{border-radius:9999px}.button-with-icon-left{position:relative;padding-left:3rem}.button-with-icon-right{position:relative;padding-right:3rem}.button-with-icon-left-justified{padding-left:5rem}.button-with-icon-right-justified{padding-right:5rem}.button-icon-left{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center}.button-icon-right{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center}.button-with-icon-left-justified .button-icon-left{left:1.75rem}.button-with-icon-right-justified .button-icon-right{right:1.75rem}.button-with-icon-left.button-with-icon-right{padding-left:2.5rem;padding-right:2.5rem}.button-size-sm .button-icon-left,.button-size-sm .button-icon-right{font-size:.875rem}.button-size-md .button-icon-left,.button-size-md .button-icon-right{font-size:1rem}.button-size-lg .button-icon-left,.button-size-lg .button-icon-right{font-size:1.125rem}.button-size-xl .button-icon-left,.button-size-xl .button-icon-right{font-size:1.25rem}.button-icon-only{width:48px;height:48px;padding:0;min-width:unset;justify-content:center;align-items:center;border-radius:8px;display:flex}.button-size-sm.button-icon-only{width:36px;height:36px}.button-size-md.button-icon-only{width:48px;height:48px}.button-size-lg.button-icon-only{width:56px;height:56px}.button-size-xl.button-icon-only{width:64px;height:64px}.button-pill.button-icon-only{border-radius:50%}.button-icon-only.button-color-primary{color:var(--button-bg);background-color:transparent}.button-icon-only.button-color-primary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-only.button-color-secondary{color:var(--button-bg);background-color:transparent}.button-icon-only.button-color-secondary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-only.button-color-error{color:var(--button-bg);background-color:transparent}.button-icon-only.button-color-error:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-only.button-color-clear{color:var(--button-bg);background-color:transparent}.button-icon-only.button-color-clear:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-only.button-active{color:var(--button-text-active);background-color:var(--button-bg-active)}.sidebar-wrapper{position:relative;display:flex;height:100vh}.sidebar{display:flex;flex-direction:column;width:290px;height:100vh;background-color:#024;color:#fff;transition:width .3s;justify-content:space-between;align-items:center;padding-top:20px;padding-bottom:0;z-index:2;font-weight:600;font-size:14px;line-height:24px;letter-spacing:0%;vertical-align:middle}.sidebar-collapsed{width:90px}.sidebar-header{display:flex;align-items:center;padding:16px;justify-content:space-between;margin-bottom:50px}.sidebar-logo{display:flex;align-items:center;gap:42px;color:#fff}.sidebar-toggle{background:none;border:none;color:#8ba1b7;cursor:pointer;font-size:16px;padding:4px 8px;border-radius:4px}.sidebar-toggle:hover{background-color:#ffffff1a}.sidebar-menu{flex:1;width:85%;overflow-y:auto;margin:0 auto;gap:4px}.sidebar-link{display:flex;align-items:center;justify-content:center;padding:18px 0;text-decoration:none;color:#fff;width:100%;border-bottom:1px solid #D4D4D4}.sidebar-collapsed .sidebar-link{border-bottom:none;position:relative}.sidebar-collapsed .sidebar-link:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:24px;height:1px;background-color:#d4d4d4}.sidebar-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:#8ba1b7}.sidebar-content{display:flex;flex:1;justify-content:space-between;align-items:center;margin-left:16px}.sidebar-label{flex:1}.submenu-arrow{font-size:10px;color:#8ba1b7}.submenu-item{display:flex;align-items:center;padding:10px 16px;text-decoration:none;color:#fff}.submenu-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:12px;color:#8ba1b7}.sidebar-footer{padding:16px}.logout-button{display:flex;align-items:center;gap:12px;background:none;border:none;color:#fff;width:100%;padding-bottom:10px;text-align:left;cursor:pointer;transition:background-color .2s;border-radius:4px;font-weight:600;font-size:14px;line-height:24px;letter-spacing:0%;vertical-align:middle}.sidebar-toggle-icon{position:relative;left:-1%;top:120px;transform:translateY(-50%) rotate(180deg);background:none;border:none;cursor:pointer;z-index:3;padding:0;margin-left:0;transition:transform .3s}.sidebar-toggle-icon.collapsed{transform:translateY(-50%) rotate(0)}

package/dist/index.d.ts

@@ -1,2 +1,4 @@
 export { Button, buttonVariants } from './components/ui/Button';
 export type { ButtonProps } from './components/ui/Button';
+export { Sidebar } from './components/ui/Sidebar';
+export type { SidebarProps, SidebarItemProps } from './components/ui/Sidebar';