@anker-in/headless-ui 0.0.27-alpha.37 → 0.0.27-alpha.39

package/dist/esm/cpn-components/CpnProductCard/types.d.ts

@@ -0,0 +1,109 @@
+export type ProductImage = {
+    url: string;
+    altText?: string;
+    width?: number;
+    height?: number;
+};
+export type ProductPrice = {
+    value: number;
+    currencyCode?: 'USD' | 'EUR' | 'ARS' | string;
+    retailPrice?: number;
+    salePrice?: number;
+    listPrice?: number;
+    extendedSalePrice?: number;
+    extendedListPrice?: number;
+};
+export type ProductOption = {
+    __typename?: 'MultipleChoiceOption';
+    id: string;
+    displayName: string;
+    name?: string;
+    values: ProductOptionValues[];
+};
+export type ProductOptionValues = {
+    label: string;
+    hexColors?: string[];
+};
+export type SellingPlans = {
+    id: string;
+    name: string;
+    options: {
+        name: string;
+        value: string;
+    }[];
+};
+export type SellingPlanGroups = {
+    name: string;
+    sellingPlans: SellingPlans[];
+};
+export type SellingPlanAllocations = {
+    priceAdjustments: [];
+    sellingPlan: SellingPlans;
+}[];
+export type ProductVariant = {
+    barcode?: string;
+    id: string | number;
+    options: ProductOption[];
+    availableForSale?: boolean;
+    quantityAvailable: number;
+    metafields?: Record<string, any>;
+    sellingPlanAllocations?: SellingPlanAllocations;
+    price: number;
+    weight?: number;
+    name?: string;
+    image?: ProductImage;
+    requiresShipping?: boolean;
+    [key: string]: any;
+};
+export type Product = {
+    availableForSale?: boolean;
+    id: string;
+    name: string;
+    description: string;
+    descriptionHtml?: string;
+    productType?: string;
+    onlineStoreUrl?: string | null;
+    publishedAt?: string;
+    title?: string;
+    slug?: string;
+    handle?: string;
+    path?: string;
+    images: ProductImage[];
+    variants: ProductVariant[];
+    price: ProductPrice;
+    listPrice?: number;
+    options: ProductOption[];
+    seo?: any;
+    tags?: string[];
+    metafields?: {
+        [key: string]: any;
+    };
+    vendor: string;
+    totalInventory: number;
+    requiresSellingPlan: boolean;
+    sellingPlanGroups: SellingPlanGroups[];
+};
+type Cns = {
+    container?: string;
+    box?: string;
+    item?: string;
+    activeItem?: string;
+};
+type ContentType = 'tag' | 'image' | 'title' | 'subtitle' | 'price' | 'buttons' | 'code';
+interface Content {
+    type: ContentType;
+    text?: string;
+    image?: string;
+    imageMob?: string;
+    url?: string;
+    buttons?: {
+        text: string;
+        variant?: "primary" | "secondary";
+        onClick?: () => void;
+    }[];
+}
+export type ProductCardProps = {
+    content?: Content[];
+    cns?: Cns;
+};
+export {};

package/dist/esm/cpn-components/CpnProductCard/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/esm/cpn-components/CpnProductCard/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/esm/cpn-components/CpnTitle/index.d.ts

@@ -0,0 +1,3 @@
+import type { TitleProps } from './types.js';
+declare const CpnTitle: (props: TitleProps) => import("react/jsx-runtime").JSX.Element;
+export default CpnTitle;

package/dist/esm/cpn-components/CpnTitle/index.js

@@ -0,0 +1,2 @@
+import{jsx as c,jsxs as a}from"react/jsx-runtime";import{cn as e}from"../../helpers/utils.js";import{Picture as n,Text as s}from"../../components/index.js";const p=l=>{const{html:r,icon_l:o,icon_r:i,cns:t}=l;return a("div",{className:e("cpn-title-container flex items-start justify-center gap-5 text-center",t?.container),children:[o&&c(n,{source:o,className:e("cpn-title-icon-l",t?.icon_l)}),c(s,{html:r,className:"cpn-title-text laptop:text-[40px] text-[24px] font-bold"}),i&&c(n,{source:i,className:e("cpn-title-icon-r",t?.icon_r)})]})};var f=p;export{f as default};
+//# sourceMappingURL=index.js.map

