@gobolt/genesis 0.9.2 → 0.10.0

package/dist/components/BottomDrawer/BottomDrawer.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+import { ButtonProps } from '../Button';
+type BottomDrawerAction = {
+    label: string;
+    onClick: () => void;
+    btnProps?: ButtonProps;
+};
+export interface BottomDrawerProps {
+    open: boolean;
+    onClose: () => void;
+    type?: "full" | "float";
+    /** Drawer height. Bottom drawers size on the vertical axis (default 88). */
+    height?: number | string;
+    /** Left-aligned description / status text (string is styled; nodes render as-is). */
+    label?: ReactNode;
+    /** Right-aligned action buttons (e.g. Cancel + Confirm). */
+    actions?: BottomDrawerAction[];
+}
+/**
+ * A slim slide-up drawer for user confirmation: a description on the left and
+ * actions on the right. Shares SidePanel's slide-up + overlay behavior, but the
+ * contents are intentionally trimmed to a single action row.
+ */
+declare const BottomDrawer: ({ open, onClose, type, height, label, actions, }: BottomDrawerProps) => import("react/jsx-runtime").JSX.Element;
+export default BottomDrawer;

package/dist/components/BottomDrawer/__stories__/BottomDrawer.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as BottomDrawer } from '../BottomDrawer';
+declare const meta: Meta<typeof BottomDrawer>;
+export default meta;
+type Story = StoryObj<typeof BottomDrawer>;
+export declare const UnsavedChanges: Story;
+export declare const FloatType: Story;

package/dist/components/BottomDrawer/__tests__/BottomDrawer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/BottomDrawer/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './BottomDrawer';
+export type { BottomDrawerProps } from './BottomDrawer';

package/dist/components/BottomDrawer/styles.d.ts

@@ -0,0 +1 @@
+export declare const StyledBottomDrawer: any;

package/dist/components/index.d.ts

@@ -67,6 +67,8 @@ export { default as Shapes } from './Shapes';
 export type { ShapesProps } from './Shapes';
 export { default as SidePanel } from './SidePanel';
 export type { SidePanelProps } from './SidePanel';
+export { default as BottomDrawer } from './BottomDrawer';
+export type { BottomDrawerProps } from './BottomDrawer';
 export { default as Switch } from './Switch';
 export type { SwitchProps } from './Switch';
 export { default as Table } from './Table';

package/dist/index.cjs

