@sikka/hawa 0.2.6-beta → 0.2.7-beta

package/lib/src/layout/HawaContainer.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+type ContainerTypes = {
+    maxWidth?: "full" | "small" | "normal";
+    children: React.ReactNode;
+    variant?: "contained" | "outlined" | "neobrutalism";
+    direction?: "rtl" | "ltr";
+    centered?: boolean;
+};
+export declare const HawaContainer: React.FunctionComponent<ContainerTypes>;
+export {};

package/lib/src/layout/HawaContainer.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/tslib/tslib.es6.mjs.js"),r=require("../../node_modules/react/index.js"),d=require("../../node_modules/clsx/dist/clsx.m.js");exports.HawaContainer=function(t){var i=t.maxWidth,n=void 0===i?"normal":i,o=t.variant,a=void 0===o?"contained":o,l=t.centered,s=void 0!==l&&l,m=t.direction,c=void 0===m?"ltr":m,u=e.__rest(t,["maxWidth","variant","centered","direction"]);return r.createElement("div",{className:d.clsx("flex w-full flex-col rounded p-4",{full:"md:max-w-xl",small:"md:max-w-sm w-1/3 min-w-min",normal:"max-w-sm md:max-w-md"}[n],{contained:"bg-background border",outlined:"bg-transparent border border-black w-fit",neobrutalism:"shadow-neobrutalism  border-4 border-black  bg-white"}[a],s?"flex items-center text-center":""),dir:c},u.children)};

package/lib/src/layout/HawaGrid.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+type GridTypes = {
+    children?: any;
+};
+export declare const HawaGrid: FC<GridTypes>;
+export {};

package/lib/src/layout/HawaGrid.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/react/index.js");exports.HawaGrid=function(s){return e.createElement("div",{className:" columns-1 gap-5 sm:columns-2 sm:gap-8 md:columns-3 lg:columns-4 [&>*:not(:first-child)]:mt-8"},s.children)};

package/lib/src/layout/HawaSiteLayout.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+type HawaSiteLayoutTypes = {
+    navItems: {
+        label: string;
+        icon: any;
+        slug: string;
+        action: () => void;
+        subItems?: any;
+    }[];
+    direction?: "rtl" | "ltr";
+    currentPage: string;
+    pageTitle?: string;
+    logoSymbol?: any;
+    logoLink?: string;
+    logoText?: any;
+    children?: any;
+    stickyNav?: boolean;
+    topBar?: boolean;
+    navigationSize?: "sm" | "md" | "lg";
+    floating?: boolean;
+};
+export declare const HawaSiteLayout: React.FunctionComponent<HawaSiteLayoutTypes>;
+export {};

package/lib/src/layout/HawaSiteLayout.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/tslib/tslib.es6.mjs.js"),t=require("../../node_modules/react/index.js"),r=require("../../node_modules/clsx/dist/clsx.m.js"),a=require("../hooks/useDiscloser.js"),n=require("../hooks/useBreakpoint.js"),l=require("../../_virtual/index.js");exports.HawaSiteLayout=function(s){var i,o=s.direction,c=void 0===o?"rtl":o,u=s.navigationSize,d=void 0===u?"md":u,m=e.__rest(s,["direction","navigationSize"]),v=l.react.exports.useState(!1),f=v[0],h=v[1],x=l.react.exports.useState(!1);x[0],x[1],a(!1);var p,g=l.react.exports.useRef(null);l.react.exports.useRef(null),p="undefined"!=typeof window?n():1200;var E=l.react.exports.useState(!1),k=E[0];E[1],l.react.exports.useEffect((function(){var e=function(e){!g.current||g.current.contains(e.target)||k||h(!1)};return document.addEventListener("click",e,!0),function(){document.removeEventListener("click",e,!0)}}),[k]);return t.createElement("div",{className:"h-full w-full"},t.createElement("div",{className:r.clsx("z-30 flex w-auto select-none flex-row items-start justify-between bg-layoutPrimary-500  transition-all",{sm:"h-10",md:"",lg:"h-24"}[d],"rounded p-3 ",f?"h-44":"h-14",m.stickyNav?"fixed left-4 right-4 top-4":"","rtl"===c?"flex-row":"flex-row-reverse")},p>600?t.createElement("div",{className:"flex  flex-row h-8    items-center  gap-4 px-3"},null===(i=m.navItems)||void 0===i?void 0:i.map((function(e,r){var a=e.label;return t.createElement("div",{onClick:function(){return h(!f)},key:r,className:"cursor-pointer rounded bg-none text-gray-600 transition-all hover:text-black"},a)}))):t.createElement("div",{className:"flex items-center justify-center"},t.createElement("div",{onClick:function(){return h(!f)},className:"cursor-pointer  rounded p-1  transition-all hover:bg-gray-100"},t.createElement("svg",{stroke:"currentColor",fill:"currentColor",strokeWidth:"0",viewBox:"0 0 20 20","aria-hidden":"true",height:"1.6em",width:"1.6em"},t.createElement("path",{fillRule:"evenodd",d:"M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z",clipRule:"evenodd"}))," "),m.pageTitle?t.createElement("div",null,m.pageTitle):t.createElement("div",null)),t.createElement("div",{className:"h-full"},t.createElement("img",{className:"h-full max-h-8 ",src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/seera/seera-horizontal-wordmark-".concat("rtl"===c?"ar":"en","-white.svg")}))),t.createElement("div",{className:r.clsx(" relative top-14")},m.children))};

