@customafk/lunas-ui 0.0.24 → 0.0.26

package/dist/ui/tabs.d.ts

@@ -1,23 +1,23 @@
-import * as react_jsx_runtime123 from "react/jsx-runtime";
+import * as react_jsx_runtime200 from "react/jsx-runtime";
 import { Tabs as Tabs$1 } from "radix-ui";
 
 //#region packages/components/ui/tabs.d.ts
 declare function Tabs({
   className,
   ...props
-}: React.ComponentProps<typeof Tabs$1.Root>): react_jsx_runtime123.JSX.Element;
+}: React.ComponentProps<typeof Tabs$1.Root>): react_jsx_runtime200.JSX.Element;
 declare function TabsList({
   className,
   ...props
-}: React.ComponentProps<typeof Tabs$1.List>): react_jsx_runtime123.JSX.Element;
+}: React.ComponentProps<typeof Tabs$1.List>): react_jsx_runtime200.JSX.Element;
 declare function TabsTrigger({
   className,
   ...props
-}: React.ComponentProps<typeof Tabs$1.Trigger>): react_jsx_runtime123.JSX.Element;
+}: React.ComponentProps<typeof Tabs$1.Trigger>): react_jsx_runtime200.JSX.Element;
 declare function TabsContent({
   className,
   ...props
-}: React.ComponentProps<typeof Tabs$1.Content>): react_jsx_runtime123.JSX.Element;
+}: React.ComponentProps<typeof Tabs$1.Content>): react_jsx_runtime200.JSX.Element;
 //#endregion
 export { Tabs, TabsContent, TabsList, TabsTrigger };
 //# sourceMappingURL=tabs.d.ts.map

package/dist/ui/textarea.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime163 from "react/jsx-runtime";
+import * as react_jsx_runtime170 from "react/jsx-runtime";
 import React from "react";
 
 //#region packages/components/ui/textarea.d.ts
@@ -9,7 +9,7 @@ declare function Textarea({
   ...props
 }: React.ComponentProps<'textarea'> & {
   onValueChange?: (value: string) => void;
-}): react_jsx_runtime163.JSX.Element;
+}): react_jsx_runtime170.JSX.Element;
 //#endregion
 export { Textarea };
 //# sourceMappingURL=textarea.d.cts.map

package/dist/ui/textarea.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import * as react_jsx_runtime121 from "react/jsx-runtime";
+import * as react_jsx_runtime191 from "react/jsx-runtime";
 
 //#region packages/components/ui/textarea.d.ts
 declare function Textarea({
@@ -9,7 +9,7 @@ declare function Textarea({
   ...props
 }: React.ComponentProps<'textarea'> & {
   onValueChange?: (value: string) => void;
-}): react_jsx_runtime121.JSX.Element;
+}): react_jsx_runtime191.JSX.Element;
 //#endregion
 export { Textarea };
 //# sourceMappingURL=textarea.d.ts.map

package/dist/ui/toggle-group.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require(`../chunk-CUT6urMc.cjs`),t=require(`../utils-BsjVK5EW.cjs`),n=require(`../toggle-DO8QbhLS.cjs`),r=e.__toESM(require(`react`)),i=e.__toESM(require(`react/jsx-runtime`)),a=e.__toESM(require(`class-variance-authority`)),o=e.__toESM(require(`radix-ui`)),s=r.default.createContext({size:`default`,variant:`default`});function c({className:e,variant:n,size:r,children:a,...c}){return(0,i.jsx)(o.ToggleGroup.Root,{"data-slot":`toggle-group`,"data-variant":n,"data-size":r,className:t.cn(`group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs`,e),...c,children:(0,i.jsx)(s.Provider,{value:{variant:n,size:r},children:a})})}function l({className:e,children:a,variant:c,size:l,...u}){let d=r.default.useContext(s);return(0,i.jsx)(o.ToggleGroup.Item,{"data-slot":`toggle-group-item`,"data-variant":d.variant||c,"data-size":d.size||l,className:t.cn(n.toggleVariants({variant:d.variant||c,size:d.size||l}),`min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l`,e),...u,children:a})}exports.ToggleGroup=c,exports.ToggleGroupItem=l;
+"use client";const e=require(`../chunk-CUT6urMc.cjs`),t=require(`../utils-BsjVK5EW.cjs`),n=require(`../toggle-B7nXBZ9r.cjs`),r=e.__toESM(require(`react`)),i=e.__toESM(require(`react/jsx-runtime`)),a=e.__toESM(require(`class-variance-authority`)),o=e.__toESM(require(`radix-ui`)),s=r.default.createContext({size:`default`,variant:`default`});function c({className:e,variant:n,size:r,children:a,...c}){return(0,i.jsx)(o.ToggleGroup.Root,{"data-slot":`toggle-group`,"data-variant":n,"data-size":r,className:t.cn(`group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs`,e),...c,children:(0,i.jsx)(s.Provider,{value:{variant:n,size:r},children:a})})}function l({className:e,children:a,variant:c,size:l,...u}){let d=r.default.useContext(s);return(0,i.jsx)(o.ToggleGroup.Item,{"data-slot":`toggle-group-item`,"data-variant":d.variant||c,"data-size":d.size||l,className:t.cn(n.toggleVariants({variant:d.variant||c,size:d.size||l}),`min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l`,e),...u,children:a})}exports.ToggleGroup=c,exports.ToggleGroupItem=l;
 //# sourceMappingURL=toggle-group.cjs.map