@@ -77694,7 +77694,7 @@ const GlobalHeader = ({
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs(Tile, { isHorizontal: true, style: { flex: 1, gap: "16px", minWidth: "200px" }, children: [
                 onBack && /* @__PURE__ */ jsxRuntime.jsx(UtilityButton, { icon: /* @__PURE__ */ jsxRuntime.jsx(RefIcon$j, {}), onClick: onBack }),
-                /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "display3", children: title })
+                /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "display3", style: { marginTop: 0 }, children: title })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs(
                 Tile,
@@ -87570,7 +87570,7 @@ const Shapes = ({ variant = "triangle", fill }) => {
   }
   return /* @__PURE__ */ jsxRuntime.jsx(Triangle, { fill, dataTestId: "shape-triangle" });
 };
-const getGenesisDrawerClass = ({ borderRadius: borderRadius2, sizing: sizing2 }, $type = "float", placement = "right") => {
+const getGenesisDrawerClass$1 = ({ borderRadius: borderRadius2, sizing: sizing2 }, $type = "float", placement = "right") => {
   const isFloat = $type === "float";
   const offset2 = isFloat ? 24 : 0;
   const edge = placement === "right" ? "right" : "left";
@@ -87608,7 +87608,7 @@ const StyledSidePanel = styled(Drawer2).attrs({
 })`
   ${({ theme, $type = "float", placement = "right" }) => {
   if (!theme) return "";
-  return getGenesisDrawerClass(theme, $type, placement);
+  return getGenesisDrawerClass$1(theme, $type, placement);
 }}
 `;
 const ScrollableContent = styled.div`
@@ -87851,6 +87851,112 @@ const SidePanel = ({
     }
   );
 };
+const getGenesisDrawerClass = ({ borderRadius: borderRadius2 }, $type = "full") => {
+  const isFloat = $type === "float";
+  const offset2 = isFloat ? 24 : 0;
+  const radius2 = borderRadius2.BorderRadiusMd;
+  return `
+    .ant-drawer-content-wrapper {
+      box-shadow: none !important;
+      ${isFloat ? `
+        left: ${offset2}px !important;
+        right: ${offset2}px !important;
+        bottom: ${offset2}px !important;
+        width: auto !important;
+      ` : ""}
+    }
+
+    .ant-drawer-content {
+      box-shadow: none !important;
+      border-radius: ${isFloat ? `${radius2}px` : "0"} !important;
+    }
+
+    .ant-drawer-body {
+      padding: 0;
+      display: flex;
+      align-items: center;
+      height: 100%;
+    }
+  `;
+};
+const StyledBottomDrawer = styled(Drawer2).attrs({
+  destroyOnHidden: true,
+  push: false
+})`
+  ${({ theme, $type = "full" }) => {
+  if (!theme) return "";
+  return getGenesisDrawerClass(theme, $type);
+}}
+`;
+const BottomDrawer = ({
+  open,
+  onClose,
+  type: type4 = "full",
+  height = 88,
+  label,
+  actions = []
+}) => {
+  const theme = styled.useTheme();
+  const spacing = {
+    Size4: theme?.sizing?.Size4 || 16,
+    Size8: theme?.sizing?.Size8 || 32
+  };
+  const textColor = theme?.colors?.onsurface?.active?.textColor || "#3E3E3E";
+  const isFloat = type4 === "float";
+  const floatOffset = 24;
+  const border = "1px solid var(--interactive-utility-border, #CBCBCB)";
+  const sharedStyles = {
+    wrapper: { boxShadow: "none" },
+    content: {
+      boxShadow: "none",
+      borderTop: border,
+      borderRadius: 0
+    },
+    body: { padding: 0, display: "flex", alignItems: "center", height: "100%" }
+  };
+  const drawerStyles = isFloat ? {
+    ...sharedStyles,
+    wrapper: {
+      boxShadow: "none",
+      left: `${floatOffset}px`,
+      right: `${floatOffset}px`,
+      bottom: `${floatOffset}px`,
+      width: "auto"
+    },
+    content: { boxShadow: "none", border, borderRadius: "12px" }
+  } : sharedStyles;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StyledBottomDrawer,
+    {
+      closable: false,
+      mask: false,
+      onClose,
+      placement: "bottom",
+      height,
+      open,
+      $type: type4,
+      styles: drawerStyles,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        Tile,
+        {
+          isHorizontal: true,
+          style: {
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: `${spacing.Size4}px`,
+            padding: `0 ${spacing.Size8}px`,
+            width: "100%",
+            height: "100%"
+          },
+          children: [
+            typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { fontSize: "20px", fontWeight: 400, color: textColor, children: label }) : label,
+            actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Tile, { isHorizontal: true, style: { gap: `${spacing.Size4}px` }, children: actions.map((action, index2) => /* @__PURE__ */ jsxRuntime.jsx(Button$1, { ...action.btnProps, onClick: action.onClick, children: action.label }, index2)) })
+          ]
+        }
+      )
+    }
+  );
+};
 const getGenesisClass$3 = ({ colors: colors2, borderRadius: borderRadius2 }) => `
   &.ant-switch {
     background-color: ${colors2.primary.active};
@@ -91307,6 +91413,7 @@ const GlobalStyles = styled.createGlobalStyle`
 exports.Avatar = Avatar;
 exports.Badge = Badge$1;
 exports.BarChart = BarChart;
+exports.BottomDrawer = BottomDrawer;
 exports.Breadcrumb = Breadcrumb;
 exports.Button = Button$1;
 exports.Card = Card;

package/dist/index.js

@@ -77676,7 +77676,7 @@ const GlobalHeader = ({
             children: [
               /* @__PURE__ */ jsxs(Tile, { isHorizontal: true, style: { flex: 1, gap: "16px", minWidth: "200px" }, children: [
                 onBack && /* @__PURE__ */ jsx(UtilityButton, { icon: /* @__PURE__ */ jsx(RefIcon$j, {}), onClick: onBack }),
-                /* @__PURE__ */ jsx(Typography, { variant: "display3", children: title })
+                /* @__PURE__ */ jsx(Typography, { variant: "display3", style: { marginTop: 0 }, children: title })
               ] }),
               /* @__PURE__ */ jsxs(
                 Tile,
@@ -87552,7 +87552,7 @@ const Shapes = ({ variant = "triangle", fill }) => {
   }
   return /* @__PURE__ */ jsx(Triangle, { fill, dataTestId: "shape-triangle" });
 };
-const getGenesisDrawerClass = ({ borderRadius: borderRadius2, sizing: sizing2 }, $type = "float", placement = "right") => {
+const getGenesisDrawerClass$1 = ({ borderRadius: borderRadius2, sizing: sizing2 }, $type = "float", placement = "right") => {
   const isFloat = $type === "float";
   const offset2 = isFloat ? 24 : 0;
   const edge = placement === "right" ? "right" : "left";
@@ -87590,7 +87590,7 @@ const StyledSidePanel = styled(Drawer2).attrs({
 })`
   ${({ theme, $type = "float", placement = "right" }) => {
   if (!theme) return "";
-  return getGenesisDrawerClass(theme, $type, placement);
+  return getGenesisDrawerClass$1(theme, $type, placement);
 }}
 `;
 const ScrollableContent = styled.div`
@@ -87833,6 +87833,112 @@ const SidePanel = ({
     }
   );
 };
+const getGenesisDrawerClass = ({ borderRadius: borderRadius2 }, $type = "full") => {
+  const isFloat = $type === "float";
+  const offset2 = isFloat ? 24 : 0;
+  const radius2 = borderRadius2.BorderRadiusMd;
+  return `
+    .ant-drawer-content-wrapper {
+      box-shadow: none !important;
+      ${isFloat ? `
+        left: ${offset2}px !important;
+        right: ${offset2}px !important;
+        bottom: ${offset2}px !important;
+        width: auto !important;
+      ` : ""}
+    }
+
+    .ant-drawer-content {
+      box-shadow: none !important;
+      border-radius: ${isFloat ? `${radius2}px` : "0"} !important;
+    }
+
+    .ant-drawer-body {
+      padding: 0;
+      display: flex;
+      align-items: center;
+      height: 100%;
+    }
+  `;
+};
+const StyledBottomDrawer = styled(Drawer2).attrs({
+  destroyOnHidden: true,
+  push: false
+})`
+  ${({ theme, $type = "full" }) => {
+  if (!theme) return "";
+  return getGenesisDrawerClass(theme, $type);
+}}
+`;
+const BottomDrawer = ({
+  open,
+  onClose,
+  type: type4 = "full",
+  height = 88,
+  label,
+  actions = []
+}) => {
+  const theme = useTheme$1();
+  const spacing = {
+    Size4: theme?.sizing?.Size4 || 16,
+    Size8: theme?.sizing?.Size8 || 32
+  };
+  const textColor = theme?.colors?.onsurface?.active?.textColor || "#3E3E3E";
+  const isFloat = type4 === "float";
+  const floatOffset = 24;
+  const border = "1px solid var(--interactive-utility-border, #CBCBCB)";
+  const sharedStyles = {
+    wrapper: { boxShadow: "none" },
+    content: {
+      boxShadow: "none",
+      borderTop: border,
+      borderRadius: 0
+    },
+    body: { padding: 0, display: "flex", alignItems: "center", height: "100%" }
+  };
+  const drawerStyles = isFloat ? {
+    ...sharedStyles,
+    wrapper: {
+      boxShadow: "none",
+      left: `${floatOffset}px`,
+      right: `${floatOffset}px`,
+      bottom: `${floatOffset}px`,
+      width: "auto"
+    },
+    content: { boxShadow: "none", border, borderRadius: "12px" }
+  } : sharedStyles;
+  return /* @__PURE__ */ jsx(
+    StyledBottomDrawer,
+    {
+      closable: false,
+      mask: false,
+      onClose,
+      placement: "bottom",
+      height,
+      open,
+      $type: type4,
+      styles: drawerStyles,
+      children: /* @__PURE__ */ jsxs(
+        Tile,
+        {
+          isHorizontal: true,
+          style: {
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: `${spacing.Size4}px`,
+            padding: `0 ${spacing.Size8}px`,
+            width: "100%",
+            height: "100%"
+          },
+          children: [
+            typeof label === "string" ? /* @__PURE__ */ jsx(Typography, { fontSize: "20px", fontWeight: 400, color: textColor, children: label }) : label,
+            actions.length > 0 && /* @__PURE__ */ jsx(Tile, { isHorizontal: true, style: { gap: `${spacing.Size4}px` }, children: actions.map((action, index2) => /* @__PURE__ */ jsx(Button$1, { ...action.btnProps, onClick: action.onClick, children: action.label }, index2)) })
+          ]
+        }
+      )
+    }
+  );
+};
 const getGenesisClass$3 = ({ colors: colors2, borderRadius: borderRadius2 }) => `
   &.ant-switch {
     background-color: ${colors2.primary.active};
@@ -91290,6 +91396,7 @@ export {
   Avatar,
   Badge$1 as Badge,
   BarChart,
+  BottomDrawer,
   Breadcrumb,
   Button$1 as Button,
   Card,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gobolt/genesis",
-  "version": "0.9.2",
+  "version": "0.10.0",
   "description": "genesis design system",
   "author": "gobolt",
   "license": "MIT",