package/lib/src/layout/Sidebar.d.ts

@@ -0,0 +1,35 @@
+import * as React from "react";
+type Item = {
+    value: string;
+    label: string;
+    icon?: any;
+    subitems?: SubItem[];
+    onClick?: () => void;
+};
+type SubItem = {
+    value: string;
+    label: string;
+    icon?: any;
+    onClick?: () => void;
+};
+interface SidebarGroupProps {
+    title?: string;
+    items: Item[];
+    openedItem?: any;
+    setOpenedItem?: any;
+    selectedItem?: any;
+    isOpen?: boolean;
+    onItemClick?: (value: string[]) => void;
+    onSubItemClick?: (values: string[]) => void;
+    direction?: "rtl" | "ltr";
+}
+declare const SidebarGroup: React.FC<SidebarGroupProps>;
+declare const SidebarItem: React.FC<{
+    item: Item;
+    selectedItem?: any;
+    direction?: "rtl" | "ltr";
+    onItemClick?: (value: string[]) => void;
+    onSubItemClick?: (values: string[]) => void;
+    isOpen?: boolean;
+}>;
+export { SidebarGroup, SidebarItem };

package/lib/src/layout/Sidebar.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/tslib/tslib.es6.mjs.js");require("../../node_modules/react/index.js");var t=require("../../node_modules/@radix-ui/react-accordion/dist/index.mjs.js"),r=require("../util.js"),a=require("../../_virtual/index.js");function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},a=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(a=a.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),a.forEach((function(t){n(e,t,r[t])}))}return e}var l=t.Root,c="flex flex-1 items-center select-none cursor-pointer bg-primary-foreground rounded justify-between p-2 px-3 font-medium transition-all  [&[data-state=open]>svg]:-rotate-90",s=a.react.exports.forwardRef((function(n,l){var c=n.className,s=e.__rest(n,["className"]);return a.react.exports.createElement(t.Item,o({ref:l,className:r.cn(c)},s))}));s.displayName="AccordionItem";var i=a.react.exports.forwardRef((function(n,l){var s=n.className,i=n.showArrow,m=n.children,u=e.__rest(n,["className","showArrow","children"]);return a.react.exports.createElement(t.Header,{className:"flex"},a.react.exports.createElement(t.Trigger,o({ref:l,className:r.cn(c,s)},u),m,i&&a.react.exports.createElement("svg",{"aria-label":"Chevron Right Icon",stroke:"currentColor",fill:"currentColor",viewBox:"0 0 16 16",height:"1em",width:"1em",className:"h-4 w-4 shrink-0 rotate-90 transition-transform duration-200"},a.react.exports.createElement("path",{d:"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"}))))}));i.displayName=t.Trigger.displayName;var m=a.react.exports.forwardRef((function(n,l){var c=n.className,s=n.children,i=e.__rest(n,["className","children"]);return a.react.exports.createElement(t.Content,o({ref:l,className:r.cn("overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",c)},i),a.react.exports.createElement("div",null,s))}));m.displayName=t.Content.displayName;var u=function(t){var n=t.item,o=t.onItemClick,l=t.onSubItemClick,u=t.direction,p=t.isOpen,d=void 0===p||p,f=e.__rest(t,["item","onItemClick","onSubItemClick","direction","isOpen"]),x=function(e){return f.selectedItem===e?"bg-primary text-primary-foreground  cursor-default":"hover:bg-primary/10"};return n.subitems?a.react.exports.createElement(s,{value:n.value,className:"overflow-x-clip",dir:u},a.react.exports.createElement(i,{className:r.cn("overflow-x-clip",f.selectedItem===n.value?"cursor-default bg-primary  text-primary-foreground":"hover:bg-primary/10",n.subitems&&n.subitems.some((function(e){return f.selectedItem===e.value}))?"bg-primary text-primary-foreground hover:bg-primary":""),showArrow:d},a.react.exports.createElement("div",{className:r.cn(!d&&"py-1","flex w-fit flex-row items-center  gap-2")},n.icon,d&&a.react.exports.createElement("span",{className:r.cn("transition-all ",d?"opacity-100":"opacity-0")},n.label))),n.subitems&&a.react.exports.createElement(m,{className:" mt-1 h-full rounded  "},a.react.exports.createElement("div",{className:r.cn("flex h-full flex-col gap-2 bg-foreground/5 p-1")},n.subitems.map((function(e,t){return a.react.exports.createElement("li",{key:t,onClick:function(t){t.stopPropagation(),e.onClick(),l&&l([n.value,e.value])},className:r.cn("flex h-full cursor-pointer flex-row items-center gap-2 rounded  p-2 transition-all",x(e.value))},e.icon,e.label)}))))):a.react.exports.createElement("div",{dir:u,onClick:function(){n.onClick(),o&&o([n.value])},className:r.cn(c,x(n.value),"overflow-x-clip ")},a.react.exports.createElement("div",{className:"flex flex-row items-center gap-2 "},n.icon,a.react.exports.createElement("span",{className:r.cn("whitespace-nowrap transition-all",d?"opacity-100":"opacity-0")},n.label)))};exports.SidebarGroup=function(e){var t=e.title,r=e.items,n=e.selectedItem,o=e.openedItem,c=e.setOpenedItem,s=e.onItemClick,i=e.onSubItemClick,m=e.direction,p=e.isOpen;return a.react.exports.createElement("div",null,t&&a.react.exports.createElement("h3",{className:"mb-1 font-bold"},t),a.react.exports.createElement("ul",{className:"flex flex-col gap-2"},a.react.exports.createElement(l,{value:o,type:"single",onValueChange:function(e){c(e)},collapsible:!0,className:"flex flex-col gap-1"},r.map((function(e,t){return a.react.exports.createElement(u,{isOpen:p,selectedItem:n,key:t,direction:m,item:e,onItemClick:s,onSubItemClick:i})})))))},exports.SidebarItem=u;