package/dist/ui/toggle-group.d.cts

@@ -1,5 +1,5 @@
-import { toggleVariants } from "../toggle-9SGewcSc.cjs";
-import * as react_jsx_runtime200 from "react/jsx-runtime";
+import { toggleVariants } from "../toggle-Cx9H5u3p.cjs";
+import * as react_jsx_runtime168 from "react/jsx-runtime";
 import React from "react";
 import { VariantProps } from "class-variance-authority";
 import { ToggleGroup as ToggleGroup$1 } from "radix-ui";
@@ -11,14 +11,14 @@ declare function ToggleGroup({
   size,
   children,
   ...props
-}: React.ComponentProps<typeof ToggleGroup$1.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime200.JSX.Element;
+}: React.ComponentProps<typeof ToggleGroup$1.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime168.JSX.Element;
 declare function ToggleGroupItem({
   className,
   children,
   variant,
   size,
   ...props
-}: React.ComponentProps<typeof ToggleGroup$1.Item> & VariantProps<typeof toggleVariants>): react_jsx_runtime200.JSX.Element;
+}: React.ComponentProps<typeof ToggleGroup$1.Item> & VariantProps<typeof toggleVariants>): react_jsx_runtime168.JSX.Element;
 //#endregion
 export { ToggleGroup, ToggleGroupItem };
 //# sourceMappingURL=toggle-group.d.cts.map

package/dist/ui/toggle-group.d.ts

@@ -1,6 +1,6 @@
-import { toggleVariants } from "../toggle-DxWgPH7j.js";
+import { toggleVariants } from "../toggle-DH9IssyE.js";
 import React from "react";
-import * as react_jsx_runtime70 from "react/jsx-runtime";
+import * as react_jsx_runtime232 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
 import { ToggleGroup as ToggleGroup$1 } from "radix-ui";
 
@@ -11,14 +11,14 @@ declare function ToggleGroup({
   size,
   children,
   ...props
-}: React.ComponentProps<typeof ToggleGroup$1.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime70.JSX.Element;
+}: React.ComponentProps<typeof ToggleGroup$1.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime232.JSX.Element;
 declare function ToggleGroupItem({
   className,
   children,
   variant,
   size,
   ...props
-}: React.ComponentProps<typeof ToggleGroup$1.Item> & VariantProps<typeof toggleVariants>): react_jsx_runtime70.JSX.Element;
+}: React.ComponentProps<typeof ToggleGroup$1.Item> & VariantProps<typeof toggleVariants>): react_jsx_runtime232.JSX.Element;
 //#endregion
 export { ToggleGroup, ToggleGroupItem };
 //# sourceMappingURL=toggle-group.d.ts.map

package/dist/ui/toggle-group.js

@@ -1,2 +1,2 @@
-"use client";import{cn as e}from"../utils-D9AH0PUV.js";import{toggleVariants as t}from"../toggle-CHJ2edke.js";import n from"react";import{jsx as r}from"react/jsx-runtime";import"class-variance-authority";import{ToggleGroup as i}from"radix-ui";const a=n.createContext({size:`default`,variant:`default`});function o({className:t,variant:n,size:o,children:s,...c}){return r(i.Root,{"data-slot":`toggle-group`,"data-variant":n,"data-size":o,className:e(`group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs`,t),...c,children:r(a.Provider,{value:{variant:n,size:o},children:s})})}function s({className:o,children:s,variant:c,size:l,...u}){let d=n.useContext(a);return r(i.Item,{"data-slot":`toggle-group-item`,"data-variant":d.variant||c,"data-size":d.size||l,className:e(t({variant:d.variant||c,size:d.size||l}),`min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l`,o),...u,children:s})}export{o as ToggleGroup,s as ToggleGroupItem};
+"use client";import{cn as e}from"../utils-D9AH0PUV.js";import{toggleVariants as t}from"../toggle-A6eGkFij.js";import n from"react";import{jsx as r}from"react/jsx-runtime";import"class-variance-authority";import{ToggleGroup as i}from"radix-ui";const a=n.createContext({size:`default`,variant:`default`});function o({className:t,variant:n,size:o,children:s,...c}){return r(i.Root,{"data-slot":`toggle-group`,"data-variant":n,"data-size":o,className:e(`group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs`,t),...c,children:r(a.Provider,{value:{variant:n,size:o},children:s})})}function s({className:o,children:s,variant:c,size:l,...u}){let d=n.useContext(a);return r(i.Item,{"data-slot":`toggle-group-item`,"data-variant":d.variant||c,"data-size":d.size||l,className:e(t({variant:d.variant||c,size:d.size||l}),`min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l`,o),...u,children:s})}export{o as ToggleGroup,s as ToggleGroupItem};
 //# sourceMappingURL=toggle-group.js.map

