prime-ui-kit 0.7.2 → 0.7.3

package/dist/components/drawer/Drawer.d.ts

@@ -1,71 +1,16 @@
 import * as React from "react";
-import type { DrawerSize } from "@/internal/states";
-export type { DrawerSize };
-export type DrawerSide = "left" | "right" | "bottom" | "top";
-export type DrawerRootProps = {
-    open?: boolean;
-    defaultOpen?: boolean;
-    onOpenChange?: (open: boolean) => void;
-    closeOnEscape?: boolean;
-    closeOnOverlayClick?: boolean;
+export type DrawerSide = "left" | "right";
+export type DrawerProps = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
     children: React.ReactNode;
-};
-declare function DrawerRoot({ open, defaultOpen, onOpenChange, closeOnEscape, closeOnOverlayClick, children, }: DrawerRootProps): import("react/jsx-runtime").JSX.Element;
-export type DrawerTriggerProps = {
-    children: React.ReactElement<{
-        onClick?: React.MouseEventHandler;
-    }>;
-};
-declare function DrawerTrigger({ children }: DrawerTriggerProps): React.ReactElement<{
-    onClick?: React.MouseEventHandler;
-}, string | React.JSXElementConstructor<any>>;
-export type DrawerCloseProps = {
-    children: React.ReactElement<{
-        onClick?: React.MouseEventHandler;
-        className?: string;
-    }>;
-};
-declare function DrawerClose({ children }: DrawerCloseProps): React.ReactElement<{
-    onClick?: React.MouseEventHandler;
-    className?: string;
-}, string | React.JSXElementConstructor<any>>;
-export type DrawerPortalProps = {
-    children: React.ReactNode;
-    container?: HTMLElement | null;
-};
-declare function DrawerPortal({ children, container }: DrawerPortalProps): import("react/jsx-runtime").JSX.Element | null;
-export type DrawerOverlayProps = React.HTMLAttributes<HTMLDivElement>;
-declare function DrawerOverlay({ className, onClick, ...rest }: DrawerOverlayProps): import("react/jsx-runtime").JSX.Element;
-export type DrawerPanelProps = React.HTMLAttributes<HTMLDivElement> & {
+    footer?: React.ReactNode;
     side?: DrawerSide;
-    size?: DrawerSize;
-    "aria-label"?: string;
-    "aria-labelledby"?: string;
-    "aria-describedby"?: string;
-};
-declare function DrawerPanel({ children, className, side, size, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...rest }: DrawerPanelProps): import("react/jsx-runtime").JSX.Element;
-export type DrawerHeaderProps = React.HTMLAttributes<HTMLElement> & {
-    showCloseButton?: boolean;
-};
-declare function DrawerHeader({ children, className, showCloseButton, ...rest }: DrawerHeaderProps): import("react/jsx-runtime").JSX.Element;
-export type DrawerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
-declare function DrawerTitle({ children, className, ...rest }: DrawerTitleProps): import("react/jsx-runtime").JSX.Element;
-export type DrawerContentProps = React.HTMLAttributes<HTMLDivElement>;
-export type DrawerLegacyContentProps = DrawerPanelProps;
-declare function DrawerContent(props: DrawerContentProps | DrawerLegacyContentProps): import("react/jsx-runtime").JSX.Element;
-export type DrawerFooterProps = React.HTMLAttributes<HTMLElement>;
-declare function DrawerFooter({ children, className, ...rest }: DrawerFooterProps): import("react/jsx-runtime").JSX.Element;
-export declare const Drawer: {
-    Root: typeof DrawerRoot;
-    Trigger: typeof DrawerTrigger;
-    Close: typeof DrawerClose;
-    Portal: typeof DrawerPortal;
-    Overlay: typeof DrawerOverlay;
-    Panel: typeof DrawerPanel;
-    Content: typeof DrawerContent;
-    Body: typeof DrawerContent;
-    Header: typeof DrawerHeader;
-    Title: typeof DrawerTitle;
-    Footer: typeof DrawerFooter;
+    className?: string;
+    overlayClassName?: string;
 };
+export declare function Drawer({ open, onOpenChange, title, description, icon, children, footer, side, className, overlayClassName, }: DrawerProps): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=Drawer.d.ts.map

package/dist/components/drawer/Drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer/Drawer.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAoB/B,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;AAE1C,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,IAAc,EACd,SAAS,EACT,gBAAgB,GACjB,EAAE,WAAW,kDA+Ib"}

package/dist/components/drawer/examples/cart-preview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cart-preview.d.ts","sourceRoot":"","sources":["../../../../../src/components/drawer/examples/cart-preview.tsx"],"names":[],"mappings":"AAUA;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,wBAAwB,4CAyC/C"}
+{"version":3,"file":"cart-preview.d.ts","sourceRoot":"","sources":["../../../../../src/components/drawer/examples/cart-preview.tsx"],"names":[],"mappings":"AAaA;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,wBAAwB,4CA2C/C"}

