@inspirare/design-system 0.0.24 → 0.0.26

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@inspirare/design-system",
   "private": false,
-  "version": "0.0.24",
+  "version": "0.0.26",
   "type": "module",
   "sideEffects": [
     "*.css"

package/src/components/ui/alert-dialog.tsx

@@ -52,7 +52,7 @@ function AlertDialogContent({
         data-slot="alert-dialog-content"
         data-size={size}
         className={cn(
-          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          "group/alert-dialog-content fixed inset-0 m-auto z-50 grid w-full max-h-[88dvh] h-fit gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         )}
         {...props}

package/src/components/ui/dialog.tsx

@@ -58,7 +58,7 @@ const DialogContent = React.forwardRef<
         ref={ref}
         data-slot="dialog-content"
         className={cn(
-          "fixed top-1/2 left-1/2 z-50 grid w-[90vw] max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-2xl bg-popover/90 backdrop-blur-xl p-6 text-sm text-popover-foreground shadow-2xl ring-1 ring-border duration-200 outline-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          "fixed inset-0 m-auto z-50 grid w-[90vw] max-w-lg max-h-[88dvh] h-fit gap-4 rounded-2xl bg-popover/90 backdrop-blur-xl p-6 text-sm text-popover-foreground shadow-2xl ring-1 ring-border duration-200 outline-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         )}
         {...props}

package/src/components/ui/select.test.tsx

@@ -2,6 +2,7 @@ import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "./select";
 
+
 describe('Select Accessibility', () => {
   it('should have no accessibility violations in basic render', async () => {
     const Wrapper = () => (
@@ -11,4 +12,21 @@ describe('Select Accessibility', () => {
     const results = await axe(container);
     expect(results).toHaveNoViolations();
   });
-});
+
+  it('should display the default label instead of the value on initial render', () => {
+    const Wrapper = () => (
+      <Select defaultValue="dark">
+        <SelectTrigger aria-label="Select a theme" className="w-[180px]">
+          <SelectValue placeholder="Theme" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="light">Light</SelectItem>
+          <SelectItem value="dark">Dark Theme</SelectItem>
+          <SelectItem value="system">System</SelectItem>
+        </SelectContent>
+      </Select>
+    );
+    const { container } = render(<Wrapper />);
+    expect(container.textContent).toContain('Dark Theme');
+  });
+});

package/src/components/ui/select.tsx

@@ -12,10 +12,37 @@ const SelectContext = React.createContext<{
 } | null>(null);
 
 function Select({ children, ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
-  const [labels, setLabels] = React.useState<Record<string, string>>({});
+  const [dynamicLabels, setDynamicLabels] = React.useState<Record<string, string>>({});
   
+  const staticLabels = React.useMemo(() => {
+    const result: Record<string, string> = {};
+    const extract = (node: React.ReactNode) => {
+      React.Children.forEach(node, (child) => {
+        if (!React.isValidElement(child)) return;
+        if ((child as any).props && (child as any).props.value !== undefined) {
+          if ((child as any).props.children) {
+            let label = "";
+            React.Children.forEach((child as any).props.children, (grandChild) => {
+              if (typeof grandChild === "string" || typeof grandChild === "number") {
+                label += grandChild;
+              }
+            });
+            if (label) result[(child as any).props.value] = label;
+          }
+        }
+        if ((child as any).props && (child as any).props.children) {
+          extract((child as any).props.children);
+        }
+      });
+    };
+    extract(children);
+    return result;
+  }, [children]);
+
+  const labels = { ...staticLabels, ...dynamicLabels };
+
   const registerLabel = React.useCallback((val: any, label: string) => {
-    setLabels((prev) => {
+    setDynamicLabels((prev) => {
       if (prev[val] === label) return prev;
       return { ...prev, [val]: label };
     });

package/src/index.css

@@ -3,6 +3,36 @@
 @import "shadcn/tailwind.css";
 @custom-variant dark (&:is(.dark *));
 
+/* ── Universal Dialog Viewport Centering & Boundary Safety ── */
+[data-slot="dialog-content"],
+[data-slot="alert-dialog-content"],
+[data-radix-dialog-content],
+div[role="dialog"],
+div[role="alertdialog"] {
+  position: fixed !important;
+  inset: 0 !important;
+  top: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  left: 0 !important;
+  margin: auto !important;
+  max-height: 88vh !important;
+  max-height: 88dvh !important;
+  height: fit-content !important;
+}
+
+[data-slot="dialog-overlay"],
+[data-slot="alert-dialog-overlay"],
+[data-radix-dialog-overlay] {
+  position: fixed !important;
+  inset: 0 !important;
+  top: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  left: 0 !important;
+}
+
+
 /* Detecção de conteúdo restrita à BIBLIOTECA. O playground do Vite
    (App.tsx, main.tsx, demo/) só existe para desenvolvimento local e não é
    publicado (o entry da lib é src/index.ts → components/ui/*). Sem estas