package/dist/ui/toggle.cjs

@@ -1 +1 @@
-"use client";require(`../utils-BsjVK5EW.cjs`);const e=require(`../toggle-DO8QbhLS.cjs`);exports.Toggle=e.Toggle,exports.toggleVariants=e.toggleVariants;
+"use client";require(`../utils-BsjVK5EW.cjs`);const e=require(`../toggle-B7nXBZ9r.cjs`);exports.Toggle=e.Toggle,exports.toggleVariants=e.toggleVariants;

package/dist/ui/toggle.d.cts

@@ -1,2 +1,2 @@
-import { Toggle, toggleVariants } from "../toggle-9SGewcSc.cjs";
+import { Toggle, toggleVariants } from "../toggle-Cx9H5u3p.cjs";
 export { Toggle, toggleVariants };

package/dist/ui/toggle.d.ts

@@ -1,2 +1,2 @@
-import { Toggle, toggleVariants } from "../toggle-DxWgPH7j.js";
+import { Toggle, toggleVariants } from "../toggle-DH9IssyE.js";
 export { Toggle, toggleVariants };

package/dist/ui/toggle.js

@@ -1 +1 @@
-"use client";import"../utils-D9AH0PUV.js";import{Toggle as e,toggleVariants as t}from"../toggle-CHJ2edke.js";export{e as Toggle,t as toggleVariants};
+"use client";import"../utils-D9AH0PUV.js";import{Toggle as e,toggleVariants as t}from"../toggle-A6eGkFij.js";export{e as Toggle,t as toggleVariants};

package/dist/ui/tooltip.d.cts

@@ -1,2 +1,2 @@
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../tooltip-CbLQ7JEO.cjs";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../tooltip-BAtWdJyX.cjs";
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/ui/tooltip.d.ts

@@ -1,2 +1,2 @@
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../tooltip-DtXKnGdV.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../tooltip-Djh_dcy5.js";
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/use-mobile-CNVZwItd.js

@@ -0,0 +1,2 @@
+import e from"react";function t(){let[t,n]=e.useState(void 0);return e.useEffect(()=>{let e=window.matchMedia(`(max-width: 767px)`),t=()=>{n(window.innerWidth<768)};return e.addEventListener(`change`,t),n(window.innerWidth<768),()=>e.removeEventListener(`change`,t)},[]),!!t}export{t as useIsMobile};
+//# sourceMappingURL=use-mobile-CNVZwItd.js.map

package/dist/use-mobile-CNVZwItd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mobile-CNVZwItd.js","names":[],"sources":["../packages/hooks/use-mobile.ts"],"sourcesContent":["import React from 'react'\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    }\n    mql.addEventListener('change', onChange)\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    return () => mql.removeEventListener('change', onChange)\n  }, [])\n\n  return !!isMobile\n}\n"],"mappings":"qBAIA,SAAgB,GAAc,CAC5B,GAAM,CAAC,EAAU,GAAe,EAAM,SAA8B,IAAA,IAYpE,OAVA,EAAM,cAAgB,CACpB,IAAM,EAAM,OAAO,WAAW,sBACxB,MAAiB,CACrB,EAAY,OAAO,WAAa,MAIlC,OAFA,EAAI,iBAAiB,SAAU,GAC/B,EAAY,OAAO,WAAa,SACnB,EAAI,oBAAoB,SAAU,IAC9C,IAEI,CAAC,CAAC"}

package/dist/use-mobile-DD7ESbjU.cjs

@@ -0,0 +1,2 @@
+const e=require(`./chunk-CUT6urMc.cjs`),t=e.__toESM(require(`react`)),n=768;function r(){let[e,n]=t.default.useState(void 0);return t.default.useEffect(()=>{let e=window.matchMedia(`(max-width: 767px)`),t=()=>{n(window.innerWidth<768)};return e.addEventListener(`change`,t),n(window.innerWidth<768),()=>e.removeEventListener(`change`,t)},[]),!!e}Object.defineProperty(exports,`useIsMobile`,{enumerable:!0,get:function(){return r}});
+//# sourceMappingURL=use-mobile-DD7ESbjU.cjs.map