package/dist/esm/cpn-components/CpnTitle/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/cpn-components/CpnTitle/index.tsx"],
+  "sourcesContent": ["import type { TitleProps } from './types.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Picture, Text } from '../../components/index.js'\n\nconst CpnTitle = (props: TitleProps) => {\n  const { html, icon_l, icon_r, cns } = props\n\n  return (\n    <div className={cn('cpn-title-container flex items-start justify-center gap-5 text-center', cns?.container)}>\n      {icon_l && <Picture source={icon_l} className={cn('cpn-title-icon-l', cns?.icon_l)} />}\n      <Text html={html} className=\"cpn-title-text laptop:text-[40px] text-[24px] font-bold\" />\n      {icon_r && <Picture source={icon_r} className={cn('cpn-title-icon-r', cns?.icon_r)} />}\n    </div>\n  )\n}\n\nexport default CpnTitle\n"],
+  "mappings": "AAQI,OACa,OAAAA,EADb,QAAAC,MAAA,oBAPJ,OAAS,MAAAC,MAAU,yBACnB,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAE9B,MAAMC,EAAYC,GAAsB,CACtC,KAAM,CAAE,KAAAC,EAAM,OAAAC,EAAQ,OAAAC,EAAQ,IAAAC,CAAI,EAAIJ,EAEtC,OACEL,EAAC,OAAI,UAAWC,EAAG,wEAAyEQ,GAAK,SAAS,EACvG,UAAAF,GAAUR,EAACG,EAAA,CAAQ,OAAQK,EAAQ,UAAWN,EAAG,mBAAoBQ,GAAK,MAAM,EAAG,EACpFV,EAACI,EAAA,CAAK,KAAMG,EAAM,UAAU,0DAA0D,EACrFE,GAAUT,EAACG,EAAA,CAAQ,OAAQM,EAAQ,UAAWP,EAAG,mBAAoBQ,GAAK,MAAM,EAAG,GACtF,CAEJ,EAEA,IAAOC,EAAQN",
+  "names": ["jsx", "jsxs", "cn", "Picture", "Text", "CpnTitle", "props", "html", "icon_l", "icon_r", "cns", "CpnTitle_default"]
+}

package/dist/esm/cpn-components/CpnTitle/types.d.ts

@@ -0,0 +1,10 @@
+export type TitleProps = {
+    html: string;
+    icon_l?: string;
+    icon_r?: string;
+    cns?: {
+        container?: string;
+        icon_l?: string;
+        icon_r?: string;
+    };
+};

package/dist/esm/cpn-components/CpnTitle/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/esm/cpn-components/CpnTitle/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/esm/cpn-components/index.d.ts

@@ -0,0 +1,5 @@
+export { default as CpnBanner } from './CpnBanner/index.js';
+export { default as CpnCountDown } from './CpnCountDown/index.js';
+export { default as CpnNavigation } from './CpnNavigation/index.js';
+export { default as CpnProductCard } from './CpnProductCard/index.js';
+export { default as CpnTitle } from './CpnTitle/index.js';

package/dist/esm/cpn-components/index.js

@@ -0,0 +1,2 @@
+import{default as t}from"./CpnBanner/index.js";import{default as e}from"./CpnCountDown/index.js";import{default as n}from"./CpnNavigation/index.js";import{default as d}from"./CpnProductCard/index.js";import{default as C}from"./CpnTitle/index.js";export{t as CpnBanner,e as CpnCountDown,n as CpnNavigation,d as CpnProductCard,C as CpnTitle};
+//# sourceMappingURL=index.js.map

package/dist/esm/cpn-components/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/cpn-components/index.ts"],
+  "sourcesContent": ["export { default as CpnBanner } from './CpnBanner/index.js'\nexport { default as CpnCountDown } from './CpnCountDown/index.js'\nexport { default as CpnNavigation } from './CpnNavigation/index.js'\nexport { default as CpnProductCard } from './CpnProductCard/index.js'\nexport { default as CpnTitle } from './CpnTitle/index.js'\n"],
+  "mappings": "AAAA,OAAoB,WAAXA,MAA4B,uBACrC,OAAoB,WAAXA,MAA+B,0BACxC,OAAoB,WAAXA,MAAgC,2BACzC,OAAoB,WAAXA,MAAiC,4BAC1C,OAAoB,WAAXA,MAA2B",
+  "names": ["default"]
+}

