@northslopetech/altitude-ui 2.0.2 → 2.0.4

package/dist/index.d.mts

@@ -130,9 +130,6 @@ declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttri
 declare const tabsVariants: (props?: ({
     variant?: "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-declare const tabsListVariants: (props?: ({
-    variant?: "default" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
 interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
     value: string;
     onValueChange: (value: string) => void;
@@ -152,4 +149,4 @@ interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const TabsContent: React.ForwardRefExoticComponent<TabsContentProps & React.RefAttributes<HTMLDivElement>>;
 
-export { Badge, type BadgeProps, Button, type ButtonProps, Checkbox, type CheckboxProps, DatePicker, type DatePickerProps, FormField, type FormFieldProps, TypedInput as Input, type InputFieldProps, type InputProps, Select, SelectContent, type SelectContentProps, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, type TextareaFieldProps, Typography, type TypographyProps, Upload, type UploadProps, badgeVariants, buttonVariants, checkboxVariants, datePickerTriggerVariants, inputVariants, selectTriggerVariants, tabsListVariants, tabsVariants, typographyVariants, uploadVariants };
+export { Badge, type BadgeProps, Button, type ButtonProps, Checkbox, type CheckboxProps, DatePicker, type DatePickerProps, FormField, type FormFieldProps, TypedInput as Input, type InputFieldProps, type InputProps, Select, SelectContent, type SelectContentProps, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, type TextareaFieldProps, Typography, type TypographyProps, Upload, type UploadProps, badgeVariants, buttonVariants, checkboxVariants, datePickerTriggerVariants, inputVariants, selectTriggerVariants, tabsVariants, typographyVariants, uploadVariants };

package/dist/index.d.ts

@@ -130,9 +130,6 @@ declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttri
 declare const tabsVariants: (props?: ({
     variant?: "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-declare const tabsListVariants: (props?: ({
-    variant?: "default" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
 interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
     value: string;
     onValueChange: (value: string) => void;
@@ -152,4 +149,4 @@ interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const TabsContent: React.ForwardRefExoticComponent<TabsContentProps & React.RefAttributes<HTMLDivElement>>;
 
-export { Badge, type BadgeProps, Button, type ButtonProps, Checkbox, type CheckboxProps, DatePicker, type DatePickerProps, FormField, type FormFieldProps, TypedInput as Input, type InputFieldProps, type InputProps, Select, SelectContent, type SelectContentProps, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, type TextareaFieldProps, Typography, type TypographyProps, Upload, type UploadProps, badgeVariants, buttonVariants, checkboxVariants, datePickerTriggerVariants, inputVariants, selectTriggerVariants, tabsListVariants, tabsVariants, typographyVariants, uploadVariants };
+export { Badge, type BadgeProps, Button, type ButtonProps, Checkbox, type CheckboxProps, DatePicker, type DatePickerProps, FormField, type FormFieldProps, TypedInput as Input, type InputFieldProps, type InputProps, Select, SelectContent, type SelectContentProps, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, type TextareaFieldProps, Typography, type TypographyProps, Upload, type UploadProps, badgeVariants, buttonVariants, checkboxVariants, datePickerTriggerVariants, inputVariants, selectTriggerVariants, tabsVariants, typographyVariants, uploadVariants };

package/dist/index.js

@@ -58,7 +58,6 @@ __export(index_exports, {
   datePickerTriggerVariants: () => datePickerTriggerVariants,
   inputVariants: () => inputVariants,
   selectTriggerVariants: () => selectTriggerVariants,
-  tabsListVariants: () => tabsListVariants,
   tabsVariants: () => tabsVariants,
   typographyVariants: () => typographyVariants,
   uploadVariants: () => uploadVariants
@@ -1270,7 +1269,7 @@ var tabsVariants = (0, import_class_variance_authority10.cva)(
   {
     variants: {
       variant: {
-        default: "border-b-2 border-subtle hover:border-interactive data-[state=active]:border-interactive data-[state=active]:text-primary disabled:border-border-subtle disabled:text-muted disabled:cursor-not-allowed"
+        default: "border-b-2 border-transparent hover:border-interactive data-[state=active]:border-interactive data-[state=active]:text-primary disabled:border-subtle disabled:text-muted disabled:cursor-not-allowed"
       }
     },
     defaultVariants: {
@@ -1278,16 +1277,6 @@ var tabsVariants = (0, import_class_variance_authority10.cva)(
     }
   }
 );
-var tabsListVariants = (0, import_class_variance_authority10.cva)("inline-flex items-center justify-center", {
-  variants: {
-    variant: {
-      default: "border-b border-secondary"
-    }
-  },
-  defaultVariants: {
-    variant: "default"
-  }
-});
 var TabsContext = React10.createContext(
   void 0
 );
@@ -1307,19 +1296,13 @@ var Tabs = React10.forwardRef((props, ref) => {
     children,
     ...restProps
   } = props;
-  const handleValueChange = React10.useCallback(
-    (newValue) => {
-      onValueChange(newValue);
-    },
-    [onValueChange]
-  );
   const contextValue = React10.useMemo(
     () => ({
       activeTab: value,
-      setActiveTab: handleValueChange,
+      setActiveTab: onValueChange,
       variant
     }),
-    [value, handleValueChange, variant]
+    [value, onValueChange, variant]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref, className: cn("w-full", className), ...restProps, children }) });
 });
@@ -1327,17 +1310,12 @@ Tabs.displayName = "Tabs";
 var TabsList = React10.forwardRef(
   (props, ref) => {
     const { className, children, ...restProps } = props;
-    const { variant } = useTabsContext();
-    const tabsListClassName = React10.useMemo(
-      () => cn(tabsListVariants({ variant }), className),
-      [variant, className]
-    );
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "div",
       {
         ref,
         role: "tablist",
-        className: tabsListClassName,
+        className: cn("inline-flex items-center justify-center", className),
         ...restProps,
         children
       }
@@ -1345,8 +1323,8 @@ var TabsList = React10.forwardRef(
   }
 );
 TabsList.displayName = "TabsList";
-var getTabTypographyStyles = () => ({
-  font: "var(--typography-label-sm-bold)"
+var getTabTypographyStyles = (isActive) => ({
+  font: isActive ? "var(--typography-label-sm-bold)" : "var(--typography-label-sm-regular)"
 });
 var TabsTrigger = React10.forwardRef(
   (props, ref) => {
@@ -1358,10 +1336,10 @@ var TabsTrigger = React10.forwardRef(
     const isActive = activeTab === value;
     const tokenStyles = React10.useMemo(
       () => ({
-        ...getTabTypographyStyles(),
+        ...getTabTypographyStyles(isActive),
         ...style
       }),
-      [style]
+      [isActive, style]
     );
     const triggerClassName = React10.useMemo(
       () => cn(tabsVariants({ variant }), className),
@@ -1399,10 +1377,6 @@ var TabsContent = React10.forwardRef(
       throw new Error("TabsContent must have a value prop");
     }
     const isActive = activeTab === value;
-    const contentClassName = React10.useMemo(
-      () => cn("mt-6", className),
-      [className]
-    );
     if (!isActive) {
       return null;
     }
@@ -1414,7 +1388,7 @@ var TabsContent = React10.forwardRef(
         id: `tabpanel-${value}`,
         "aria-labelledby": `tab-${value}`,
         tabIndex: 0,
-        className: contentClassName,
+        className: cn("mt-6", className),
         ...restProps,
         children
       }
@@ -1452,7 +1426,6 @@ TabsContent.displayName = "TabsContent";
   datePickerTriggerVariants,
   inputVariants,
   selectTriggerVariants,
-  tabsListVariants,
   tabsVariants,
   typographyVariants,
   uploadVariants

package/dist/index.mjs

@@ -1203,7 +1203,7 @@ var tabsVariants = cva10(
   {
     variants: {
       variant: {
-        default: "border-b-2 border-subtle hover:border-interactive data-[state=active]:border-interactive data-[state=active]:text-primary disabled:border-border-subtle disabled:text-muted disabled:cursor-not-allowed"
+        default: "border-b-2 border-transparent hover:border-interactive data-[state=active]:border-interactive data-[state=active]:text-primary disabled:border-subtle disabled:text-muted disabled:cursor-not-allowed"
       }
     },
     defaultVariants: {
@@ -1211,16 +1211,6 @@ var tabsVariants = cva10(
     }
   }
 );
-var tabsListVariants = cva10("inline-flex items-center justify-center", {
-  variants: {
-    variant: {
-      default: "border-b border-secondary"
-    }
-  },
-  defaultVariants: {
-    variant: "default"
-  }
-});
 var TabsContext = React10.createContext(
   void 0
 );
@@ -1240,19 +1230,13 @@ var Tabs = React10.forwardRef((props, ref) => {
     children,
     ...restProps
   } = props;
-  const handleValueChange = React10.useCallback(
-    (newValue) => {
-      onValueChange(newValue);
-    },
-    [onValueChange]
-  );
   const contextValue = React10.useMemo(
     () => ({
       activeTab: value,
-      setActiveTab: handleValueChange,
+      setActiveTab: onValueChange,
       variant
     }),
-    [value, handleValueChange, variant]
+    [value, onValueChange, variant]
   );
   return /* @__PURE__ */ jsx9(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx9("div", { ref, className: cn("w-full", className), ...restProps, children }) });
 });
@@ -1260,17 +1244,12 @@ Tabs.displayName = "Tabs";
 var TabsList = React10.forwardRef(
   (props, ref) => {
     const { className, children, ...restProps } = props;
-    const { variant } = useTabsContext();
-    const tabsListClassName = React10.useMemo(
-      () => cn(tabsListVariants({ variant }), className),
-      [variant, className]
-    );
     return /* @__PURE__ */ jsx9(
       "div",
       {
         ref,
         role: "tablist",
-        className: tabsListClassName,
+        className: cn("inline-flex items-center justify-center", className),
         ...restProps,
         children
       }
@@ -1278,8 +1257,8 @@ var TabsList = React10.forwardRef(
   }
 );
 TabsList.displayName = "TabsList";
-var getTabTypographyStyles = () => ({
-  font: "var(--typography-label-sm-bold)"
+var getTabTypographyStyles = (isActive) => ({
+  font: isActive ? "var(--typography-label-sm-bold)" : "var(--typography-label-sm-regular)"
 });
 var TabsTrigger = React10.forwardRef(
   (props, ref) => {
@@ -1291,10 +1270,10 @@ var TabsTrigger = React10.forwardRef(
     const isActive = activeTab === value;
     const tokenStyles = React10.useMemo(
       () => ({
-        ...getTabTypographyStyles(),
+        ...getTabTypographyStyles(isActive),
         ...style
       }),
-      [style]
+      [isActive, style]
     );
     const triggerClassName = React10.useMemo(
       () => cn(tabsVariants({ variant }), className),
@@ -1332,10 +1311,6 @@ var TabsContent = React10.forwardRef(
       throw new Error("TabsContent must have a value prop");
     }
     const isActive = activeTab === value;
-    const contentClassName = React10.useMemo(
-      () => cn("mt-6", className),
-      [className]
-    );
     if (!isActive) {
       return null;
     }
@@ -1347,7 +1322,7 @@ var TabsContent = React10.forwardRef(
         id: `tabpanel-${value}`,
         "aria-labelledby": `tab-${value}`,
         tabIndex: 0,
-        className: contentClassName,
+        className: cn("mt-6", className),
         ...restProps,
         children
       }
@@ -1384,7 +1359,6 @@ export {
   datePickerTriggerVariants,
   inputVariants,
   selectTriggerVariants,
-  tabsListVariants,
   tabsVariants,
   typographyVariants,
   uploadVariants

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@northslopetech/altitude-ui",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "private": false,
   "description": "React UI components for the Altitude design system",
   "author": "Northslope",