mm

apps/ui-site/package.json

@@ -10,9 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@base-ui/react": "^1.3.0",
+    "@defgov/ui": "workspace:*",
     "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "@defgov/ui": "workspace:*"
+    "react-dom": "^19.2.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",

apps/ui-site/src/App.tsx

@@ -1,11 +1,15 @@
-import { Skin } from "@defgov/ui";
+import { Theme } from "@defgov/ui";
 import { ButtonGallery } from "./gallery/ButtonGallery";
+import { CheckboxGallery } from "./gallery/CheckboxGallery";
+import { TooltipGallery } from "./gallery/TooltipGallery";
 
 const App = () => {
   return (
-    <Skin>
+    <Theme>
       <ButtonGallery />
-    </Skin>
+      <CheckboxGallery />
+      <TooltipGallery />
+    </Theme>
   );
 };
 

apps/ui-site/src/common/InnerWrap.tsx

@@ -1,18 +1,20 @@
-import { type ReactNode } from "react";
+import { type CSSProperties, type ReactNode } from "react";
 
 interface WrapProps {
   children: ReactNode;
+  style?: CSSProperties;
 }
 
-export function InnerWrap({ children }: WrapProps) {
+export function InnerWrap({ children, style }: WrapProps) {
   return (
     <div
       style={{
         display: "flex",
         margin: "20px",
-        gap: "20px",
+        gap: "10px",
         alignItems: "center",
         flexDirection: "row",
+        ...style,
       }}
     >
       {children}

apps/ui-site/src/common/OuterWrap.tsx

@@ -9,8 +9,8 @@ export function OuterWrap({ children }: WrapProps) {
     <div
       style={{
         display: "flex",
-        margin: "20px",
-        gap: "20px",
+        margin: "10px",
+        gap: "10px",
         flexDirection: "column",
       }}
     >

apps/ui-site/src/gallery/ButtonGallery.tsx

@@ -6,26 +6,40 @@ export const ButtonGallery = () => {
   return (
     <OuterWrap>
       <InnerWrap>
+        <Button variant="filled" icon={<DownloadSvg />} size="xs">
+          Xsmall
+        </Button>
+        <Button variant="filled" icon={<DownloadSvg />} size="sm">
+          Small
+        </Button>
         <Button variant="filled" icon={<DownloadSvg />} size="md">
-          Button
+          Madium
+        </Button>
+        <Button
+          variant="filled"
+          icon={<DownloadSvg />}
+          size="md"
+          iconOnly={true}
+        >
+          IconOnly
         </Button>
         <Button variant="filled" icon={<DownloadSvg />} size="lg">
-          Button
-        </Button>
-        <Button variant="filled" icon={<DownloadSvg />} size="xl">
-          Button
+          Large
         </Button>
       </InnerWrap>
       <InnerWrap>
         <Button variant="filled" brand="default">
-          Buttun
+          Filled
         </Button>{" "}
         <Button variant="outline" brand="default">
-          Buttun
+          Outline
         </Button>{" "}
         <Button variant="subtle" brand="default">
-          Buttun
+          Subtle
         </Button>
+        <Button variant="ghost" brand="default">
+          Ghost
+        </Button>{" "}
         <Button variant="filled" brand="success">
           Buttun
         </Button>{" "}
@@ -56,7 +70,6 @@ export const ButtonGallery = () => {
           Buttun
         </Button>
       </InnerWrap>
-
       <InnerWrap>
         <Button variant="filled" brand="info">
           Buttun
@@ -67,6 +80,18 @@ export const ButtonGallery = () => {
         <Button variant="subtle" brand="info">
           Buttun
         </Button>
+        <Button variant="filled" brand="info" disabled>
+          Disabled
+        </Button>{" "}
+        <Button variant="outline" brand="info" disabled>
+          Disabled
+        </Button>{" "}
+        <Button variant="subtle" brand="info" disabled>
+          Disabled
+        </Button>{" "}
+        <Button variant="ghost" brand="info" disabled>
+          Disabled
+        </Button>
       </InnerWrap>
     </OuterWrap>
   );

apps/ui-site/src/gallery/CheckboxGallery.tsx

@@ -0,0 +1,26 @@
+import { Checkbox, RulerSvg } from "@defgov/ui";
+import { InnerWrap } from "../common/InnerWrap";
+import { OuterWrap } from "../common/OuterWrap";
+
+export const CheckboxGallery = () => {
+  return (
+    <OuterWrap>
+      <InnerWrap>
+        <Checkbox size="xs" icon={<RulerSvg />}>
+          Ruler
+        </Checkbox>
+        <Checkbox size="sm" icon={<RulerSvg />}>
+          Ruler
+        </Checkbox>
+        <Checkbox
+          size="md"
+          icon={<RulerSvg />}
+          hideIcon={true}
+          iconPlaceholder={true}
+        >
+          Ruler
+        </Checkbox>
+      </InnerWrap>
+    </OuterWrap>
+  );
+};

apps/ui-site/src/gallery/TooltipGallery.tsx

@@ -0,0 +1,43 @@
+import {
+  BoldSvg,
+  Button,
+  Tooltip,
+  TooltipPopup,
+  TooltipTriger,
+} from "@defgov/ui";
+import { InnerWrap } from "../common/InnerWrap";
+import { OuterWrap } from "../common/OuterWrap";
+
+export const TooltipGallery = () => {
+  return (
+    <OuterWrap>
+      <InnerWrap style={{ columnGap: "60px", rowGap: "10px" }}>
+        <Tooltip >
+          <TooltipTriger>
+            <Button icon={<BoldSvg />} iconOnly={true}></Button>
+          </TooltipTriger>
+          <TooltipPopup side="right">Bold</TooltipPopup>
+        </Tooltip>
+        <Tooltip open={true}>
+          <TooltipTriger>
+            <Button icon={<BoldSvg />} iconOnly={true}></Button>
+          </TooltipTriger>
+          <TooltipPopup>Bold</TooltipPopup>
+        </Tooltip>
+        <Tooltip open={true}>
+          <TooltipTriger>
+            <Button icon={<BoldSvg />} iconOnly={true}></Button>
+          </TooltipTriger>
+          <TooltipPopup side="bottom">Bold</TooltipPopup>
+        </Tooltip>
+
+        <Tooltip open={true}>
+          <TooltipTriger>
+            <Button icon={<BoldSvg />} iconOnly={true}></Button>
+          </TooltipTriger>
+          <TooltipPopup side="left">Bold</TooltipPopup>
+        </Tooltip>
+      </InnerWrap>
+    </OuterWrap>
+  );
+};