@nation-a/ui 0.10.8 → 0.11.0

package/dist/index.js

@@ -3539,11 +3539,42 @@ const getPortalNode = (cb) => {
 };
 const subscribe = () => () => {
 };
+function useDebounce(value, delay2) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay2);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay2]);
+  return debouncedValue;
+}
 const [TabsProvider, useTabsContext] = createContext({
   name: "TabsContext",
   hookName: "useTabsContext",
   providerName: "<TabsProvider />"
 });
+const TabContent = forwardRef((props, ref) => {
+  const [contentProps, localProps] = createSplitProps()(props, ["value"]);
+  const tabs = useTabsContext();
+  const renderStrategyProps = useRenderStrategyPropsContext();
+  const presence = usePresence({
+    ...renderStrategyProps,
+    present: useDebounce(tabs.value === props.value, 0),
+    immediate: true
+  });
+  const mergedProps = mergeProps(tabs.getContentProps(contentProps), presence.getPresenceProps(), localProps);
+  return /* @__PURE__ */ jsx(PresenceProvider, { value: presence, children: presence.unmounted ? null : /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref: composeRefs(presence.ref, ref) }) });
+});
+TabContent.displayName = "TabContent";
+const TabIndicator = forwardRef((props, ref) => {
+  const tabs = useTabsContext();
+  const mergedProps = mergeProps(tabs.getIndicatorProps(), props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
+TabIndicator.displayName = "TabIndicator";
 const TabList = forwardRef((props, ref) => {
   const tabs = useTabsContext();
   const mergedProps = mergeProps(tabs.getListProps(), props);
@@ -5943,16 +5974,16 @@ const dialogRecipe = sva({
     }
   }
 });
-const { withRootProvider: withRootProvider$1, withContext: withContext$2 } = createStyleContext(dialogRecipe);
-const Root$2 = withRootProvider$1(DialogRoot);
-const Backdrop$1 = withContext$2(DialogBackdrop, "backdrop");
-const Trigger$1 = withContext$2(DialogTrigger, "trigger");
-const Content$1 = withContext$2(DialogContent, "content");
-const Title = withContext$2(DialogTitle, "title");
-const Description$1 = withContext$2(DialogDescription, "description");
-const Positioner = withContext$2(DialogPositioner, "positioner");
-const Header = withContext$2(ark.header, "header");
-const Footer = withContext$2(
+const { withRootProvider: withRootProvider$2, withContext: withContext$3 } = createStyleContext(dialogRecipe);
+const Root$3 = withRootProvider$2(DialogRoot);
+const Backdrop$1 = withContext$3(DialogBackdrop, "backdrop");
+const Trigger$2 = withContext$3(DialogTrigger, "trigger");
+const Content$2 = withContext$3(DialogContent, "content");
+const Title = withContext$3(DialogTitle, "title");
+const Description$1 = withContext$3(DialogDescription, "description");
+const Positioner = withContext$3(DialogPositioner, "positioner");
+const Header = withContext$3(ark.header, "header");
+const Footer = withContext$3(
   ({ orientation = "horizontal", className, ...props }) => {
     return /* @__PURE__ */ jsx(
       ark.footer,
@@ -5970,13 +6001,13 @@ const Footer = withContext$2(
   },
   "footer"
 );
-const Body = withContext$2(ark.main, "body");
-const CloseTrigger = withContext$2(DialogCloseTrigger, "closeTrigger");
+const Body = withContext$3(ark.main, "body");
+const CloseTrigger = withContext$3(DialogCloseTrigger, "closeTrigger");
 const Dialog = {
-  Root: Root$2,
+  Root: Root$3,
   Backdrop: Backdrop$1,
-  Trigger: Trigger$1,
-  Content: Content$1,
+  Trigger: Trigger$2,
+  Content: Content$2,
   Title,
   Description: Description$1,
   Positioner,
@@ -9896,20 +9927,20 @@ const navigationRecipe = sva({
     }
   }
 });
-const { withRootProvider, withContext: withContext$1 } = createStyleContext(navigationRecipe);
-const Root$1 = withRootProvider(TabsRoot);
-const Trigger = withContext$1(
+const { withRootProvider: withRootProvider$1, withContext: withContext$2 } = createStyleContext(navigationRecipe);
+const Root$2 = withRootProvider$1(TabsRoot);
+const Trigger$1 = withContext$2(
   ({ icon, label, ...props }) => /* @__PURE__ */ jsxs(TabTrigger, { ...props, children: [
     icon,
     label
   ] }),
   "trigger"
 );
-const List = withContext$1(TabList, "list");
+const List$1 = withContext$2(TabList, "list");
 const Navigation = {
-  Root: Root$1,
-  Item: Trigger,
-  List
+  Root: Root$2,
+  Item: Trigger$1,
+  List: List$1
 };
 const tagRecipe = cva({
   base: {
@@ -10430,6 +10461,169 @@ const Textarea = forwardRef(
 );
 Textarea.displayName = "Textarea";
 const index = memo$1(Textarea);
+const tabsRecipe = sva({
+  className: "tabs",
+  slots: anatomy$1.keys(),
+  base: {
+    root: {
+      display: "flex",
+      width: "full",
+      flexDirection: "column"
+    },
+    list: {
+      display: "flex",
+      flexShrink: "0",
+      flexDirection: "row",
+      overflowX: "auto",
+      position: "relative",
+      scrollbarWidth: "none",
+      "&::-webkit-scrollbar": {
+        display: "none"
+      }
+    },
+    trigger: {
+      alignItems: "center",
+      color: "content.neutral.subtlest",
+      cursor: "pointer",
+      display: "inline-flex",
+      flexShrink: "0",
+      gap: "2",
+      justifyContent: "center",
+      px: "4",
+      py: "2",
+      textStyle: "label.md",
+      transition: "all",
+      transitionDuration: "normal",
+      transitionTimingFunction: "default",
+      whiteSpace: "nowrap",
+      _disabled: {
+        color: "content.neutral.disabled",
+        cursor: "not-allowed"
+      },
+      _hover: {
+        color: "content.neutral.hovered"
+      },
+      _selected: {
+        color: "content.neutral.bold"
+      }
+    },
+    content: {
+      pt: "4"
+    },
+    indicator: {
+      width: "var(--width)",
+      height: "2px",
+      borderRadius: "xs",
+      background: "content.neutral.bold",
+      bottom: "0px"
+    }
+  },
+  variants: {
+    variant: {
+      line: {
+        list: {
+          borderBottomWidth: "1px",
+          borderColor: "background.neutral.selected"
+        }
+      },
+      enclosed: {
+        list: {
+          p: "16px 0 0 16px",
+          borderRadius: "md",
+          gap: "16"
+        },
+        trigger: {
+          borderRadius: "full",
+          _selected: {
+            background: "background.neutral.selected"
+          }
+        },
+        indicator: {
+          display: "none"
+        }
+      }
+    },
+    fitted: {
+      true: {
+        root: {
+          width: "100%"
+        },
+        list: {
+          width: "100%",
+          p: 1,
+          overflowX: "visible"
+        },
+        trigger: {
+          flex: 1,
+          justifyContent: "center",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        }
+      }
+    },
+    bottomLine: {
+      true: {
+        list: {
+          borderBottomWidth: "1px",
+          borderColor: "background.neutral.selected"
+        }
+      },
+      false: {
+        list: {
+          borderBottomWidth: "0px"
+        }
+      }
+    },
+    shadow: {
+      true: {
+        list: {
+          boxShadow: "0px 8px 12px 0px var(--colors-semantic-shadow-overlay, rgba(0, 0, 0, 0.08))"
+        }
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "enclosed",
+      fitted: true,
+      css: {
+        list: {
+          background: "background.neutral.default",
+          borderRadius: "full"
+        }
+      }
+    },
+    {
+      variant: "enclosed",
+      bottomLine: true,
+      css: {
+        list: {
+          borderBottomWidth: "0px"
+        }
+      }
+    }
+  ],
+  defaultVariants: {
+    variant: "line",
+    fitted: false,
+    bottomLine: true,
+    shadow: false
+  }
+});
+const { withRootProvider, withContext: withContext$1 } = createStyleContext(tabsRecipe);
+const Root$1 = withRootProvider(TabsRoot);
+const List = withContext$1(TabList, "list");
+const Trigger = withContext$1(TabTrigger, "trigger");
+const Content$1 = withContext$1(TabContent, "content");
+const Indicator = withContext$1(TabIndicator, "indicator");
+const Tabs = Object.assign(Root$1, {
+  Root: Root$1,
+  List,
+  Trigger,
+  Content: Content$1,
+  Indicator
+});
 function definePreset(preset2) {
   return preset2;
 }
@@ -11010,6 +11204,7 @@ export {
   Portal,
   Spinner,
   Stack2 as Stack,
+  Tabs,
   index$2 as Tag,
   Text,
   index as TextArea,