package/dist/components/drawer/examples/explicit-panel.d.ts

@@ -1,5 +1,5 @@
 /**
- * Extended composition: `Drawer.Panel` exposes the shell explicitly; inner `Drawer.Content` is only the scroll region.
+ * Canonical new API with icon + subtitle in header and actions in footer.
  */
 export default function DrawerExampleExplicitPanel(): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=explicit-panel.d.ts.map

package/dist/components/drawer/examples/explicit-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"explicit-panel.d.ts","sourceRoot":"","sources":["../../../../../src/components/drawer/examples/explicit-panel.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,0BAA0B,4CA+BjD"}
+{"version":3,"file":"explicit-panel.d.ts","sourceRoot":"","sources":["../../../../../src/components/drawer/examples/explicit-panel.tsx"],"names":[],"mappings":"AAQA;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,0BAA0B,4CA4BjD"}

package/dist/components/drawer/examples/filters-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"filters-panel.d.ts","sourceRoot":"","sources":["../../../../../src/components/drawer/examples/filters-panel.tsx"],"names":[],"mappings":"AAMA;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,yBAAyB,4CA2ChD"}
+{"version":3,"file":"filters-panel.d.ts","sourceRoot":"","sources":["../../../../../src/components/drawer/examples/filters-panel.tsx"],"names":[],"mappings":"AASA;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,yBAAyB,4CA6ChD"}

package/dist/components/drawer/examples/mobile-nav-sheet.d.ts

@@ -1,5 +1,5 @@
 /**
- * Bottom sheet pattern for small-viewport primary navigation. Wrap rows in `Drawer.Close` so choosing a section dismisses the sheet.
+ * Mobile navigation surface with explicit close on item selection.
  */
 export default function DrawerExampleMobileNavSheet(): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=mobile-nav-sheet.d.ts.map

package/dist/components/drawer/examples/mobile-nav-sheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mobile-nav-sheet.d.ts","sourceRoot":"","sources":["../../../../../src/components/drawer/examples/mobile-nav-sheet.tsx"],"names":[],"mappings":"AAOA;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,2BAA2B,4CAgClD"}
+{"version":3,"file":"mobile-nav-sheet.d.ts","sourceRoot":"","sources":["../../../../../src/components/drawer/examples/mobile-nav-sheet.tsx"],"names":[],"mappings":"AAUA;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,2BAA2B,4CAkClD"}

package/dist/components/drawer/examples/settings-side.d.ts

@@ -1,5 +1,5 @@
 /**
- * Settings on the trailing edge: form fields share the drawer `size` tier with header and footer controls.
+ * Settings on the trailing edge: form fields live in the scroll body, actions are fixed in footer.
  */
 export default function DrawerExampleSettingsSide(): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=settings-side.d.ts.map

package/dist/components/drawer/examples/settings-side.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settings-side.d.ts","sourceRoot":"","sources":["../../../../../src/components/drawer/examples/settings-side.tsx"],"names":[],"mappings":"AAMA;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,yBAAyB,4CA4ChD"}
+{"version":3,"file":"settings-side.d.ts","sourceRoot":"","sources":["../../../../../src/components/drawer/examples/settings-side.tsx"],"names":[],"mappings":"AASA;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,yBAAyB,4CA8ChD"}

package/dist/components/index.css

@@ -5294,130 +5294,117 @@
   z-index: var(--prime-sys-elevation-zIndex-drawer);
   background: var(--prime-sys-color-surface-overlay);
   backdrop-filter: blur(var(--prime-sys-unit-8px));
-  animation: Drawer_drawerFadeIn2 var(--prime-sys-motion-medium) var(--prime-sys-motion-standard);
 }
 .Drawer_overlay2[data-nested-in-modal=true] {
   z-index: var(--prime-sys-elevation-zIndex-drawerNestedShell);
 }
