@crystallize/design-system 1.24.11 → 1.24.13

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @crystallize/design-system
 
+## 1.24.13
+
+### Patch Changes
+
+- 7b11867: Add popover to the exported components so I can be used.
+
+## 1.24.12
+
+### Patch Changes
+
+- 7eb18e2: It was found that then a dialog has the modal prop set to true, after closing it in Safari the UI is not responsive. I guess radix was keeping the events and did not clear state after closing it. Upgrading to version 1.0.5 seems to fixed the issue.
+
 ## 1.24.11
 
 ### Patch Changes

package/dist/index.css

@@ -1517,6 +1517,43 @@
   fill: #fff;
 }
 
+/* src/popover/popover.css */
+.c-popover-content {
+  border-radius: 0.25rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity));
+  font-size: 0.75rem;
+  line-height: 1rem;
+  --tw-text-opacity: 1;
+  color: rgb(var(--c-color-gray-700-200) / var(--tw-text-opacity));
+  --tw-shadow: 0 2px 4px rgba(130,138,144,0.15);
+  --tw-shadow-colored: 0 2px 4px var(--tw-shadow-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
+.c-popover-content:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+.c-popover-close {
+  position: absolute;
+  right: 0.25rem;
+  top: 0.25rem;
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  border-width: 0px;
+  background-color: transparent;
+  padding: 0.25rem;
+}
+.c-popover-arrow {
+  fill: #fff;
+}
+
 /* src/progress/progress.css */
 .c-progress-root {
   position: relative;

package/dist/index.d.ts

@@ -10,6 +10,7 @@ import * as CollapsiblePrimitives from '@radix-ui/react-collapsible';
 import { CollapsibleTriggerProps } from '@radix-ui/react-collapsible';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as ProgressPrimitives from '@radix-ui/react-progress';
 import * as _radix_ui_react_select from '@radix-ui/react-select';
 import * as SliderPrimitive from '@radix-ui/react-slider';
@@ -284,6 +285,15 @@ type LabelRef = HTMLLabelElement;
 type LabelProps = LabelHTMLAttributes<LabelRef>;
 declare const Label: react.ForwardRefExoticComponent<LabelProps & react.RefAttributes<HTMLLabelElement>>;
 
+type PopoverProps = Pick<PopoverPrimitive.PopoverProps, 'open' | 'onOpenChange'> & Pick<PopoverPrimitive.PortalProps, 'container'> & PopoverPrimitive.PopperContentProps & {
+    children: ReactNode;
+    closeButton?: boolean | JSX.Element;
+    hasArrow?: boolean;
+    content: ReactNode;
+    onOpenAutoFocus?: (e: Event) => void;
+};
+declare function Popover({ children, closeButton, content, side, open, onOpenChange, className, container, hasArrow, ...delegatedContent }: PopoverProps): JSX.Element;
+
 type ProgressProps = ProgressPrimitives.ProgressProps;
 declare function Progress({ className, value }: ProgressProps): JSX.Element;
 
@@ -612,4 +622,4 @@ declare const tokens: {
     card: string;
 };
 
-export { ActionMenu, Avatar, Button, ButtonProps, Card, Checkbox, CheckboxProps, CheckboxRef, Collapsible, CollapsibleTrigger, Container, CrystallizeRichText, CrystallizeRichTextActionMenuItem, Dialog, DropdownMenu, DropdownMenuRootProps, Icon, IconButton, IconButtonProps, InlineRadio, Input, InputWithLabel, Label, Progress, Radio, RichTextEditor, Select, Slider, Spinner, StackIcon, Switch, Tag, ToastProps, Tooltip, buttonTokens, cardToken, destroyAll, showConfirm, showDialog, showError, showInfo, showWarning, toast, tokens };
+export { ActionMenu, Avatar, Button, ButtonProps, Card, Checkbox, CheckboxProps, CheckboxRef, Collapsible, CollapsibleTrigger, Container, CrystallizeRichText, CrystallizeRichTextActionMenuItem, Dialog, DropdownMenu, DropdownMenuRootProps, Icon, IconButton, IconButtonProps, InlineRadio, Input, InputWithLabel, Label, Popover, Progress, Radio, RichTextEditor, Select, Slider, Spinner, StackIcon, Switch, Tag, ToastProps, Tooltip, buttonTokens, cardToken, destroyAll, showConfirm, showDialog, showError, showInfo, showWarning, toast, tokens };