the-omelet-ui 1.7.3 → 1.7.5

package/dist/entries/loadingSpinner.d.ts

@@ -0,0 +1,16 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import React__default from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const spinnerVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | "xs" | "2xl" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface LoadingSpinnerProps extends VariantProps<typeof spinnerVariants> {
+    className?: string;
+    /** 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>;
+declare const BarsSpinner: React__default.FC<LoadingSpinnerProps>;
+
+export { BarsSpinner, LoadingSpinner, type LoadingSpinnerProps, LoadingSpinner as default };

package/dist/entries/loadingSpinner.js

@@ -0,0 +1,2 @@
+import {a}from'../chunk-6GLPXMGB.js';import {useMemo}from'react';import {cva}from'class-variance-authority';import {jsxs,jsx}from'react/jsx-runtime';var m=cva("inline-block animate-spin",{variants:{size:{xs:"w-3 h-3",sm:"w-4 h-4",md:"w-6 h-6",lg:"w-8 h-8",xl:"w-12 h-12","2xl":"w-16 h-16"}},defaultVariants:{size:"md"}}),c=({size:n,className:o,colorClassName:s="text-blue-600"})=>jsxs("svg",{className:a(m({size:n}),s,o),xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",children:[jsx("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),jsx("path",{className:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}),d=cva("relative inline-block",{variants:{size:{xs:"w-5 h-5",sm:"w-6 h-6",md:"w-8 h-8",lg:"w-10 h-10",xl:"w-12 h-12","2xl":"w-16 h-16"}},defaultVariants:{size:"md"}}),h=({size:n="md",className:o,colorClassName:s="bg-blue-600"})=>{let l=useMemo(()=>Array.from({length:10},(e,a)=>({delay:a*100,rotation:a*36,opacity:1-a*.07})),[]);return jsx("div",{className:a(d({size:n}),o),children:l.map((e,a$1)=>jsx("div",{className:a("absolute rounded-sm animate-pulse",s),style:{width:"8%",height:"25%",left:"46%",top:"0%",borderRadius:2,transformOrigin:"50% 200%",transform:`rotate(${e.rotation}deg)`,opacity:e.opacity,animationDelay:`${e.delay}ms`,animationDuration:"1000ms"}},a$1))})},f=c;
+export{h as BarsSpinner,c as LoadingSpinner,f as default};

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.3",
+  "version": "1.7.5",
   "private": false,
   "license": "MIT",
   "type": "module",