package/lib/src/layout/Sidebar2.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+type Item = {
+    value: string;
+    label: string;
+    icon?: any;
+    subitems?: Item[];
+};
+interface SidebarGroupProps {
+    title: string;
+    items: Item[];
+}
+interface SidebarRootProps {
+    children: any;
+}
+declare const SidebarRoot: React.FC<SidebarRootProps>;
+declare const SidebarGroup: React.FC<SidebarGroupProps>;
+declare const SidebarItem: React.FC<{
+    item: Item;
+}>;
+export { SidebarRoot, SidebarGroup, SidebarItem };

package/lib/src/layout/index.d.ts

@@ -0,0 +1,12 @@
+export * from "./Box";
+export * from "./HawaBottomAppBar";
+export * from "./HawaSiteLayout";
+export * from "./AppLayout";
+export * from "./HawaAppLayout";
+export * from "./HawaAppLayoutSimplified";
+export * from "./HawaContainer";
+export * from "./HawaGrid";
+export * from "./AppSidebar";
+export * from "./Footer";
+export * from "./Banner";
+export * from "./Sidebar";

package/lib/src/stories/ElementsStories/Breadcrumb.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta } from "@storybook/react";
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const BreadCrumb: any;
+export declare const BreadCrumWithSeparator: any;
+export declare const BreadcrumbIconSeparator: any;