+.Drawer_overlay2[data-state=open] {
+  animation: Drawer_drawerFadeIn2 var(--prime-sys-motion-medium) var(--prime-sys-motion-standard);
+}
+.Drawer_overlay2[data-state=closing] {
+  animation: Drawer_drawerFadeOut2 var(--prime-sys-motion-medium) var(--prime-sys-motion-standard);
+}
 .Drawer_panel2 {
   position: fixed;
-  z-index: var(--prime-sys-elevation-zIndex-drawer);
+  top: 0;
+  bottom: 0;
+  width: min(28rem, 90vw);
   display: flex;
   flex-direction: column;
   min-height: 0;
   overflow: hidden;
+  z-index: var(--prime-sys-elevation-zIndex-drawer);
   background: color-mix(in srgb, var(--prime-sys-color-surface-elevated) 94%, transparent);
   color: var(--prime-sys-color-content-primary);
   border: var(--prime-sys-unit-1px) solid var(--prime-sys-color-border-subtle);
   box-shadow: var(--prime-sys-elevation-shadow-modal);
   outline: none;
-  --drawer-padding-x: var(--prime-sys-size-drawer-m-paddingX);
-  --drawer-padding-y: var(--prime-sys-size-drawer-m-paddingY);
-  --drawer-title-gap: var(--prime-sys-size-drawer-m-titleGap);
-  --drawer-header-gap: var(--prime-sys-size-drawer-m-headerGap);
-  --drawer-footer-gap: var(--prime-sys-size-drawer-m-footerGap);
-  --drawer-title-text: var(--prime-sys-size-drawer-m-titleText);
-  --drawer-panel-width: min(22rem, 92vw);
 }
 .Drawer_panel2[data-nested-in-modal=true] {
   z-index: var(--prime-sys-elevation-zIndex-drawerNestedShell);
 }
-.Drawer_panel2[data-size=s] {
-  --drawer-padding-x: var(--prime-sys-size-drawer-s-paddingX);
-  --drawer-padding-y: var(--prime-sys-size-drawer-s-paddingY);
-  --drawer-title-gap: var(--prime-sys-size-drawer-s-titleGap);
-  --drawer-header-gap: var(--prime-sys-size-drawer-s-headerGap);
-  --drawer-footer-gap: var(--prime-sys-size-drawer-s-footerGap);
-  --drawer-title-text: var(--prime-sys-size-drawer-s-titleText);
-}
-.Drawer_panel2[data-size=l] {
-  --drawer-padding-x: var(--prime-sys-size-drawer-l-paddingX);
-  --drawer-padding-y: var(--prime-sys-size-drawer-l-paddingY);
-  --drawer-title-gap: var(--prime-sys-size-drawer-l-titleGap);
-  --drawer-header-gap: var(--prime-sys-size-drawer-l-headerGap);
-  --drawer-footer-gap: var(--prime-sys-size-drawer-l-footerGap);
-  --drawer-title-text: var(--prime-sys-size-drawer-l-titleText);
-}
-.Drawer_panel2[data-size=xl] {
-  --drawer-padding-x: var(--prime-sys-size-drawer-xl-paddingX);
-  --drawer-padding-y: var(--prime-sys-size-drawer-xl-paddingY);
-  --drawer-title-gap: var(--prime-sys-size-drawer-xl-titleGap);
-  --drawer-header-gap: var(--prime-sys-size-drawer-xl-headerGap);
-  --drawer-footer-gap: var(--prime-sys-size-drawer-xl-footerGap);
-  --drawer-title-text: var(--prime-sys-size-drawer-xl-titleText);
-}
 .Drawer_panel2[data-side=right] {
-  top: 0;
   right: 0;
-  bottom: 0;
-  width: var(--drawer-panel-width);
   border-radius: var(--prime-sys-shape-radius-l) 0 0 var(--prime-sys-shape-radius-l);
-  animation: Drawer_drawerSlideRight2 var(--prime-sys-motion-medium) var(--prime-sys-motion-standard);
 }
 .Drawer_panel2[data-side=left] {
-  top: 0;
   left: 0;
-  bottom: 0;
-  width: var(--drawer-panel-width);
   border-radius: 0 var(--prime-sys-shape-radius-l) var(--prime-sys-shape-radius-l) 0;
-  animation: Drawer_drawerSlideLeft2 var(--prime-sys-motion-medium) var(--prime-sys-motion-standard);
 }