package/dist/use-mobile-DD7ESbjU.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mobile-DD7ESbjU.cjs","names":["React"],"sources":["../packages/hooks/use-mobile.ts"],"sourcesContent":["import React from 'react'\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    }\n    mql.addEventListener('change', onChange)\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    return () => mql.removeEventListener('change', onChange)\n  }, [])\n\n  return !!isMobile\n}\n"],"mappings":"sEAEM,EAAoB,IAE1B,SAAgB,GAAc,CAC5B,GAAM,CAAC,EAAU,GAAeA,EAAAA,QAAM,SAA8B,IAAA,IAYpE,OAVA,EAAA,QAAM,cAAgB,CACpB,IAAM,EAAM,OAAO,WAAW,sBACxB,MAAiB,CACrB,EAAY,OAAO,WAAa,MAIlC,OAFA,EAAI,iBAAiB,SAAU,GAC/B,EAAY,OAAO,WAAa,SACnB,EAAI,oBAAoB,SAAU,IAC9C,IAEI,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@customafk/lunas-ui",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "description": "UI library for Lunas Enterprise",
   "type": "module",
   "author": {
@@ -25,10 +25,6 @@
     "node": ">= 22.0.0"
   },
   "exports": {
-    "./styles/base": "./dist/styles/base.css",
-    "./styles/loader": "./dist/styles/loader.css",
-    "./styles/theme": "./dist/styles/theme.css",
-    "./styles/typography": "./dist/styles/typography.css",
     "./cards/simple-card": {
       "import": "./dist/cards/simple-card.js",
       "require": "./dist/cards/simple-card.cjs"
@@ -133,6 +129,10 @@
       "import": "./dist/forms/textarea-field.js",
       "require": "./dist/forms/textarea-field.cjs"
     },
+    "./layouts/app-layout": {
+      "import": "./dist/layouts/app-layout/index.js",
+      "require": "./dist/layouts/app-layout/index.cjs"
+    },
     "./layouts/flex": {
       "import": "./dist/layouts/flex.js",
       "require": "./dist/layouts/flex.cjs"

package/packages/components/layouts/app-layout/index.tsx

@@ -0,0 +1,74 @@
+import React from 'react'
+import { ShoppingCartIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+import { Sidebar, SidebarInset, SidebarProvider, SidebarTrigger } from './sidebar'
+
+export const AppLayoutWrapper: React.FC<React.PropsWithChildren> = ({ children }) => {
+  return <SidebarProvider>{children}</SidebarProvider>
+}
+
+export const AppLayoutHeader: React.FC<React.PropsWithChildren> = ({ children }) => {
+  return (
+    <header
+      className={cn(
+        'bg-card',
+        'h-(--header-height)',
+        'absolute inset-x-0 top-0 z-20',
+        'shadow-nav flex items-center gap-2',
+        'transition-[width,height] ease-linear',
+        'group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)',
+        'px-4',
+      )}
+    >
+      <SidebarTrigger />
+
+      <div className="ml-2.5 flex gap-x-2">
+        <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+          <ShoppingCartIcon size={20} />
+        </div>
+        <div className="grid flex-1 text-left text-sm leading-tight">
+          <span className="truncate font-medium">Lunas Store</span>
+          <span className="truncate text-xs">Established 2023</span>
+        </div>
+      </div>
+
+      <div className="flex flex-1 items-center justify-end">{children}</div>
+    </header>
+  )
+}
+
+export const AppLayoutSidebar: React.FC<React.PropsWithChildren & React.ComponentProps<typeof Sidebar>> = ({ children, ...props }) => {
+  return (
+    <Sidebar variant="inset" collapsible="icon" {...props}>
+      {children}
+    </Sidebar>
+  )
+}
+
+export const AppLayoutMain: React.FC<React.PropsWithChildren> = ({ children }) => {
+  return (
+    <SidebarInset>
+      <section className="relative size-full">
+        <div className="absolute inset-0">{children}</div>
+      </section>
+    </SidebarInset>
+  )
+}
+
+export const AppLayoutMainGroup: React.FC<React.PropsWithChildren<{ className?: string }>> = ({ children, className }) => {
+  return (
+    <div data-slot="main-group" className={cn('flex size-full flex-col gap-4 overflow-y-auto p-4', className)}>
+      {children}
+    </div>
+  )
+}
+
+export const AppLayoutMainGroupContent: React.FC<React.PropsWithChildren> = ({ children }) => {
+  return (
+    <div data-slot="main-group-content" className="bg-card shadow-card size-full rounded-md p-4">
+      {children}
+    </div>
+  )
+}