package/lib/src/stories/ManualStories/BlocksIntroduction.stories.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import "../stories-styles.css";
+declare const _default: {
+    parameters: {
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+        controls: {
+            expand: boolean;
+            disable: boolean;
+            hideNoControlsWarning: boolean;
+            exclude: any[];
+        };
+        options: {
+            showPanel: boolean;
+        };
+    };
+    title: string;
+};
+export default _default;
+export declare const Introduction: () => React.JSX.Element;

package/lib/src/stories/ManualStories/Customization.stories.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import "../stories-styles.css";
+declare const _default: {
+    parameters: {
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+        controls: {
+            expand: boolean;
+            disable: boolean;
+            hideNoControlsWarning: boolean;
+            exclude: any[];
+        };
+        options: {
+            showPanel: boolean;
+        };
+    };
+    title: string;
+};
+export default _default;
+export declare const Customization: () => React.JSX.Element;

package/lib/src/stories/ManualStories/ElementsIntroduction.stories.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import "../stories-styles.css";
+declare const _default: {
+    parameters: {
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+        controls: {
+            expand: boolean;
+            disable: boolean;
+            hideNoControlsWarning: boolean;
+            exclude: any[];
+        };
+        options: {
+            showPanel: boolean;
+        };
+    };
+    title: string;
+};
+export default _default;
+export declare const Introduction: () => React.JSX.Element;

package/lib/src/stories/ManualStories/Installation.stories.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import "../stories-styles.css";
+declare const _default: {
+    parameters: {
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+        controls: {
+            expand: boolean;
+            disable: boolean;
+            hideNoControlsWarning: boolean;
+            exclude: any[];
+        };
+        options: {
+            showPanel: boolean;
+        };
+    };
+    title: string;
+};
+export default _default;
+export declare const Installation: () => React.JSX.Element;

package/lib/src/stories/ManualStories/LayoutIntroduction.stories.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import "../stories-styles.css";
+declare const _default: {
+    parameters: {
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+        controls: {
+            expand: boolean;
+            disable: boolean;
+            hideNoControlsWarning: boolean;
+            exclude: any[];
+        };
+        options: {
+            showPanel: boolean;
+        };
+    };
+    title: string;
+};
+export default _default;
+export declare const Introduction: () => React.JSX.Element;

package/lib/src/stories/ManualStories/Overview.stories.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import "../stories-styles.css";
+declare const _default: {
+    parameters: {
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+        controls: {
+            expand: boolean;
+            disable: boolean;
+            hideNoControlsWarning: boolean;
+            exclude: any[];
+        };
+        className: string;
+        options: {
+            showPanel: boolean;
+        };
+    };
+    title: string;
+};
+export default _default;
+export declare const Overview: () => React.JSX.Element;

package/lib/src/stories/ManualStories/Usage.stories.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import "../stories-styles.css";
+declare const _default: {
+    parameters: {
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+        controls: {
+            expand: boolean;
+            disable: boolean;
+            hideNoControlsWarning: boolean;
+            exclude: any[];
+        };
+        options: {
+            showPanel: boolean;
+        };
+    };
+    title: string;
+};
+export default _default;
+export declare const Usage: () => React.JSX.Element;

package/lib/src/util.d.ts

@@ -0,0 +1,10 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;
+type Palette = {
+    name: string;
+    colors: {
+        [key: number]: string;
+    };
+};
+declare function getPallette(baseColor: string): Palette;
+export { getPallette };

package/lib/src/util.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../node_modules/clsx/dist/clsx.m.js"),r=require("../node_modules/tailwind-merge/dist/lib/tw-merge.mjs.js");exports.cn=function(){for(var s=[],t=0;t<arguments.length;t++)s[t]=arguments[t];return r.twMerge(e.clsx(s))};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.2.6-beta",
+  "version": "0.2.7-beta",
   "description": "Modern UI Kit made with Tailwind & Radix Primitives",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/rollup.config.js

@@ -29,6 +29,8 @@ export default [
         preserveModules: true
       }
     ],
+    exclude: ["node_modules/**", "archive/**"],
+
     plugins: [
       cleaner({
         targets: ["./lib", "./es"]

package/tsconfig.json

@@ -20,7 +20,6 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "rootDir": "src"
   },
   "include": [
     "next-env.d.ts",