periplo-ui 3.53.0 → 3.53.1
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.
|
@@ -5,15 +5,22 @@ import { Typography } from '../Typography/Typography.js';
|
|
|
5
5
|
import { cn, resolveColor } from '../../lib/utils.js';
|
|
6
6
|
|
|
7
7
|
const Tabs = TabsPrimitive.Root;
|
|
8
|
+
const TAB_SCROLLBAR_HIDDEN_CLASS = [
|
|
9
|
+
"overflow-x-auto",
|
|
10
|
+
"[scrollbar-width:none]",
|
|
11
|
+
"[-ms-overflow-style:none]",
|
|
12
|
+
"[&::-webkit-scrollbar]:hidden"
|
|
13
|
+
].join(" ");
|
|
8
14
|
const TabsList = React.forwardRef(
|
|
9
15
|
({ className, fullWidth, underlined, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
10
16
|
TabsPrimitive.List,
|
|
11
17
|
{
|
|
12
18
|
ref,
|
|
13
19
|
className: cn(
|
|
14
|
-
|
|
20
|
+
TAB_SCROLLBAR_HIDDEN_CLASS,
|
|
21
|
+
"flex",
|
|
15
22
|
fullWidth ? "w-full *:flex-1" : "gap-2",
|
|
16
|
-
underlined && "
|
|
23
|
+
underlined && "border-b border-neutral-100",
|
|
17
24
|
className
|
|
18
25
|
),
|
|
19
26
|
...props
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as TabsPrimitive from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { Typography } from '../Typography'\n\nimport { cn, resolveColor, type ColorToken } from '@/lib/utils'\n\nconst Tabs = TabsPrimitive.Root\n\ntype TabsListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {\n fullWidth?: boolean\n underlined?: boolean\n}\n\nconst TabsList = React.forwardRef<React.ComponentRef<typeof TabsPrimitive.List>, TabsListProps>(\n ({ className, fullWidth, underlined, ...props }, ref) => (\n <TabsPrimitive.List\n ref={ref}\n className={cn(\n '
|
|
1
|
+
{"version":3,"file":"Tabs.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as TabsPrimitive from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { Typography } from '../Typography'\n\nimport { cn, resolveColor, type ColorToken } from '@/lib/utils'\n\nconst Tabs = TabsPrimitive.Root\n\nconst TAB_SCROLLBAR_HIDDEN_CLASS = [\n 'overflow-x-auto',\n '[scrollbar-width:none]',\n '[-ms-overflow-style:none]',\n '[&::-webkit-scrollbar]:hidden',\n].join(' ')\n\ntype TabsListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {\n fullWidth?: boolean\n underlined?: boolean\n}\n\nconst TabsList = React.forwardRef<React.ComponentRef<typeof TabsPrimitive.List>, TabsListProps>(\n ({ className, fullWidth, underlined, ...props }, ref) => (\n <TabsPrimitive.List\n ref={ref}\n className={cn(\n TAB_SCROLLBAR_HIDDEN_CLASS,\n 'flex',\n fullWidth ? 'w-full *:flex-1' : 'gap-2',\n underlined && 'border-b border-neutral-100',\n className,\n )}\n {...props}\n />\n ),\n)\nTabsList.displayName = TabsPrimitive.List.displayName\n\ntype TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {\n color?: ColorToken | string\n}\n\nconst TabsTrigger = React.forwardRef<React.ComponentRef<typeof TabsPrimitive.Trigger>, TabsTriggerProps>(\n ({ className, children, color, style, ...props }, ref) => (\n <TabsPrimitive.Trigger\n asChild\n ref={ref}\n className={cn(\n 'focus-visible:ring-ring data-[state=active]:text-foreground relative inline-flex shrink-0 cursor-pointer items-center justify-center rounded-lg px-3 py-2 whitespace-nowrap text-neutral-400 ring-offset-1 transition-all after:absolute after:inset-x-3 after:bottom-0 after:h-[3px] after:scale-x-0 after:bg-[var(--tab-active-color)] hover:bg-neutral-50 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:after:scale-x-100 data-[state=active]:hover:bg-transparent',\n className,\n )}\n style={\n {\n '--tab-active-color': resolveColor(color),\n ...style,\n } as React.CSSProperties\n }\n {...props}\n >\n <Typography variant=\"title-md\">{children}</Typography>\n </TabsPrimitive.Trigger>\n ),\n)\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = React.forwardRef<\n React.ComponentRef<typeof TabsPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n <TabsPrimitive.Content\n ref={ref}\n className={cn(\n 'focus-visible:ring-offset ring-offset-background focus-visible:ring-ring mt-2 focus-visible:ring-2 focus-visible:outline-none',\n className,\n )}\n {...props}\n />\n))\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n"],"names":[],"mappings":";;;;;;AAOA,MAAM,OAAO,aAAA,CAAc;AAE3B,MAAM,0BAAA,GAA6B;AAAA,EACjC,iBAAA;AAAA,EACA,wBAAA;AAAA,EACA,2BAAA;AAAA,EACA;AACF,CAAA,CAAE,KAAK,GAAG,CAAA;AAOV,MAAM,WAAW,KAAA,CAAM,UAAA;AAAA,EACrB,CAAC,EAAE,SAAA,EAAW,SAAA,EAAW,YAAY,GAAG,KAAA,IAAS,GAAA,qBAC/C,GAAA;AAAA,IAAC,aAAA,CAAc,IAAA;AAAA,IAAd;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,0BAAA;AAAA,QACA,MAAA;AAAA,QACA,YAAY,iBAAA,GAAoB,OAAA;AAAA,QAChC,UAAA,IAAc,6BAAA;AAAA,QACd;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA;AAGV;AACA,QAAA,CAAS,WAAA,GAAc,cAAc,IAAA,CAAK,WAAA;AAM1C,MAAM,cAAc,KAAA,CAAM,UAAA;AAAA,EACxB,CAAC,EAAE,SAAA,EAAW,QAAA,EAAU,OAAO,KAAA,EAAO,GAAG,KAAA,EAAM,EAAG,GAAA,qBAChD,GAAA;AAAA,IAAC,aAAA,CAAc,OAAA;AAAA,IAAd;AAAA,MACC,OAAA,EAAO,IAAA;AAAA,MACP,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,0iBAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,KAAA,EACE;AAAA,QACE,oBAAA,EAAsB,aAAa,KAAK,CAAA;AAAA,QACxC,GAAG;AAAA,OACL;AAAA,MAED,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,UAAA,EAAY,QAAA,EAAS;AAAA;AAAA;AAG/C;AACA,WAAA,CAAY,WAAA,GAAc,cAAc,OAAA,CAAQ,WAAA;AAEhD,MAAM,WAAA,GAAc,MAAM,UAAA,CAGxB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC1B,GAAA;AAAA,EAAC,aAAA,CAAc,OAAA;AAAA,EAAd;AAAA,IACC,GAAA;AAAA,IACA,SAAA,EAAW,EAAA;AAAA,MACT,+HAAA;AAAA,MACA;AAAA,KACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AACD,WAAA,CAAY,WAAA,GAAc,cAAc,OAAA,CAAQ,WAAA;;;;"}
|