the-omelet-ui 1.7.4 → 1.7.7

package/dist/entries/loadingSpinner.d.ts

@@ -7,7 +7,7 @@ declare const spinnerVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface LoadingSpinnerProps extends VariantProps<typeof spinnerVariants> {
     className?: string;
-    /** Custom color for the spinner (eg. text-red-500) */
+    /** Custom color for the spinner (eg. text-red-500 for Loading Spinner , bg-red-500 for Bars Spinner) */
     colorClassName?: string;
 }
 declare const LoadingSpinner: React__default.FC<LoadingSpinnerProps>;

package/dist/entries/sheet.d.ts

@@ -0,0 +1,172 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import React__default from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const sheetContentVariants: (props?: ({
+    side?: "bottom" | "top" | "right" | "left" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SheetProps {
+    /**
+     * เปิด/ปิด Sheet
+     */
+    open?: boolean;
+    /**
+     * Callback เมื่อเปิด/ปิด Sheet
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * เนื้อหาภายใน Sheet
+     */
+    children: React__default.ReactNode;
+}
+/**
+ * Sheet Root Component
+ *
+ * @example
+ * <Sheet open={open} onOpenChange={setOpen}>
+ *   <SheetContent>
+ *     <SheetHeader>
+ *       <SheetTitle>Title</SheetTitle>
+ *       <SheetDescription>Description</SheetDescription>
+ *     </SheetHeader>
+ *     Content here
+ *   </SheetContent>
+ * </Sheet>
+ */
+declare const Sheet: React__default.FC<SheetProps>;
+interface SheetTriggerProps {
+    /**
+     * Element ที่จะเป็นปุ่มเปิด Sheet
+     */
+    children: React__default.ReactNode;
+    /**
+     * CSS class เพิ่มเติม
+     */
+    className?: string;
+    /**
+     * Disabled trigger
+     */
+    disabled?: boolean;
+}
+/**
+ * Sheet Trigger - ปุ่มสำหรับเปิด Sheet
+ *
+ * @example
+ * <SheetTrigger>
+ *   <button>Open Sheet</button>
+ * </SheetTrigger>
+ */
+declare const SheetTrigger: React__default.FC<SheetTriggerProps>;
+interface SheetContentProps extends VariantProps<typeof sheetContentVariants> {
+    /**
+     * เนื้อหาภายใน Sheet
+     */
+    children: React__default.ReactNode;
+    /**
+     * ทิศทางที่ Sheet จะเลื่อนเข้ามา
+     * @default "left"
+     */
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    /**
+     * CSS class เพิ่มเติม
+     */
+    className?: string;
+    /**
+     * แสดงปุ่มปิด (X)
+     * @default true
+     */
+    showClose?: boolean;
+    /**
+     * ระยะเวลาของ animation (milliseconds)
+     * @default 300
+     * @example duration={500} // 500ms (0.5 วินาที)
+     */
+    duration?: number;
+}
+/**
+ * Sheet Content - เนื้อหาของ Sheet
+ *
+ * @example
+ * <SheetContent side="right" duration={500}>
+ *   Content here
+ * </SheetContent>
+ */
+declare const SheetContent: React__default.FC<SheetContentProps>;
+interface SheetHeaderProps {
+    /**
+     * เนื้อหาภายใน header
+     */
+    children: React__default.ReactNode;
+    /**
+     * CSS class เพิ่มเติม
+     */
+    className?: string;
+}
+/**
+ * Sheet Header
+ *
+ * @example
+ * <SheetHeader>
+ *   <SheetTitle>Title</SheetTitle>
+ *   <SheetDescription>Description</SheetDescription>
+ * </SheetHeader>
+ */
+declare const SheetHeader: React__default.FC<SheetHeaderProps>;
+interface SheetFooterProps {
+    /**
+     * เนื้อหาภายใน footer
+     */
+    children: React__default.ReactNode;
+    /**
+     * CSS class เพิ่มเติม
+     */
+    className?: string;
+}
+/**
+ * Sheet Footer
+ *
+ * @example
+ * <SheetFooter>
+ *   <button>Cancel</button>
+ *   <button>Submit</button>
+ * </SheetFooter>
+ */
+declare const SheetFooter: React__default.FC<SheetFooterProps>;
+interface SheetTitleProps {
+    /**
+     * ข้อความ title
+     */
+    children: React__default.ReactNode;
+    /**
+     * CSS class เพิ่มเติม
+     */
+    className?: string;
+}
+/**
+ * Sheet Title
+ *
+ * @example
+ * <SheetTitle>Edit Profile</SheetTitle>
+ */
+declare const SheetTitle: React__default.FC<SheetTitleProps>;
+interface SheetDescriptionProps {
+    /**
+     * ข้อความ description
+     */
+    children: React__default.ReactNode;
+    /**
+     * CSS class เพิ่มเติม
+     */
+    className?: string;
+}
+/**
+ * Sheet Description
+ *
+ * @example
+ * <SheetDescription>
+ *   Make changes to your profile here.
+ * </SheetDescription>
+ */
+declare const SheetDescription: React__default.FC<SheetDescriptionProps>;
+
+export { Sheet, SheetContent, type SheetContentProps, SheetDescription, type SheetDescriptionProps, SheetFooter, type SheetFooterProps, SheetHeader, type SheetHeaderProps, type SheetProps, SheetTitle, type SheetTitleProps, SheetTrigger, type SheetTriggerProps };

package/dist/entries/sheet.js

@@ -0,0 +1 @@
+import {a}from'../chunk-6GLPXMGB.js';import {createContext,useState,useEffect,useContext}from'react';import {cva}from'class-variance-authority';import {X}from'lucide-react';import {jsx,jsxs,Fragment}from'react/jsx-runtime';var f=createContext(void 0),u=()=>{let e=useContext(f);if(!e)throw new Error("Sheet components must be used within Sheet");return e},y=cva("fixed z-50 bg-white shadow-lg transition-all duration-300 ease-in-out",{variants:{side:{top:"inset-x-0 top-0 border-b",bottom:"inset-x-0 bottom-0 border-t",left:"inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",right:"inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm"}},defaultVariants:{side:"left"}}),P=({open:e=false,onOpenChange:t,children:o})=>{let[n,i]=useState(e);useEffect(()=>{i(e);},[e]);let s=c=>{i(c),t?.(c);};return useEffect(()=>(n?document.body.style.overflow="hidden":document.body.style.overflow="unset",()=>{document.body.style.overflow="unset";}),[n]),jsx(f.Provider,{value:{open:n,onOpenChange:s},children:o})},v=({children:e,className:t,disabled:o})=>{let{onOpenChange:n}=u();return jsx("div",{onClick:()=>!o&&n(true),className:a(t,o&&"opacity-50 cursor-not-allowed"),children:e})},N=({children:e})=>{let[t,o]=useState(false);return useEffect(()=>(o(true),()=>o(false)),[]),t?jsx(Fragment,{children:e}):null},R=({className:e,duration:t=200})=>{let{open:o,onOpenChange:n}=u(),[i,s]=useState(false);return useEffect(()=>{o?setTimeout(()=>s(true),10):s(false);},[o]),o?jsx("div",{className:a("fixed inset-0 z-40 bg-black/50 backdrop-blur-sm transition-opacity",i?"opacity-100":"opacity-0",e),style:{transitionDuration:`${t}ms`},onClick:()=>n(false)}):null},w=({children:e,side:t="left",className:o,showClose:n=true,duration:i=300})=>{let{open:s,onOpenChange:c}=u(),[m,d]=useState(false);if(useEffect(()=>{s?setTimeout(()=>d(true),10):d(false);},[s]),!s)return null;let S=()=>{if(m)return "translate-x-0 translate-y-0";switch(t){case "left":return "-translate-x-full";case "right":return "translate-x-full";case "top":return "-translate-y-full";case "bottom":return "translate-y-full";default:return ""}};return jsxs(N,{children:[jsx(R,{duration:i}),jsxs("div",{className:a(y({side:t}),"transition-all ease-in-out",S(),o),style:{transitionDuration:`${i}ms`},children:[n&&jsxs("button",{onClick:()=>c(false),className:"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:pointer-events-none",children:[jsx(X,{className:"h-4 w-4"}),jsx("span",{className:"sr-only",children:"Close"})]}),jsx("div",{className:"h-full overflow-auto",children:e})]})]})},F=({children:e,className:t})=>jsx("div",{className:a("flex flex-col space-y-2 px-6 py-4 border-b",t),children:e}),T=({children:e,className:t})=>jsx("div",{className:a("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 px-6 py-4 border-t",t),children:e}),V=({children:e,className:t})=>jsx("h2",{className:a("text-lg font-semibold text-gray-900",t),children:e}),O=({children:e,className:t})=>jsx("p",{className:a("text-sm text-gray-500",t),children:e});export{P as Sheet,w as SheetContent,O as SheetDescription,T as SheetFooter,F as SheetHeader,V as SheetTitle,v as SheetTrigger};

package/dist/entries/tag.d.ts

@@ -0,0 +1,99 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import React__default from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * Tag Component Variants using CVA
+ *
+ * Types (Colors):
+ * - blue: สีน้ำเงิน - ใช้สำหรับข้อมูลทั่วไป, status ปกติ
+ * - gray: สีเทา - ใช้สำหรับข้อมูลรอง, disabled, neutral
+ * - green: สีเขียว - ใช้สำหรับ success, active, approved
+ * - yellow: สีเหลือง - ใช้สำหรับ warning, pending
+ * - red: สีแดง - ใช้สำหรับ error, danger, rejected
+ *
+ * Variants:
+ * - filled: พื้นหลังเต็มสี (default)
+ * - outlined: มีแค่ border และข้อความสี
+ */
+declare const tagVariants: (props?: ({
+    type?: "red" | "green" | "blue" | "yellow" | "gray" | null | undefined;
+    variant?: "filled" | "outlined" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface TagProps extends VariantProps<typeof tagVariants> {
+    /**
+     * ข้อความที่แสดงใน tag
+     * @example "Label"
+     */
+    children: React__default.ReactNode;
+    /**
+     * สีของ tag
+     * @default "blue"
+     *
+     * - blue: สีน้ำเงิน - ใช้สำหรับข้อมูลทั่วไป
+     * - gray: สีเทา - ใช้สำหรับข้อมูลรอง
+     * - green: สีเขียว - ใช้สำหรับ success
+     * - yellow: สีเหลือง - ใช้สำหรับ warning
+     * - red: สีแดง - ใช้สำหรับ error
+     */
+    type?: 'blue' | 'gray' | 'green' | 'yellow' | 'red';
+    /**
+     * รูปแบบของ tag
+     * @default "filled"
+     *
+     * - filled: พื้นหลังเต็มสี
+     * - outlined: มีแค่ border และข้อความสี
+     */
+    variant?: 'filled' | 'outlined';
+    /**
+     * แสดงปุ่มปิด (X)
+     * @default false
+     */
+    closable?: boolean;
+    /**
+     * Callback เมื่อกดปุ่มปิด
+     */
+    onClose?: () => void;
+    /**
+     * CSS class เพิ่มเติม
+     */
+    className?: string;
+    /**
+     * Icon ที่แสดงด้านหน้า label
+     * @example <IconCheck className="w-4 h-4" />
+     */
+    icon?: React__default.ReactNode;
+}
+/**
+ * Tag Component
+ *
+ * Component สำหรับแสดง label, category, status, หรือ badge
+ *
+ * @example
+ * // Basic usage
+ * <Tag>Label</Tag>
+ *
+ * @example
+ * // With different colors
+ * <Tag type="blue">Info</Tag>
+ * <Tag type="green">Success</Tag>
+ * <Tag type="yellow">Warning</Tag>
+ * <Tag type="red">Error</Tag>
+ *
+ * @example
+ * // Outlined variant
+ * <Tag variant="outlined">Outlined</Tag>
+ *
+ * @example
+ * // With close button
+ * <Tag closable onClose={() => console.log('closed')}>
+ *   Closable Tag
+ * </Tag>
+ *
+ * @example
+ * // With icon
+ * <Tag icon={<CheckIcon />}>With Icon</Tag>
+ */
+declare const Tag: React__default.FC<TagProps>;
+
+export { Tag, type TagProps, Tag as default };

package/dist/entries/tag.js

@@ -0,0 +1,2 @@
+import {a}from'../chunk-6GLPXMGB.js';import {cva}from'class-variance-authority';import {forwardRef,memo}from'react';import {jsxs,jsx}from'react/jsx-runtime';var m=({title:t,titleId:e,...a},l)=>jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 16 16",width:"1em",height:"1em",ref:l,"aria-labelledby":e,...a,children:[t?jsx("title",{id:e,children:t}):null,jsx("path",{fill:"currentColor",fillRule:"evenodd",d:"M.26.26a.89.89 0 0 1 1.257 0L8 6.743 14.483.26a.889.889 0 0 1 1.257 1.257L9.257 8l6.483 6.483a.889.889 0 1 1-1.257 1.257L8 9.257 1.517 15.74A.889.889 0 0 1 .26 14.483L6.743 8 .26 1.517A.89.89 0 0 1 .26.26",clipRule:"evenodd"})]}),v=forwardRef(m),c=memo(v),s=c;var f=cva("inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors",{variants:{type:{blue:"",gray:"",green:"",yellow:"",red:""},variant:{filled:"",outlined:"bg-white border"}},compoundVariants:[{type:"blue",variant:"filled",className:"bg-blue-500 text-white hover:bg-blue-600"},{type:"blue",variant:"outlined",className:"border-blue-500 text-blue-600 hover:bg-blue-50"},{type:"gray",variant:"filled",className:"bg-gray-500 text-white hover:bg-gray-600"},{type:"gray",variant:"outlined",className:"border-gray-400 text-gray-600 hover:bg-gray-50"},{type:"green",variant:"filled",className:"bg-green-500 text-white hover:bg-green-600"},{type:"green",variant:"outlined",className:"border-green-500 text-green-600 hover:bg-green-50"},{type:"yellow",variant:"filled",className:"bg-yellow-500 text-white hover:bg-yellow-600"},{type:"yellow",variant:"outlined",className:"border-yellow-500 text-yellow-600 hover:bg-yellow-50"},{type:"red",variant:"filled",className:"bg-red-500 text-white hover:bg-red-600"},{type:"red",variant:"outlined",className:"border-red-500 text-red-600 hover:bg-red-50"}],defaultVariants:{type:"blue",variant:"filled"}}),x=cva("inline-flex items-center justify-center rounded hover:bg-black/10 transition-colors",{variants:{type:{blue:"",gray:"",green:"",yellow:"",red:""},variant:{filled:"text-white/80 hover:text-white",outlined:""}},compoundVariants:[{type:"blue",variant:"outlined",className:"text-blue-500 hover:text-blue-700"},{type:"gray",variant:"outlined",className:"text-gray-500 hover:text-gray-700"},{type:"green",variant:"outlined",className:"text-green-500 hover:text-green-700"},{type:"yellow",variant:"outlined",className:"text-yellow-500 hover:text-yellow-700"},{type:"red",variant:"outlined",className:"text-red-500 hover:text-red-700"}],defaultVariants:{type:"blue",variant:"filled"}}),h=({children:t,type:e="blue",variant:a$1="filled",closable:l=false,onClose:g,className:p,icon:n})=>jsxs("span",{className:a(f({type:e,variant:a$1}),p),children:[n&&jsx("span",{className:"inline-flex",children:n}),jsx("span",{children:t}),l&&jsx("button",{type:"button",onClick:g,className:a(x({type:e,variant:a$1}),"p-0.5"),"aria-label":"Remove",children:jsx(s,{fontSize:10})})]}),w=h;
+export{h as Tag,w as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "the-omelet-ui",
-  "version": "1.7.4",
+  "version": "1.7.7",
   "private": false,
   "license": "MIT",
   "type": "module",