@krrli/cm-designsystem 1.34.3 → 1.34.5

package/dist/cm-designsystem.css

@@ -604,6 +604,10 @@
     width: auto;
   }
 
+  .w-fit {
+    width: fit-content;
+  }
+
   .w-full {
     width: 100%;
   }

package/dist/components/tabs/Tabs.d.ts

@@ -1,6 +1,5 @@
 import { default as React } from 'react';
 import { VariantProps } from 'tailwind-variants';
-import { TabItemProps } from './TabItem';
 declare const tabStyles: import('tailwind-variants').TVReturnType<{
     selected: {
         false: {
@@ -54,15 +53,11 @@ declare const tabStyles: import('tailwind-variants').TVReturnType<{
     trigger: string[];
 }, undefined, unknown, unknown, undefined>>;
 type TabVariants = VariantProps<typeof tabStyles>;
-export interface TabLabelProps {
-    value: string;
-    label: string;
-}
 export interface TabProps extends TabVariants {
     value: string;
     onChange?: (value: string) => void;
-    children: React.ReactElement<TabItemProps>[];
+    children: React.ReactNode;
 }
-export declare const Tabs: (props: TabProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tabs: ({ value, onChange, children, ...variants }: TabProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Tabs.d.ts.map

package/dist/components/tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAE9C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA2Cb,CAAC;AAEH,KAAK,WAAW,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC;AAElD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,QAAS,SAAQ,WAAW;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC;CAC9C;AAED,eAAO,MAAM,IAAI,GAAI,OAAO,QAAQ,4CAsCnC,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAI1D,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA6Cb,CAAC;AAEH,KAAK,WAAW,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC;AAElD,MAAM,WAAW,QAAS,SAAQ,WAAW;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,IAAI,GAAI,4CAA4C,QAAQ,4CA+BxE,CAAC"}

package/dist/components/tabs/Tabs.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import * as RadixTabs from "@radix-ui/react-tabs";
 import React from "react";
@@ -5,7 +6,15 @@ import { tv } from "tailwind-variants";
 import { Label } from "../typography/Label.js";
 const tabStyles = tv({
   slots: {
-    list: ["bg-slate-200", "rounded-lg", "p-1", "flex", "gap-2", "group"],
+    list: [
+      "bg-slate-200",
+      "rounded-lg",
+      "p-1",
+      "flex",
+      "gap-2",
+      "group",
+      "w-fit"
+    ],
     trigger: ["pt-2", "pb-2", "pr-3", "pl-3", "rounded-md"]
   },
   variants: {
@@ -27,54 +36,40 @@ const tabStyles = tv({
     {
       selected: true,
       effect: "first",
-      class: {
-        trigger: ["group-hover:pr-6"]
-      }
+      class: { trigger: ["group-hover:pr-6"] }
     },
     {
       selected: true,
       effect: "middle",
-      class: {
-        trigger: ["group-hover:pr-6", "group-hover:pl-6"]
-      }
+      class: { trigger: ["group-hover:pr-6", "group-hover:pl-6"] }
     },
     {
       selected: true,
       effect: "last",
-      class: {
-        trigger: ["group-hover:pl-6"]
-      }
+      class: { trigger: ["group-hover:pl-6"] }
     }
   ]
 });
-const Tabs = (props) => {
-  const { list, trigger } = tabStyles(props);
-  const [currentSelection, setSelection] = React.useState(props.value);
-  const getEffectVariant = (index, max) => index === 0 ? "first" : max === index ? "last" : "middle";
-  const onClick = (value) => {
-    setSelection(value);
-    props.onChange?.(value);
-  };
-  return /* @__PURE__ */ jsxs(RadixTabs.Root, { defaultValue: props.value, children: [
-    /* @__PURE__ */ jsx(RadixTabs.List, { className: list(), children: props.children.map((child, index) => /* @__PURE__ */ jsx(
+const Tabs = ({ value, onChange, children, ...variants }) => {
+  const { list, trigger } = tabStyles(variants);
+  const items = React.Children.toArray(children).filter(
+    (child) => React.isValidElement(child)
+  );
+  const getEffectVariant = (index, max) => index === 0 ? "first" : index === max ? "last" : "middle";
+  return /* @__PURE__ */ jsxs(RadixTabs.Root, { value, onValueChange: onChange, children: [
+    /* @__PURE__ */ jsx(RadixTabs.List, { className: list(), children: items.map((child, index) => /* @__PURE__ */ jsx(
       RadixTabs.Trigger,
       {
         value: child.props.value,
         className: trigger({
-          selected: child.props.value === currentSelection,
-          effect: getEffectVariant(index, props.children.length - 1)
+          selected: child.props.value === value,
+          effect: getEffectVariant(index, items.length - 1)
         }),
-        onClick: () => onClick(child.props.value),
         children: /* @__PURE__ */ jsx(Label, { size: "lg", children: child.props.label })
       },
       child.props.value
     )) }),
-    React.Children.map(props.children, (child, index) => {
-      if (React.isValidElement(child)) {
-        return React.cloneElement(child, { key: props.value || index });
-      }
-      return child;
-    })
+    items
   ] });
 };
 export {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@krrli/cm-designsystem",
   "repository": "https://github.com/ost-cas-fea-25-26/cm-designsystem",
-  "version": "1.34.3",
+  "version": "1.34.5",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",