the-omelet-ui 1.4.4 → 1.4.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,34 +1,22 @@
|
|
|
1
1
|
import React__default from 'react';
|
|
2
2
|
|
|
3
3
|
interface HorizontalCardProps {
|
|
4
|
-
/**
|
|
5
|
-
* URL ของรูปภาพของรางวัล
|
|
6
|
-
*/
|
|
4
|
+
/** URL ของรูปภาพของรางวัล */
|
|
7
5
|
imageSrc?: string;
|
|
8
|
-
/**
|
|
9
|
-
* เนื้อหา header ของการ์ด (เช่น badge คะแนน)
|
|
10
|
-
*/
|
|
6
|
+
/** เนื้อหา header ของการ์ด (เช่น badge คะแนน) */
|
|
11
7
|
header?: React__default.ReactNode;
|
|
12
|
-
/**
|
|
13
|
-
* เนื้อหาส่วน body ของการ์ด (เช่น ชื่อสินค้า)
|
|
14
|
-
*/
|
|
8
|
+
/** เนื้อหาส่วน body ของการ์ด (เช่น ชื่อสินค้า) */
|
|
15
9
|
body?: React__default.ReactNode;
|
|
16
|
-
/**
|
|
17
|
-
* เนื้อหา footer ของการ์ด (เช่น สถานะ)
|
|
18
|
-
*/
|
|
10
|
+
/** เนื้อหา footer ของการ์ด (เช่น สถานะ) */
|
|
19
11
|
footer?: React__default.ReactNode;
|
|
20
|
-
/**
|
|
21
|
-
* Custom className
|
|
22
|
-
*/
|
|
12
|
+
/** Custom className */
|
|
23
13
|
className?: string;
|
|
24
|
-
/**
|
|
25
|
-
* Click handler
|
|
26
|
-
*/
|
|
14
|
+
/** Click handler */
|
|
27
15
|
onClick?: () => void;
|
|
28
|
-
/**
|
|
29
|
-
* Disabled state - ทำให้การ์ดเป็นสีเทาและไม่สามารถคลิกได้
|
|
30
|
-
*/
|
|
16
|
+
/** Disabled state - ทำให้การ์ดเป็นสีเทาและไม่สามารถคลิกได้ */
|
|
31
17
|
disabled?: boolean;
|
|
18
|
+
/** ขนาดการ์ด ('md' = สูง 128px) */
|
|
19
|
+
size?: 'sm' | 'md' | 'lg';
|
|
32
20
|
}
|
|
33
21
|
declare const HorizontalCard: React__default.FC<HorizontalCardProps>;
|
|
34
22
|
|
|
@@ -1,11 +1 @@
|
|
|
1
|
-
import {
|
|
2
|
-
bg-white rounded-2xl overflow-hidden shadow-sm
|
|
3
|
-
flex
|
|
4
|
-
transition-all duration-200
|
|
5
|
-
${!s&&o?"cursor-pointer hover:shadow-lg":""}
|
|
6
|
-
${s?"cursor-not-allowed":""}
|
|
7
|
-
${c}
|
|
8
|
-
`,onClick:d,children:[i&&jsx("div",{className:"relative w-1/3 min-w-[120px] max-w-[200px] bg-gray-100 flex-shrink-0",children:jsx("img",{src:i,alt:"Reward",className:`
|
|
9
|
-
w-full h-full object-cover
|
|
10
|
-
${s?"grayscale":""}
|
|
11
|
-
`,loading:"lazy"})}),jsxs("div",{className:"flex-1 p-4 flex flex-col justify-between",children:[a&&jsx("div",{className:"mb-2",children:typeof a=="string"?jsx("div",{className:"text-sm font-semibold text-gray-900",children:a}):a}),t&&jsx("div",{className:"flex-1",children:typeof t=="string"?jsx("p",{className:"text-base font-medium text-gray-800 line-clamp-2",children:t}):t}),l&&jsx("div",{className:"mt-2",children:typeof l=="string"?jsx("p",{className:"text-sm text-gray-600",children:l}):l})]})]})},m=n;export{m as default};
|
|
1
|
+
import {a}from'../chunk-6GLPXMGB.js';import {memo,useCallback}from'react';import {jsx,jsxs}from'react/jsx-runtime';var n=memo(({src:e})=>jsx("div",{className:"flex-shrink-0 w-[128px] h-full overflow-hidden",children:jsx("img",{src:e,alt:"",className:"object-cover w-full h-full",loading:"lazy"})}));n.displayName="CardImage";var c=memo(({header:e,body:t,footer:o})=>jsxs("div",{className:"flex flex-col justify-between flex-1 p-4",children:[e&&jsx("div",{className:"text-sm font-medium text-gray-600",children:typeof e=="string"?jsx("span",{children:e}):e}),t&&jsx("div",{className:"flex-1 text-base font-semibold text-gray-900 line-clamp-2",children:typeof t=="string"?jsx("span",{children:t}):t}),o&&jsx(m,{children:o})]}));c.displayName="CardContent";var m=memo(({children:e})=>jsx("div",{className:"text-sm text-gray-500 mt-2",children:typeof e=="string"?jsx("span",{children:e}):e}));m.displayName="CardFooter";var f=memo(({imageSrc:e,header:t,body:o,footer:x,className:v,onClick:s,disabled:d=false,size:l="md"})=>{let N=useCallback(()=>{!d&&s&&s();},[d,s]);return jsxs("div",{onClick:N,className:a("flex w-full overflow-hidden rounded-2xl border border-gray-200 bg-white transition-all duration-150","hover:shadow-md active:scale-[0.99]",d&&"pointer-events-none opacity-50 grayscale",l==="sm"&&"h-[96px]",l==="md"&&"h-[128px]",l==="lg"&&"h-[160px]",v),children:[e&&jsx(n,{src:e}),jsx(c,{header:t,body:o,footer:x})]})});f.displayName="HorizontalCard";var C=f;export{C as default};
|
package/dist/entries/tabs.d.ts
CHANGED
|
@@ -1,57 +1,26 @@
|
|
|
1
1
|
import React__default from 'react';
|
|
2
2
|
|
|
3
3
|
interface Tab {
|
|
4
|
-
/**
|
|
5
|
-
* Unique identifier for the tab
|
|
6
|
-
*/
|
|
7
4
|
value: string;
|
|
8
|
-
/**
|
|
9
|
-
* Display label
|
|
10
|
-
*/
|
|
11
5
|
label: string;
|
|
12
|
-
/**
|
|
13
|
-
* Disabled state
|
|
14
|
-
*/
|
|
15
6
|
disabled?: boolean;
|
|
16
|
-
/**
|
|
17
|
-
* Badge count (optional)
|
|
18
|
-
*/
|
|
19
7
|
badge?: number;
|
|
20
8
|
}
|
|
21
9
|
interface TabsProps {
|
|
22
|
-
/**
|
|
23
|
-
* Array of tabs
|
|
24
|
-
*/
|
|
25
10
|
tabs: Tab[];
|
|
26
|
-
/**
|
|
27
|
-
* Currently selected tab value
|
|
28
|
-
*/
|
|
29
11
|
value?: string;
|
|
30
|
-
/**
|
|
31
|
-
* Default selected tab (for uncontrolled)
|
|
32
|
-
*/
|
|
33
12
|
defaultValue?: string;
|
|
34
|
-
/**
|
|
35
|
-
* Callback when tab changes
|
|
36
|
-
*/
|
|
37
13
|
onChange?: (value: string) => void;
|
|
38
|
-
/**
|
|
39
|
-
* Custom className
|
|
40
|
-
*/
|
|
41
14
|
className?: string;
|
|
42
|
-
/**
|
|
43
|
-
* Variant style
|
|
44
|
-
*/
|
|
45
15
|
variant?: 'pill' | 'underline' | 'solid' | 'outline';
|
|
46
|
-
/**
|
|
47
|
-
* Size
|
|
48
|
-
*/
|
|
49
16
|
size?: 'sm' | 'md' | 'lg';
|
|
17
|
+
fullWidth?: boolean;
|
|
50
18
|
/**
|
|
51
|
-
*
|
|
19
|
+
* Custom class for active tab — override สีของ tab ที่ active
|
|
20
|
+
* เช่น 'bg-blue-600 text-white' หรือ 'text-primary border-primary'
|
|
52
21
|
*/
|
|
53
|
-
|
|
22
|
+
activeColor?: string;
|
|
54
23
|
}
|
|
55
24
|
declare const Tabs: React__default.FC<TabsProps>;
|
|
56
25
|
|
|
57
|
-
export { type Tab, type TabsProps, Tabs as default };
|
|
26
|
+
export { type Tab, Tabs, type TabsProps, Tabs as default };
|
package/dist/entries/tabs.js
CHANGED
|
@@ -1,15 +1 @@
|
|
|
1
|
-
import {useState}from'react';import {jsx,jsxs}from'react/jsx-runtime';var
|
|
2
|
-
${y[c]}
|
|
3
|
-
${a.tab}
|
|
4
|
-
${t?a.active:a.inactive}
|
|
5
|
-
${r?"opacity-50 cursor-not-allowed":"cursor-pointer"}
|
|
6
|
-
${u?"flex-1":""}
|
|
7
|
-
font-medium
|
|
8
|
-
whitespace-nowrap
|
|
9
|
-
focus:outline-none
|
|
10
|
-
`,children:jsxs("span",{className:"flex items-center gap-2",children:[e.label,e.badge!==void 0&&e.badge>0&&jsx("span",{className:`
|
|
11
|
-
inline-flex items-center justify-center
|
|
12
|
-
min-w-[20px] h-5 px-1.5
|
|
13
|
-
text-xs font-semibold rounded-full
|
|
14
|
-
${t?n==="pill"||n==="outline"?"bg-gray-900 text-white":"bg-white text-gray-900":"bg-gray-200 text-gray-700"}
|
|
15
|
-
`,children:e.badge>99?"99+":e.badge})]})},e.value)})})},h=f;export{h as default};
|
|
1
|
+
import {a}from'../chunk-6GLPXMGB.js';import {useState}from'react';import {jsx,jsxs}from'react/jsx-runtime';var C=({tabs:l,value:d,defaultValue:g,onChange:c,className:u,variant:i="pill",size:b="md",fullWidth:p=false,activeColor:s})=>{let[x,v]=useState(g||l[0]?.value||""),y=d??x,m=(e,t)=>{t||(v(e),c?.(e));},f={sm:"px-3 py-1.5 text-sm",md:"px-4 py-2 text-base",lg:"px-5 py-3 text-lg"},r={pill:{container:"bg-gray-100 rounded-full p-1",tab:"rounded-full transition-all duration-200",active:"bg-white shadow-sm text-gray-900",inactive:"hover:bg-gray-50 text-gray-600"},outline:{container:"gap-2",tab:"rounded-[24px] border transition-all duration-200 focus:outline-none",active:"border-gray-900 text-gray-900 bg-white",inactive:"border-gray-300 text-gray-600 hover:border-gray-400 hover:text-gray-900"},underline:{container:"border-b border-gray-200",tab:"border-b-2 border-transparent transition-colors duration-200 -mb-px",active:"border-gray-900 text-gray-900",inactive:"text-gray-500 hover:text-gray-700 hover:border-gray-300"},solid:{container:"gap-2",tab:"rounded-lg transition-all duration-200",active:"bg-gray-900 text-white",inactive:"bg-gray-100 text-gray-700 hover:bg-gray-200"}}[i];return jsx("div",{role:"tablist",className:a("inline-flex items-center overflow-auto",r.container,u),children:l.map(e=>{let t=y===e.value,a$1=e.disabled,h=s||r.active;return jsx("button",{role:"tab","aria-selected":t,"aria-disabled":a$1,disabled:a$1,onClick:()=>m(e.value,a$1),className:a(f[b],r.tab,p&&"flex-1","font-medium whitespace-nowrap focus:outline-none",{[h]:t,[r.inactive]:!t,"opacity-50 cursor-not-allowed":a$1,"cursor-pointer":!a$1}),children:jsxs("span",{className:"flex items-center gap-2",children:[e.label,e.badge!==void 0&&e.badge>0&&jsx("span",{className:a("inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-xs font-semibold rounded-full",t?s||(i==="pill"||i==="outline"?"bg-gray-900 text-white":"bg-white text-gray-900"):"bg-gray-200 text-gray-700"),children:e.badge>99?"99+":e.badge})]})},e.value)})})},T=C;export{C as Tabs,T as default};
|
|
@@ -1,32 +1,24 @@
|
|
|
1
1
|
import React__default from 'react';
|
|
2
2
|
|
|
3
3
|
interface VerticalCardProps {
|
|
4
|
-
/**
|
|
5
|
-
* URL ของรูปภาพของรางวัล
|
|
6
|
-
*/
|
|
7
4
|
imageSrc?: string;
|
|
8
|
-
/**
|
|
9
|
-
* เนื้อหา header ของการ์ด (เช่น "Physical Reward")
|
|
10
|
-
*/
|
|
11
5
|
header?: React__default.ReactNode;
|
|
12
|
-
/**
|
|
13
|
-
* เนื้อหาส่วน body ของการ์ด (เช่น "150 คะแนน")
|
|
14
|
-
*/
|
|
15
6
|
body?: React__default.ReactNode;
|
|
16
|
-
/**
|
|
17
|
-
* เนื้อหา footer ของการ์ด (เช่น ปุ่มหรือข้อมูลเพิ่มเติม)
|
|
18
|
-
*/
|
|
19
7
|
footer?: React__default.ReactNode;
|
|
8
|
+
className?: string;
|
|
9
|
+
onClick?: () => void;
|
|
10
|
+
disabled?: boolean;
|
|
20
11
|
/**
|
|
21
|
-
*
|
|
12
|
+
* ขนาดของการ์ด
|
|
22
13
|
*/
|
|
23
|
-
|
|
14
|
+
size?: 'sm' | 'md' | 'lg';
|
|
24
15
|
/**
|
|
25
|
-
*
|
|
16
|
+
* สัดส่วนของรูปภาพเทียบกับการ์ดทั้งหมด (0–1)
|
|
17
|
+
* เช่น 0.4 = 40% image, 60% content
|
|
18
|
+
* ถ้าไม่ได้ระบุ จะใช้ค่า default ตาม 0.5
|
|
26
19
|
*/
|
|
27
|
-
|
|
28
|
-
disabled?: boolean;
|
|
20
|
+
imgRatio?: number;
|
|
29
21
|
}
|
|
30
|
-
declare const VerticalCard: React__default.
|
|
22
|
+
declare const VerticalCard: React__default.NamedExoticComponent<VerticalCardProps>;
|
|
31
23
|
|
|
32
24
|
export { type VerticalCardProps, VerticalCard as default };
|
|
@@ -1,10 +1 @@
|
|
|
1
|
-
import {
|
|
2
|
-
bg-white rounded-2xl overflow-hidden shadow-sm
|
|
3
|
-
transition-all duration-200 hover:shadow-lg
|
|
4
|
-
${l?"cursor-pointer":""}
|
|
5
|
-
${s?"cursor-not-allowed":""}
|
|
6
|
-
${i}
|
|
7
|
-
`,onClick:l,children:[o&&jsx("div",{className:"relative w-full aspect-[4/3] bg-gray-100 overflow-hidden",children:jsx("img",{src:o,alt:"Reward",className:`
|
|
8
|
-
w-full h-full object-cover
|
|
9
|
-
${s?"grayscale":""}
|
|
10
|
-
`,loading:"lazy"})}),jsxs("div",{className:"p-4",children:[jsx("div",{className:"mb-4",children:typeof e=="string"?jsx("h3",{className:"text-2xl font-bold text-gray-900",children:e}):e}),jsx("div",{className:"mb-4",children:typeof t=="string"?jsx("p",{className:"text-gray-700",children:t}):t}),r&&jsx("div",{className:"mt-6",children:r})]})]}),m=c;export{m as default};
|
|
1
|
+
import {a}from'../chunk-6GLPXMGB.js';import {memo,useMemo,useCallback}from'react';import {jsx,jsxs}from'react/jsx-runtime';var I={sm:{height:200,ratio:.4},md:{height:246,ratio:.4},lg:{height:300,ratio:.4}},p=memo(({imageSrc:e,imageHeight:i,disabled:l})=>jsx("div",{className:"relative w-full bg-gray-100 overflow-hidden flex-shrink-0",style:{height:`${i}px`},children:jsx("img",{src:e,alt:"Reward",className:a("w-full h-full object-cover transition-all duration-200",l&&"grayscale"),loading:"lazy"})}));p.displayName="CardImage";var N=memo(({header:e})=>jsx("div",{className:"mb-2 flex-shrink-0",children:typeof e=="string"?jsx("h3",{className:"text-lg font-bold text-gray-900 line-clamp-1",children:e}):e}));N.displayName="CardHeader";var x=memo(({body:e})=>jsx("div",{className:"flex-1 mb-2 overflow-hidden",children:typeof e=="string"?jsx("p",{className:"text-sm text-gray-700 line-clamp-2",children:e}):e}));x.displayName="CardBody";var v=memo(({footer:e})=>jsx("div",{className:"mt-auto flex-shrink-0",children:e}));v.displayName="CardFooter";var y=memo(({size:e="md",imageSrc:i,header:l,body:c,footer:m,className:n,onClick:o,disabled:t=false,imgRatio:C=.5})=>{let s=useMemo(()=>I[e],[e]),R=C??s.ratio,g=s.height*R,u=s.height-g,w=useMemo(()=>a("bg-white rounded-2xl overflow-hidden shadow-sm transition-all duration-200 flex flex-col",o&&!t&&"cursor-pointer hover:shadow-lg",t&&"opacity-60 cursor-not-allowed",n),[o,t,n]),b=useCallback(()=>{!t&&o&&o();},[t,o]);return jsxs("div",{className:w,style:{height:`${s.height}px`},onClick:b,children:[i&&jsx(p,{imageSrc:i,imageHeight:g,disabled:t}),jsxs("div",{className:"flex-1 flex flex-col px-4 py-4 overflow-hidden",style:{height:`${u}px`},children:[l&&jsx(N,{header:l}),c&&jsx(x,{body:c}),m&&jsx(v,{footer:m})]})]})});y.displayName="VerticalCard";var P=y;export{P as default};
|