-.Drawer_panel2[data-side=bottom] {
-  left: 0;
-  right: 0;
-  bottom: 0;
-  max-height: 82vh;
-  border-radius: var(--prime-sys-shape-radius-l) var(--prime-sys-shape-radius-l) 0 0;
-  animation: Drawer_drawerSlideBottom2 var(--prime-sys-motion-medium) var(--prime-sys-motion-standard);
+.Drawer_panel2[data-state=open][data-side=right] {
+  animation: Drawer_drawerSlideInFromRight2 var(--prime-sys-motion-medium) var(--prime-sys-motion-standard);
 }
-.Drawer_panel2[data-side=top] {
-  left: 0;
-  right: 0;
-  top: 0;
-  max-height: 82vh;
-  border-radius: 0 0 var(--prime-sys-shape-radius-l) var(--prime-sys-shape-radius-l);
-  animation: Drawer_drawerSlideTop2 var(--prime-sys-motion-medium) var(--prime-sys-motion-standard);
+.Drawer_panel2[data-state=closing][data-side=right] {
+  animation: Drawer_drawerSlideOutToRight2 var(--prime-sys-motion-medium) var(--prime-sys-motion-standard);
+}
+.Drawer_panel2[data-state=open][data-side=left] {
+  animation: Drawer_drawerSlideInFromLeft2 var(--prime-sys-motion-medium) var(--prime-sys-motion-standard);
+}
+.Drawer_panel2[data-state=closing][data-side=left] {
+  animation: Drawer_drawerSlideOutToLeft2 var(--prime-sys-motion-medium) var(--prime-sys-motion-standard);
 }
 .Drawer_header2 {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
-  gap: var(--drawer-header-gap);
-  padding-inline: var(--drawer-padding-x);
-  padding-block: var(--drawer-padding-y);
+  gap: var(--prime-sys-spacing-x3);
+  padding-inline: var(--prime-sys-spacing-x5);
+  padding-block: var(--prime-sys-spacing-x5);
   border-bottom: var(--prime-sys-unit-1px) solid var(--prime-sys-color-border-subtle);
   flex-shrink: 0;
 }
-.Drawer_headerContent2 {
+.Drawer_headerMain2 {
   display: flex;
-  flex-direction: column;
-  gap: var(--drawer-title-gap);
-  flex: 1;
+  align-items: flex-start;
+  gap: var(--prime-sys-spacing-x3);
   min-width: 0;
 }
-.Drawer_closeBtn2 {
+.Drawer_icon2 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--prime-sys-size-control-m-height);
+  height: var(--prime-sys-size-control-m-height);
+  border-radius: var(--prime-sys-shape-radius-m);
+  background: var(--prime-sys-color-surface-raised);
+  color: var(--prime-sys-color-content-secondary);
   flex-shrink: 0;
 }
+.Drawer_titleBlock2 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-sys-spacing-x1);
+  min-width: 0;
+}
 .Drawer_title2 {
   margin: 0;
-  font-size: var(--drawer-title-text);
+  font-size: var(--prime-sys-size-control-m-text);
   font-weight: var(--prime-sys-typography-title-weight);
   line-height: 1.2;
   color: var(--prime-sys-color-content-primary);
 }
-.Drawer_content2 {
+.Drawer_description2 {
+  margin: 0;
+  color: var(--prime-sys-color-content-secondary);
+  font-size: var(--prime-sys-size-control-s-text);
+  line-height: 1.4;
+}
+.Drawer_closeButton2 {
+  flex-shrink: 0;
+}
+.Drawer_body2 {
   flex: 1;
   min-height: 0;
-  padding-inline: var(--drawer-padding-x);
-  padding-block: var(--drawer-padding-y);
+  padding-inline: var(--prime-sys-spacing-x5);
+  padding-block: var(--prime-sys-spacing-x5);
 }
 .Drawer_footer2 {
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  gap: var(--drawer-footer-gap);
-  padding-inline: var(--drawer-padding-x);
-  padding-block: var(--drawer-padding-y);
+  gap: var(--prime-sys-spacing-x3);
+  padding-inline: var(--prime-sys-spacing-x5);
+  padding-block: var(--prime-sys-spacing-x4);
   border-top: var(--prime-sys-unit-1px) solid var(--prime-sys-color-border-subtle);
   flex-shrink: 0;
 }
@@ -5429,7 +5416,15 @@
     opacity: 1;
   }
 }
-@keyframes Drawer_drawerSlideRight2 {
+@keyframes Drawer_drawerFadeOut2 {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes Drawer_drawerSlideInFromRight2 {
   from {
     transform: translateX(100%);
   }
@@ -5437,28 +5432,28 @@
     transform: translateX(0);
   }
 }
-@keyframes Drawer_drawerSlideLeft2 {
+@keyframes Drawer_drawerSlideOutToRight2 {
   from {
-    transform: translateX(-100%);
+    transform: translateX(0);
   }
   to {
-    transform: translateX(0);
+    transform: translateX(100%);
   }
 }
-@keyframes Drawer_drawerSlideBottom2 {
+@keyframes Drawer_drawerSlideInFromLeft2 {
   from {
-    transform: translateY(100%);
+    transform: translateX(-100%);
   }
   to {
-    transform: translateY(0);
+    transform: translateX(0);
   }
 }
-@keyframes Drawer_drawerSlideTop2 {
+@keyframes Drawer_drawerSlideOutToLeft2 {
   from {
-    transform: translateY(-100%);
+    transform: translateX(0);
   }
   to {
-    transform: translateY(0);
+    transform: translateX(-100%);
   }
 }
 @media (prefers-reduced-motion: reduce) {
@@ -5758,7 +5753,7 @@
   margin-bottom: var(--dd-separator-stack-pad);
 }
 .Dropdown_content2 > .Dropdown_block2 + .Dropdown_block2 {
-  margin-top: var(--prime-sys-spacing-x4);
+  margin-top: var(--dd-pad);
 }
 .Dropdown_content2 > .Dropdown_block2 + .Dropdown_separator2 {
   margin-top: var(--dd-separator-stack-pad);