package/dist/esm/hooks/useCountDown.d.ts

@@ -0,0 +1,10 @@
+interface Time {
+    days: string;
+    hours: string;
+    minutes: string;
+    seconds: string;
+}
+declare const useCountDown: ({ endTime }: {
+    endTime?: string;
+}) => Time;
+export default useCountDown;

package/dist/esm/hooks/useCountDown.js

@@ -0,0 +1,2 @@
+import{useEffect as g,useState as f}from"react";const l=({endTime:s=""})=>{const[o,r]=f({days:"00",hours:"00",minutes:"00",seconds:"00"});return g(()=>{const n=e=>(e<0?0:Math.floor(e)).toString().padStart(2,"0"),c=new Date(s).getTime(),i=setInterval(()=>{const e=new Date().getTime(),t=c-e,u=n(t/(1e3*60*60*24)),a=n(t%(1e3*60*60*24)/(1e3*60*60)),m=n(t%(1e3*60*60)/(1e3*60)),d=n(t%(1e3*60)/1e3);r({days:u,hours:a,minutes:m,seconds:d})},1e3);return()=>clearInterval(i)},[s]),o};var D=l;export{D as default};
+//# sourceMappingURL=useCountDown.js.map

package/dist/esm/hooks/useCountDown.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/useCountDown.ts"],
+  "sourcesContent": ["import { useEffect, useState } from 'react'\n\ninterface Time {\n  days: string\n  hours: string\n  minutes: string\n  seconds: string\n}\n\nconst useCountDown = ({ endTime = '' }: { endTime?: string }) => {\n  const [time, setTime] = useState<Time>({\n    days: '00',\n    hours: '00',\n    minutes: '00',\n    seconds: '00',\n  })\n\n  useEffect(() => {\n    const format = (date: number) => {\n      const number = date < 0 ? 0 : Math.floor(date)\n      return number.toString().padStart(2, '0')\n    }\n\n    const countDownDate = new Date(endTime).getTime()\n\n    const timer = setInterval(() => {\n      const now = new Date().getTime()\n      const distance = countDownDate - now\n\n      const days = format(distance / (1000 * 60 * 60 * 24))\n      const hours = format((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))\n      const minutes = format((distance % (1000 * 60 * 60)) / (1000 * 60))\n      const seconds = format((distance % (1000 * 60)) / 1000)\n\n      setTime({\n        days,\n        hours,\n        minutes,\n        seconds,\n      })\n    }, 1000)\n\n    return () => clearInterval(timer)\n  }, [endTime])\n\n  return time\n}\n\nexport default useCountDown\n"],
+  "mappings": "AAAA,OAAS,aAAAA,EAAW,YAAAC,MAAgB,QASpC,MAAMC,EAAe,CAAC,CAAE,QAAAC,EAAU,EAAG,IAA4B,CAC/D,KAAM,CAACC,EAAMC,CAAO,EAAIJ,EAAe,CACrC,KAAM,KACN,MAAO,KACP,QAAS,KACT,QAAS,IACX,CAAC,EAED,OAAAD,EAAU,IAAM,CACd,MAAMM,EAAUC,IACCA,EAAO,EAAI,EAAI,KAAK,MAAMA,CAAI,GAC/B,SAAS,EAAE,SAAS,EAAG,GAAG,EAGpCC,EAAgB,IAAI,KAAKL,CAAO,EAAE,QAAQ,EAE1CM,EAAQ,YAAY,IAAM,CAC9B,MAAMC,EAAM,IAAI,KAAK,EAAE,QAAQ,EACzBC,EAAWH,EAAgBE,EAE3BE,EAAON,EAAOK,GAAY,IAAO,GAAK,GAAK,GAAG,EAC9CE,EAAQP,EAAQK,GAAY,IAAO,GAAK,GAAK,KAAQ,IAAO,GAAK,GAAG,EACpEG,EAAUR,EAAQK,GAAY,IAAO,GAAK,KAAQ,IAAO,GAAG,EAC5DI,EAAUT,EAAQK,GAAY,IAAO,IAAO,GAAI,EAEtDN,EAAQ,CACN,KAAAO,EACA,MAAAC,EACA,QAAAC,EACA,QAAAC,CACF,CAAC,CACH,EAAG,GAAI,EAEP,MAAO,IAAM,cAAcN,CAAK,CAClC,EAAG,CAACN,CAAO,CAAC,EAELC,CACT,EAEA,IAAOY,EAAQd",
+  "names": ["useEffect", "useState", "useCountDown", "endTime", "time", "setTime", "format", "date", "countDownDate", "timer", "now", "distance", "days", "hours", "minutes", "seconds", "useCountDown_default"]
+}

