@nation-a/ui 0.16.6 → 0.16.8

package/dist/index.js

@@ -7668,6 +7668,12 @@ const SelectContent = forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref: composeRefs(presence.ref, ref) });
 });
 SelectContent.displayName = "SelectContent";
+const SelectControl = forwardRef((props, ref) => {
+  const select = useSelectContext();
+  const mergedProps = mergeProps(select.getControlProps(), props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
+SelectControl.displayName = "SelectControl";
 const [SelectItemProvider, useSelectItemContext] = createContext({
   name: "SelectItemContext",
   hookName: "useSelectItemContext",
@@ -7692,6 +7698,16 @@ const SelectLabel = forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref });
 });
 SelectLabel.displayName = "SelectLabel";
+const SelectPositioner = forwardRef((props, ref) => {
+  const select = useSelectContext();
+  const mergedProps = mergeProps(select.getPositionerProps(), props);
+  const presence = usePresenceContext();
+  if (presence.unmounted) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
+SelectPositioner.displayName = "SelectPositioner";
 var anatomy$2 = createAnatomy("select").parts(
   "label",
   "positioner",
@@ -10197,7 +10213,7 @@ const Trigger$3 = withContext$7(DialogTrigger, "trigger");
 const Content$4 = withContext$7(DialogContent, "content");
 const Title = withContext$7(DialogTitle, "title");
 const Description$2 = withContext$7(DialogDescription, "description");
-const Positioner = withContext$7(DialogPositioner, "positioner");
+const Positioner$1 = withContext$7(DialogPositioner, "positioner");
 const Header$1 = withContext$7(ark.header, "header");
 const Footer = withContext$7(
   ({ orientation = "horizontal", className, ...props }) => {
@@ -10226,7 +10242,7 @@ const Dialog = {
   Content: Content$4,
   Title,
   Description: Description$2,
-  Positioner,
+  Positioner: Positioner$1,
   Header: Header$1,
   Footer,
   Body,
@@ -20649,6 +20665,7 @@ const Description$1 = forwardRef(
     return /* @__PURE__ */ jsx(Box$1, { ref, className: cx(styles2.description, className), children });
   }
 );
+Description$1.displayName = "Toast.Description";
 const Icon = forwardRef(({ icon, className }, ref) => {
   const styles2 = toastRecipe();
   return /* @__PURE__ */ jsx(Box$1, { ref, className: cx(styles2.icon, className), children: icon });
@@ -20659,7 +20676,7 @@ const ActionTrigger = forwardRef(({ onClick, children, className, asLink = false
   return /* @__PURE__ */ jsx("button", { ref, className: cx(styles2.actionTrigger, className), onClick, children });
 });
 ActionTrigger.displayName = "Toast.ActionTrigger";
-const Toaster = () => {
+const Toaster = ({ toastOptions, ...props }) => {
   return /* @__PURE__ */ jsx(
     Oe,
     {
@@ -20672,8 +20689,10 @@ const Toaster = () => {
           padding: 0,
           margin: 0,
           width: "100%"
-        }
-      }
+        },
+        ...toastOptions
+      },
+      ...props
     }
   );
 };
@@ -20681,6 +20700,7 @@ Toaster.displayName = "Toast.Toaster";
 const Toast = forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(Box$1, { ref, ...props });
 });
+Toast.displayName = "Toast";
 Toast.Root = Root$5;
 Toast.Content = Content$1;
 Toast.Description = Description$1;
@@ -20774,7 +20794,7 @@ Toast.error = (description, option) => {
 };
 const selectRecipe = sva({
   className: "select",
-  slots: ["root", "trigger", "content", "item", "label", "valueText", "description"],
+  slots: [...anatomy$2.keys(), "description"],
   base: {
     root: {
       display: "flex",
@@ -20783,6 +20803,7 @@ const selectRecipe = sva({
       width: "100%"
     },
     trigger: {
+      position: "relative",
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
@@ -20798,11 +20819,18 @@ const selectRecipe = sva({
     },
     content: {
       backgroundColor: "background.neutral.default",
-      mt: 2,
       padding: 2,
       borderRadius: 16,
       overflowY: "auto",
-      zIndex: "dropdown"
+      zIndex: "dropdown",
+      display: "flex",
+      flexDirection: "column",
+      _open: {
+        animation: "fadeIn 0.2s ease-in"
+      },
+      _closed: {
+        animation: "fadeOut 0.2s ease-out"
+      }
     },
     item: {
       display: "flex",
@@ -20812,8 +20840,10 @@ const selectRecipe = sva({
       cursor: "pointer",
       color: "content.neutral.default",
       textStyle: "label.md",
-      "&:hover": {
-        backgroundColor: "background.neutral.hover"
+      rounded: "sm",
+      transition: "all 0.2s ease",
+      _hover: {
+        backgroundColor: "background.neutral.selected"
       }
     },
     label: {
@@ -20882,12 +20912,20 @@ const Trigger = withContext$4(({ description, ...props }) => {
     description && /* @__PURE__ */ jsx(Description, { text: description })
   ] });
 }, "trigger");
+const Control$2 = withContext$4(
+  SelectControl,
+  "control"
+);
 const ValueText = withContext$4(SelectValueText, "valueText");
 const Description = withContext$4(({ className, text, ...props }) => {
   return /* @__PURE__ */ jsx(Text, { className, ...props, children: text });
 }, "description");
 const Content = withContext$4(SelectContent, "content");
 const Item$2 = withContext$4(SelectItem, "item");
+const Positioner = withContext$4(
+  SelectPositioner,
+  "positioner"
+);
 const Select = {
   Root: Root$4,
   Label: Label$2,
@@ -20895,7 +20933,9 @@ const Select = {
   Content,
   Item: Item$2,
   ValueText,
-  Description
+  Description,
+  Positioner,
+  Control: Control$2
 };
 const radioGroupRecipe = sva({
   className: "radioGroup",
@@ -21622,6 +21662,9 @@ const animations = defineTokens.animations({
   "fade-in": {
     value: "fade-in 400ms {easings.emphasized-in}"
   },
+  "fade-out": {
+    value: "fade-out 200ms {easings.emphasized-out}"
+  },
   "collapse-in": {
     value: "collapse-in 250ms {easings.emphasized-in}"
   },