package/dist/esm/stories/category.stories.js

@@ -1,2 +1,2 @@
-import t from"../biz-components/Category/index.js";const o={title:"Biz-Components/Category",component:t,parameters:{layout:"fullscreen"},tags:["autodocs"]};var r=o;const e=[{title:"Anker Prime 27",img:{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554"}},{title:"Anker Prime",img:{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554"}},{title:"Anker Prime",img:{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554"}},{title:"Anker Prime",img:{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554"}},{title:"Anker Prime",img:{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554"}}],c={args:{data:{products:e},className:"p-4"}},a={args:{data:{shape:"round",products:e},className:"p-4"}};export{c as Default,a as Round,r as default};
+import t from"../biz-components/Category/index.js";const o={title:"Biz-Components/Category",component:t,parameters:{layout:"fullscreen"},tags:["autodocs"]};var s=o;const e=[{name:"Anker Prime 27",image:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554"},{name:"Anker Prime 27",image:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554"},{name:"Anker Prime 27",image:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554"}],r={args:{data:{products:e},className:"p-4"}},c={args:{data:{shape:"round",products:e},className:"p-4"}};export{r as Default,c as Round,s as default};
 //# sourceMappingURL=category.stories.js.map

package/dist/esm/stories/category.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/stories/category.stories.tsx"],
-  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport Category from '../biz-components/Category/index.js'\n\nconst meta = {\n  title: 'Biz-Components/Category',\n  component: Category,\n  parameters: {\n    layout: 'fullscreen',\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof Category>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nconst mock = [\n  {\n    title: 'Anker Prime 27',\n    img: {\n      url: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',\n    },\n  },\n  {\n    title: 'Anker Prime',\n    img: {\n      url: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',\n    },\n  },\n  {\n    title: 'Anker Prime',\n    img: {\n      url: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',\n    },\n  },\n  {\n    title: 'Anker Prime',\n    img: {\n      url: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',\n    },\n  },\n  {\n    title: 'Anker Prime',\n    img: {\n      url: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',\n    },\n  },\n]\n\nexport const Default: Story = {\n  args: {\n    data: {\n      products: mock,\n    },\n    className: 'p-4',\n  },\n}\n\nexport const Round: Story = {\n  args: {\n    data: {\n      shape: 'round',\n      products: mock,\n    },\n    className: 'p-4',\n  },\n}\n"],
-  "mappings": "AACA,OAAOA,MAAc,sCAErB,MAAMC,EAAO,CACX,MAAO,0BACP,UAAWD,EACX,WAAY,CACV,OAAQ,YACV,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOE,EAAQD,EAGf,MAAME,EAAO,CACX,CACE,MAAO,iBACP,IAAK,CACH,IAAK,8HACP,CACF,EACA,CACE,MAAO,cACP,IAAK,CACH,IAAK,8HACP,CACF,EACA,CACE,MAAO,cACP,IAAK,CACH,IAAK,8HACP,CACF,EACA,CACE,MAAO,cACP,IAAK,CACH,IAAK,8HACP,CACF,EACA,CACE,MAAO,cACP,IAAK,CACH,IAAK,8HACP,CACF,CACF,EAEaC,EAAiB,CAC5B,KAAM,CACJ,KAAM,CACJ,SAAUD,CACZ,EACA,UAAW,KACb,CACF,EAEaE,EAAe,CAC1B,KAAM,CACJ,KAAM,CACJ,MAAO,QACP,SAAUF,CACZ,EACA,UAAW,KACb,CACF",
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport Category from '../biz-components/Category/index.js'\n\nconst meta = {\n  title: 'Biz-Components/Category',\n  component: Category,\n  parameters: {\n    layout: 'fullscreen',\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof Category>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nconst mock = [\n  {\n    name: 'Anker Prime 27',\n    image:\n      'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',\n  },\n  {\n    name: 'Anker Prime 27',\n    image:\n      'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',\n  },\n  {\n    name: 'Anker Prime 27',\n    image:\n      'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',\n  },\n]\n\nexport const Default: Story = {\n  args: {\n    data: {\n      products: mock,\n    },\n    className: 'p-4',\n  },\n}\n\nexport const Round: Story = {\n  args: {\n    data: {\n      shape: 'round',\n      products: mock,\n    },\n    className: 'p-4',\n  },\n}\n"],
+  "mappings": "AACA,OAAOA,MAAc,sCAErB,MAAMC,EAAO,CACX,MAAO,0BACP,UAAWD,EACX,WAAY,CACV,OAAQ,YACV,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOE,EAAQD,EAGf,MAAME,EAAO,CACX,CACE,KAAM,iBACN,MACE,8HACJ,EACA,CACE,KAAM,iBACN,MACE,8HACJ,EACA,CACE,KAAM,iBACN,MACE,8HACJ,CACF,EAEaC,EAAiB,CAC5B,KAAM,CACJ,KAAM,CACJ,SAAUD,CACZ,EACA,UAAW,KACb,CACF,EAEaE,EAAe,CAC1B,KAAM,CACJ,KAAM,CACJ,MAAO,QACP,SAAUF,CACZ,EACA,UAAW,KACb,CACF",
   "names": ["Category", "meta", "category_stories_default", "mock", "Default", "Round"]
 }

package/dist/esm/stories/cpnBanner.stories.d.ts

@@ -0,0 +1,14 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: (props: import("../cpn-components/CpnBanner/types.js").BannerProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        viewport: {
+            defaultViewport: string;
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/esm/stories/cpnBanner.stories.js

@@ -0,0 +1,2 @@
+import{CpnBanner as t}from"../cpn-components/index.js";const e={title:"Cpn-Components/CpnBanner",component:t,parameters:{viewport:{defaultViewport:"tablet"}},tags:["autodocs"]};var n=e;const s={args:{image:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/landing_banner.jpg?v=1742379112",imageMob:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/landing_banner_mob.png?v=1742458121",content:[{type:"subheading",text:"Kick Off Summer with Exclusive Savings"},{type:"title",text:"Kick Off Summer with Exclusive Savings"},{type:"subtitle",text:"Get Early Access to Amazing Offers"},{type:"countdown",endTime:"2025-06-30T00:00:00",copy:{days:"Days",hours:"HRS",minutes:"MINS",seconds:"SEC"}},{type:"button",text:"Check Out Now"}],cns:{box:"",content:"min-md:max-w-[28vw] min-xl:max-w-[25vw] mx-auto",title:"",subtitle:"",button:"",countdown:{item:"bg-[#042637]",copy:"opacity-75"}}}};export{s as Default,n as default};
+//# sourceMappingURL=cpnBanner.stories.js.map

package/dist/esm/stories/cpnBanner.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/stories/cpnBanner.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { CpnBanner } from '../cpn-components/index.js'\n\nconst meta = {\n  title: 'Cpn-Components/CpnBanner',\n  component: CpnBanner,\n  parameters: {\n    // layout: 'fullscreen',\n    viewport: { defaultViewport: 'tablet' },\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof CpnBanner>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n  args: {\n    image: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/landing_banner.jpg?v=1742379112',\n    imageMob: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/landing_banner_mob.png?v=1742458121',\n    content: [\n      {\n        type: 'subheading',\n        text: 'Kick Off Summer with Exclusive Savings',\n      },\n      {\n        type: 'title',\n        text: 'Kick Off Summer with Exclusive Savings',\n      },\n      {\n        type: 'subtitle',\n        text: 'Get Early Access to Amazing Offers',\n      },\n      {\n        type: 'countdown',\n        endTime: '2025-06-30T00:00:00',\n        copy: {\n          days: 'Days',\n          hours: 'HRS',\n          minutes: 'MINS',\n          seconds: 'SEC',\n        },\n      },\n      {\n        type: 'button',\n        text: 'Check Out Now',\n      },\n    ],\n    cns: {\n      box: '',\n      content: 'min-md:max-w-[28vw] min-xl:max-w-[25vw] mx-auto',\n      title: '',\n      subtitle: '',\n      button: '',\n      countdown: {\n        item: 'bg-[#042637]',\n        copy: 'opacity-75',\n      },\n    },\n  },\n}\n"],
+  "mappings": "AAEA,OAAS,aAAAA,MAAiB,6BAE1B,MAAMC,EAAO,CACX,MAAO,2BACP,UAAWD,EACX,WAAY,CAEV,SAAU,CAAE,gBAAiB,QAAS,CACxC,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOE,EAAQD,EAIR,MAAME,EAAiB,CAC5B,KAAM,CACJ,MAAO,yFACP,SAAU,6FACV,QAAS,CACP,CACE,KAAM,aACN,KAAM,wCACR,EACA,CACE,KAAM,QACN,KAAM,wCACR,EACA,CACE,KAAM,WACN,KAAM,oCACR,EACA,CACE,KAAM,YACN,QAAS,sBACT,KAAM,CACJ,KAAM,OACN,MAAO,MACP,QAAS,OACT,QAAS,KACX,CACF,EACA,CACE,KAAM,SACN,KAAM,eACR,CACF,EACA,IAAK,CACH,IAAK,GACL,QAAS,kDACT,MAAO,GACP,SAAU,GACV,OAAQ,GACR,UAAW,CACT,KAAM,eACN,KAAM,YACR,CACF,CACF,CACF",
+  "names": ["CpnBanner", "meta", "cpnBanner_stories_default", "Default"]
+}

package/dist/esm/stories/cpnCountdown.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: (props: import("../cpn-components/CpnCountDown/types.js").CountDownProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/esm/stories/cpnCountdown.stories.js

@@ -0,0 +1,2 @@
+import{CpnCountDown as t}from"../cpn-components/index.js";const o={title:"Cpn-Components/CpnCountDown",component:t,parameters:{layout:"centered"},tags:["autodocs"]};var n=o;const r={args:{endTime:"2025-06-30T00:00:00"}};export{r as Default,n as default};
+//# sourceMappingURL=cpnCountdown.stories.js.map

package/dist/esm/stories/cpnCountdown.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/stories/cpnCountdown.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { CpnCountDown } from '../cpn-components/index.js'\n\nconst meta = {\n  title: 'Cpn-Components/CpnCountDown',\n  component: CpnCountDown,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof CpnCountDown>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n  args: {\n    endTime: '2025-06-30T00:00:00',\n  },\n}\n"],
+  "mappings": "AAEA,OAAS,gBAAAA,MAAoB,6BAE7B,MAAMC,EAAO,CACX,MAAO,8BACP,UAAWD,EACX,WAAY,CACV,OAAQ,UACV,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOE,EAAQD,EAIR,MAAME,EAAiB,CAC5B,KAAM,CACJ,QAAS,qBACX,CACF",
+  "names": ["CpnCountDown", "meta", "cpnCountdown_stories_default", "Default"]
+}

package/dist/esm/stories/cpnNavigation.stories.d.ts

@@ -0,0 +1,14 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: (props: import("../cpn-components/CpnNavigation/types.js").NavigationProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        viewport: {
+            defaultViewport: string;
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/esm/stories/cpnNavigation.stories.js

@@ -0,0 +1,2 @@
+import{CpnNavigation as t}from"../cpn-components/index.js";const e={title:"Cpn-Components/CpnNavigation",component:t,parameters:{viewport:{defaultViewport:"tablet"}},tags:["autodocs"]};var a=e;const r={args:{lists:[{label:"Benefits",anchor:"benefits"},{label:"Super Sale",anchor:"featureProducts"},{label:"Free Gifts",anchor:"giftWithPurchase"},{label:"Group Buy",anchor:"groupBuying"},{label:"Super Gifts",anchor:"superGifts"}],cns:{container:"top-[46px]"}}};export{r as Default,a as default};
+//# sourceMappingURL=cpnNavigation.stories.js.map

package/dist/esm/stories/cpnNavigation.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/stories/cpnNavigation.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { CpnNavigation } from '../cpn-components/index.js'\n\nconst meta = {\n  title: 'Cpn-Components/CpnNavigation',\n  component: CpnNavigation,\n  parameters: {\n    // layout: 'fullscreen',\n    viewport: { defaultViewport: 'tablet' },\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof CpnNavigation>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n  args: {\n    lists: [\n      { label: 'Benefits', anchor: 'benefits' },\n      { label: 'Super Sale', anchor: 'featureProducts' },\n      { label: 'Free Gifts', anchor: 'giftWithPurchase' },\n      { label: 'Group Buy', anchor: 'groupBuying' },\n      { label: 'Super Gifts', anchor: 'superGifts' },\n    ],\n    cns: {\n      container: 'top-[46px]',\n    },\n  },\n}\n"],
+  "mappings": "AAEA,OAAS,iBAAAA,MAAqB,6BAE9B,MAAMC,EAAO,CACX,MAAO,+BACP,UAAWD,EACX,WAAY,CAEV,SAAU,CAAE,gBAAiB,QAAS,CACxC,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOE,EAAQD,EAIR,MAAME,EAAiB,CAC5B,KAAM,CACJ,MAAO,CACL,CAAE,MAAO,WAAY,OAAQ,UAAW,EACxC,CAAE,MAAO,aAAc,OAAQ,iBAAkB,EACjD,CAAE,MAAO,aAAc,OAAQ,kBAAmB,EAClD,CAAE,MAAO,YAAa,OAAQ,aAAc,EAC5C,CAAE,MAAO,cAAe,OAAQ,YAAa,CAC/C,EACA,IAAK,CACH,UAAW,YACb,CACF,CACF",
+  "names": ["CpnNavigation", "meta", "cpnNavigation_stories_default", "Default"]
+}

package/dist/esm/stories/cpnProductcard.stories.d.ts

@@ -0,0 +1,14 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: (props: import("../cpn-components/CpnProductCard/types.js").ProductCardProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        viewport: {
+            defaultViewport: string;
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/esm/stories/cpnProductcard.stories.js

@@ -0,0 +1,2 @@
+import{CpnProductCard as t}from"../cpn-components/index.js";const e={title:"Cpn-Components/CpnProductCard",component:t,parameters:{viewport:{defaultViewport:"tablet"}},tags:["autodocs"]};var r=e;const a={args:{content:[{type:"image",image:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/s1pro_fce43284-98a8-4454-9133-51924e9659d9.png?v=1745309083"},{type:"title",text:"eufy Robot Vacuum Omni S1 Pro"},{type:"price",text:"1,999.99"},{type:"buttons",buttons:[{text:"Add to Cart",variant:"secondary"},{text:"Buy Now"}]}],cns:{}}};export{a as Default,r as default};
+//# sourceMappingURL=cpnProductcard.stories.js.map

package/dist/esm/stories/cpnProductcard.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/stories/cpnProductcard.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { CpnProductCard } from '../cpn-components/index.js'\n\nconst meta = {\n  title: 'Cpn-Components/CpnProductCard',\n  component: CpnProductCard,\n  parameters: {\n    // layout: 'fullscreen',\n    viewport: { defaultViewport: 'tablet' },\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof CpnProductCard>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n  args: {\n    content: [\n      {\n        type: 'image',\n        image:\n          'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/s1pro_fce43284-98a8-4454-9133-51924e9659d9.png?v=1745309083',\n      },\n      { type: 'title', text: 'eufy Robot Vacuum Omni S1 Pro' },\n      { type: 'price', text: '1,999.99' },\n      {\n        type: 'buttons',\n        buttons: [\n          {\n            text: 'Add to Cart',\n            variant: 'secondary',\n          },\n          {\n            text: 'Buy Now',\n          },\n        ],\n      },\n    ],\n    cns: {},\n  },\n}\n"],
+  "mappings": "AAEA,OAAS,kBAAAA,MAAsB,6BAE/B,MAAMC,EAAO,CACX,MAAO,gCACP,UAAWD,EACX,WAAY,CAEV,SAAU,CAAE,gBAAiB,QAAS,CACxC,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOE,EAAQD,EAIR,MAAME,EAAiB,CAC5B,KAAM,CACJ,QAAS,CACP,CACE,KAAM,QACN,MACE,oHACJ,EACA,CAAE,KAAM,QAAS,KAAM,+BAAgC,EACvD,CAAE,KAAM,QAAS,KAAM,UAAW,EAClC,CACE,KAAM,UACN,QAAS,CACP,CACE,KAAM,cACN,QAAS,WACX,EACA,CACE,KAAM,SACR,CACF,CACF,CACF,EACA,IAAK,CAAC,CACR,CACF",
+  "names": ["CpnProductCard", "meta", "cpnProductcard_stories_default", "Default"]
+}

package/dist/esm/stories/cpnTitle.stories.d.ts

@@ -0,0 +1,14 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: (props: import("../cpn-components/CpnTitle/types.js").TitleProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        viewport: {
+            defaultViewport: string;
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/esm/stories/cpnTitle.stories.js

@@ -0,0 +1,2 @@
+import{CpnTitle as t}from"../cpn-components/index.js";const e={title:"Cpn-Components/CpnTitle",component:t,parameters:{viewport:{defaultViewport:"tablet"}},tags:["autodocs"]};var s=e;const p={args:{html:"Exclusive Holiday Benefits",icon_l:"https://cdn.shopify.com/s/files/1/0887/1798/4111/files/E.png?v=1745373442",icon_r:"https://cdn.shopify.com/s/files/1/0887/1798/4111/files/1_55d7df96-f1ed-440a-ae3f-f02544b1d508.png?v=1745373442",cns:{}}};export{p as Default,s as default};
+//# sourceMappingURL=cpnTitle.stories.js.map

package/dist/esm/stories/cpnTitle.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/stories/cpnTitle.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { CpnTitle } from '../cpn-components/index.js'\n\nconst meta = {\n  title: 'Cpn-Components/CpnTitle',\n  component: CpnTitle,\n  parameters: {\n    // layout: 'fullscreen',\n    viewport: { defaultViewport: 'tablet' },\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof CpnTitle>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n  args: {\n    html: 'Exclusive Holiday Benefits',\n    icon_l: 'https://cdn.shopify.com/s/files/1/0887/1798/4111/files/E.png?v=1745373442',\n    icon_r:\n      'https://cdn.shopify.com/s/files/1/0887/1798/4111/files/1_55d7df96-f1ed-440a-ae3f-f02544b1d508.png?v=1745373442',\n    cns: {},\n  },\n}\n"],
+  "mappings": "AAEA,OAAS,YAAAA,MAAgB,6BAEzB,MAAMC,EAAO,CACX,MAAO,0BACP,UAAWD,EACX,WAAY,CAEV,SAAU,CAAE,gBAAiB,QAAS,CACxC,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOE,EAAQD,EAIR,MAAME,EAAiB,CAC5B,KAAM,CACJ,KAAM,6BACN,OAAQ,4EACR,OACE,iHACF,IAAK,CAAC,CACR,CACF",
+  "names": ["CpnTitle", "meta", "cpnTitle_stories_default", "Default"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anker-in/headless-ui",
-  "version": "0.0.27-alpha.37",
+  "version": "0.0.27-alpha.39",
   "type": "commonjs",
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",
@@ -27,6 +27,16 @@
         "default": "./dist/esm/biz-components/index.js"
       }
     },
+    "./cpn": {
+      "require": {
+        "types": "./dist/cjs/cpn-components/index.d.ts",
+        "default": "./dist/cjs/cpn-components/index.js"
+      },
+      "import": {
+        "types": "./dist/esm/cpn-components/index.d.ts",
+        "default": "./dist/esm/cpn-components/index.js"
+      }
+    },
     "./tailwind.config": {
       "require": "./tailwind.config.ts",
       "import": "./tailwind.config.ts"