@yourdash/uikit 0.0.1 → 0.1.0

package/lib/components/button/button.module.scss

@@ -0,0 +1,47 @@
+/*!
+ * Copyright ©2025 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+@use "../../theme/themeValues.scss" as *;
+
+.component {
+  font-family: var(#{$theme}#{$font}#{$family});
+  padding: 0 var(#{$theme}#{$button}#{$padding}#{$horizontal});
+  color: rgb(var(#{$theme}#{$button}#{$color}));
+  border: var(#{$theme}#{$button}#{$border});
+  border-radius: var(#{$theme}#{$button}#{$radius});
+  background: rgb(var(#{$theme}#{$button}#{$background}));
+  transition: var(#{$theme}#{$button}#{$transition});
+  height: var(#{$theme+$input+$height});
+  width: max-content;
+  cursor: pointer;
+  padding-left: var(#{$theme+$padding});
+  padding-right: var(#{$theme+$padding});
+
+  &:hover {
+    color: rgb(var(#{$theme}#{$button}#{$hover}#{$color}));
+    border: var(#{$theme}#{$button}#{$hover}#{$border});
+    border-radius: var(#{$theme}#{$button}#{$hover}#{$radius});
+    background: rgb(var(#{$theme}#{$button}#{$hover}#{$background}));
+    transition: var(#{$theme}#{$button}#{$hover}#{$transition});
+  }
+
+  &:active {
+    color: rgb(var(#{$theme}#{$button}#{$active}#{$color}));
+    border: var(#{$theme}#{$button}#{$active}#{$border});
+    border-radius: var(#{$theme}#{$button}#{$active}#{$radius});
+    background: rgb(var(#{$theme}#{$button}#{$active}#{$background}));
+    transition: var(#{$theme}#{$button}#{$active}#{$transition});
+  }
+
+  &:disabled {
+    opacity: 0.8;
+
+    color: rgb(var(#{$theme}#{$button}#{$color}));
+    border: var(#{$theme}#{$button}#{$border});
+    border-radius: var(#{$theme}#{$button}#{$radius});
+    background: rgb(var(#{$theme}#{$button}#{$background}));
+    cursor: not-allowed;
+  }
+}

package/lib/components/buttonCombo/UKButtonCombo.tsx

@@ -0,0 +1,14 @@
+/*
+ * Copyright ©2025 Ewsgit <https://ewsgit.uk> and YourDash <https://yourdash.ewsgit.uk> contributors.
+ * YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
+ */
+
+import React from "react";
+import styles from "./buttonCombo.module.scss";
+import clippy from "../../core/clippy";
+
+const UKButtonCombo: React.FC<{ children: React.ReactNode[]; className?: string }> = ({ children, className }) => {
+  return <div className={clippy(styles.component, className)}>{children}</div>;
+};
+
+export default UKButtonCombo;

package/lib/components/buttonCombo/buttonCombo.module.css

@@ -0,0 +1,22 @@
+@charset "UTF-8";
+/*!
+ * Copyright ©2025 Ewsgit <https://ewsgit.uk> and YourDash <https://yourdash.ewsgit.uk> contributors.
+ * YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
+ */
+.component {
+  display: flex;
+  flex-direction: row;
+}
+.component > *:not(:first-child):not(:last-child) {
+  border-radius: 0 !important;
+}
+.component > *:first-child {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+.component > *:last-child {
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}
+
+/*# sourceMappingURL=buttonCombo.module.css.map */

package/lib/components/buttonCombo/buttonCombo.module.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["buttonCombo.module.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAKA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA","file":"buttonCombo.module.css"}

package/lib/components/buttonCombo/buttonCombo.module.scss

@@ -0,0 +1,23 @@
+/*!
+ * Copyright ©2025 Ewsgit <https://ewsgit.uk> and YourDash <https://yourdash.ewsgit.uk> contributors.
+ * YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
+ */
+
+.component {
+  display: flex;
+  flex-direction: row;
+
+  > *:not(:first-child):not(:last-child) {
+    border-radius: 0 !important;
+  }
+
+  > *:first-child {
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+  }
+
+  > *:last-child {
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+  }
+}

package/lib/components/buttonLink/UKButtonLink.tsx

@@ -0,0 +1,27 @@
+/*
+ * Copyright ©2025 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+import clippy from "../../core/clippy.ts";
+import UKButton from "../button/UKButton.tsx";
+import { useNavigate } from "react-router";
+import styles from "./buttonLink.module.scss";
+import { FC } from "react";
+
+const UKButtonLink: FC<{ text: string; to: string; className?: string }> = (props) => {
+  const navigate = useNavigate();
+
+  return (
+    <UKButton
+      onClick={() => {
+        navigate(props.to);
+        return 0;
+      }}
+      text={props.text}
+      className={clippy(styles.component, props.className)}
+    />
+  );
+};
+
+export default UKButtonLink;

package/lib/components/buttonLink/buttonLink.module.css

@@ -0,0 +1,49 @@
+@charset "UTF-8";
+/*!
+ * Copyright ©2025 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+/*!
+ * Copyright ©2025 Ewsgit <https://ewsgit.uk> and YourDash <https://yourdash.ewsgit.uk> contributors.
+ * YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
+ */
+.component {
+  font-family: var(--utfontfam);
+  text-align: center;
+  color: var(--utbtncol);
+  border: var(--utbtnbrd);
+  border-radius: var(--utbtnrad);
+  background: var(--utbtnbgn);
+  transition: var(--utbtntrans);
+  height: var(--utinphei);
+  width: max-content;
+  cursor: pointer;
+}
+.component:hover {
+  color: var(--utbtnhvrcol);
+  border: var(--utbtnhvrbrd);
+  border-radius: var(--utbtnhvrrad);
+  background: var(--utbtnhvrbgn);
+  transition: var(--utbtnhvrtrans);
+}
+.component:active {
+  color: var(--utbtnatvcol);
+  border: var(--utbtnatvbrd);
+  border-radius: var(--utbtnatvrad);
+  background: var(--utbtnatvbgn);
+  transition: var(--utbtnatvtrans);
+}
+.component:disabled {
+  opacity: 0.8;
+  color: var(--utbtncol);
+  border: var(--utbtnbrd);
+  border-radius: var(--utbtnrad);
+  background: var(--utbtnbgn);
+  cursor: not-allowed;
+}
+
+.link {
+  display: inline;
+}
+
+/*# sourceMappingURL=buttonLink.module.css.map */

package/lib/components/buttonLink/buttonLink.module.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["buttonLink.module.scss","../../theme/themeValues.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;ADOA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EAEA;EACA;EACA;EACA;EACA;;;AAIJ;EACE","file":"buttonLink.module.css"}

package/lib/components/buttonLink/buttonLink.module.scss

@@ -0,0 +1,49 @@
+/*!
+ * Copyright ©2025 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+@use "../../theme/themeValues.scss" as *;
+
+.component {
+  font-family: var(#{$theme}#{$font}#{$family});
+  text-align: center;
+  color: rgb(var(#{$theme}#{$button}#{$color}));
+  border: var(#{$theme}#{$button}#{$border});
+  border-radius: var(#{$theme}#{$button}#{$radius});
+  background: rgb(var(#{$theme}#{$button}#{$background}));
+  transition: var(#{$theme}#{$button}#{$transition});
+  height: var(#{$theme+$input+$height});
+  width: max-content;
+  cursor: pointer;
+
+  &:hover {
+    color: rgb(var(#{$theme}#{$button}#{$hover}#{$color}));
+    border: var(#{$theme}#{$button}#{$hover}#{$border});
+    border-radius: var(#{$theme}#{$button}#{$hover}#{$radius});
+    background: rgb(var(#{$theme}#{$button}#{$hover}#{$background}));
+    transition: var(#{$theme}#{$button}#{$hover}#{$transition});
+  }
+
+  &:active {
+    color: rgb(var(#{$theme}#{$button}#{$active}#{$color}));
+    border: var(#{$theme}#{$button}#{$active}#{$border});
+    border-radius: var(#{$theme}#{$button}#{$active}#{$radius});
+    background: rgb(var(#{$theme}#{$button}#{$active}#{$background}));
+    transition: var(#{$theme}#{$button}#{$active}#{$transition});
+  }
+
+  &:disabled {
+    opacity: 0.8;
+
+    color: rgb(var(#{$theme}#{$button}#{$color}));
+    border: var(#{$theme}#{$button}#{$border});
+    border-radius: var(#{$theme}#{$button}#{$radius});
+    background: rgb(var(#{$theme}#{$button}#{$background}));
+    cursor: not-allowed;
+  }
+}
+
+.link {
+  display: inline;
+}

package/lib/components/buttonWithIcon/UKButtonWithIcon.tsx

@@ -0,0 +1,36 @@
+/*
+ * Copyright ©2025 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+import clippy from "../../core/clippy.ts";
+import UKIcon from "../icon/UKIcon.tsx";
+import styles from "./buttonWithIcon.module.scss";
+import { FC } from "react";
+import { UKIconType } from "../../core/iconDictionary.ts";
+
+const UKButtonWithIcon: FC<{
+  icon: UKIconType;
+  onClick: () => void;
+  text: string;
+  className?: string;
+  disabled?: boolean;
+}> = (props) => {
+  return (
+    <button
+      className={clippy(styles.component, props.className)}
+      onClick={props.onClick}
+      aria-label={props.text}
+      disabled={props.disabled}
+    >
+      <UKIcon
+        size={"1.25rem"}
+        className={styles.icon}
+        icon={props.icon}
+      />
+      {props.text}
+    </button>
+  );
+};
+
+export default UKButtonWithIcon;

package/lib/components/buttonWithIcon/buttonWithIcon.module.css

@@ -0,0 +1,54 @@
+@charset "UTF-8";
+/*!
+ * Copyright ©2025 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+/*!
+ * Copyright ©2025 Ewsgit <https://ewsgit.uk> and YourDash <https://yourdash.ewsgit.uk> contributors.
+ * YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
+ */
+.component {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--utfontfam);
+  text-align: center;
+  padding: 0 var(--utbtnpdnhoriz) 0 0;
+  color: var(--utbtncol);
+  border: var(--utbtnbrd);
+  border-radius: var(--utbtnrad);
+  background: var(--utbtnbgn);
+  transition: var(--utbtntrans);
+  height: var(--utinphei);
+  width: max-content;
+  cursor: pointer;
+}
+.component:hover {
+  color: var(--utbtnhvrcol);
+  border: var(--utbtnhvrbrd);
+  border-radius: var(--utbtnhvrrad);
+  background: var(--utbtnhvrbgn);
+  transition: var(--utbtnhvrtrans);
+}
+.component:active {
+  color: var(--utbtnatvcol);
+  border: var(--utbtnatvbrd);
+  border-radius: var(--utbtnatvrad);
+  background: var(--utbtnatvbgn);
+  transition: var(--utbtnatvtrans);
+}
+.component:disabled {
+  opacity: 0.8;
+  color: var(--utbtncol);
+  border: var(--utbtnbrd);
+  border-radius: var(--utbtnrad);
+  background: var(--utbtnbgn);
+  cursor: not-allowed;
+}
+
+.icon {
+  margin-left: var(--utbtnpdnhoriz);
+  margin-right: var(--utbtnpdnhoriz);
+}
+
+/*# sourceMappingURL=buttonWithIcon.module.css.map */

package/lib/components/buttonWithIcon/buttonWithIcon.module.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["buttonWithIcon.module.scss","../../theme/themeValues.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;ADOA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EAEA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA","file":"buttonWithIcon.module.css"}

package/lib/components/buttonWithIcon/buttonWithIcon.module.scss

@@ -0,0 +1,54 @@
+/*!
+ * Copyright ©2025 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+@use "../../theme/themeValues.scss" as *;
+
+.component {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(#{$theme}#{$font}#{$family});
+  text-align: center;
+  padding: 0 var(#{$theme}#{$button}#{$padding}#{$horizontal}) 0 0;
+  color: rgb(var(#{$theme}#{$button}#{$color}));
+  border: var(#{$theme}#{$button}#{$border});
+  border-radius: var(#{$theme}#{$button}#{$radius});
+  background: rgb(var(#{$theme}#{$button}#{$background}));
+  transition: var(#{$theme}#{$button}#{$transition});
+  height: var(#{$theme+$input+$height});
+  width: max-content;
+  cursor: pointer;
+
+  &:hover {
+    color: rgb(var(#{$theme}#{$button}#{$hover}#{$color}));
+    border: var(#{$theme}#{$button}#{$hover}#{$border});
+    border-radius: var(#{$theme}#{$button}#{$hover}#{$radius});
+    background: rgb(var(#{$theme}#{$button}#{$hover}#{$background}));
+    transition: var(#{$theme}#{$button}#{$hover}#{$transition});
+  }
+
+  &:active {
+    color: rgb(var(#{$theme}#{$button}#{$active}#{$color}));
+    border: var(#{$theme}#{$button}#{$active}#{$border});
+    border-radius: var(#{$theme}#{$button}#{$active}#{$radius});
+    background: rgb(var(#{$theme}#{$button}#{$active}#{$background}));
+    transition: var(#{$theme}#{$button}#{$active}#{$transition});
+  }
+
+  &:disabled {
+    opacity: 0.8;
+
+    color: rgb(var(#{$theme}#{$button}#{$color}));
+    border: var(#{$theme}#{$button}#{$border});
+    border-radius: var(#{$theme}#{$button}#{$radius});
+    background: rgb(var(#{$theme}#{$button}#{$background}));
+    cursor: not-allowed;
+  }
+}
+
+.icon {
+  margin-left: var(#{$theme}#{$button}#{$padding}#{$horizontal});
+  margin-right: var(#{$theme}#{$button}#{$padding}#{$horizontal});
+}

package/lib/components/card/UKCard.tsx

@@ -0,0 +1,64 @@
+/*
+ * Copyright ©2025 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+import clippy from "../../core/clippy.ts";
+import IncrementLevel from "../../core/incrementLevel.tsx";
+import { useLevel, useLevelClass } from "../../core/level.tsx";
+import UKBox from "../box/UKBox.tsx";
+import styles from "./card.module.scss";
+import React, { FC } from "react";
+import DecrementLevel from "../../core/decrementLevel.tsx";
+
+const UKCard: FC<{
+  level?: 0 | 1 | 2 | 3;
+  containerClassName?: string;
+  onClick?: () => void;
+  className?: string;
+  actionsClassName?: string;
+  headerClassName?: string;
+  children: React.ReactNode | React.ReactNode[];
+  actions?: React.ReactNode | React.ReactNode[];
+  header?: React.ReactNode | React.ReactNode[];
+  style?: React.CSSProperties;
+}> = (props) => {
+  const level = props.level || useLevel();
+
+  if (props.onClick) {
+    return (
+      <>
+        <IncrementLevel>
+          <button
+            style={props.style}
+            className={clippy(styles.component, useLevelClass(level), props.containerClassName, styles.clickable)}
+            onClick={props.onClick}
+          >
+            {props.header && <UKBox className={clippy(styles.header, props.headerClassName)}>{props.header}</UKBox>}
+            <div className={clippy(styles.content, props.className)}>{props.children}</div>
+            {props.actions && <UKBox className={clippy(styles.actions, props.actionsClassName)}>{props.actions}</UKBox>}
+          </button>
+        </IncrementLevel>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <IncrementLevel>
+        <div
+          style={props.style}
+          className={clippy(styles.component, useLevelClass(level), props.containerClassName)}
+        >
+          {props.header && <UKBox className={clippy(styles.header, props.headerClassName)}>{props.header}</UKBox>}
+          <div className={clippy(styles.content, props.className)}>{props.children}</div>
+          <DecrementLevel>
+            {props.actions && <UKBox className={clippy(styles.actions, props.actionsClassName)}>{props.actions}</UKBox>}
+          </DecrementLevel>
+        </div>
+      </IncrementLevel>
+    </>
+  );
+};
+
+export default UKCard;

package/lib/components/card/card.module.css

@@ -0,0 +1,76 @@
+@charset "UTF-8";
+/*!
+ * Copyright ©2025 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+/*!
+ * Copyright ©2025 Ewsgit <https://ewsgit.uk> and YourDash <https://yourdash.ewsgit.uk> contributors.
+ * YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
+ */
+.component {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  font-weight: var(--utfontwgt);
+  font-size: var(--utfontsize);
+  font-family: var(--utfontfam);
+  background: var(--utbgn);
+  color: var(--utcol);
+  border: var(--utbrd);
+  padding: 0;
+  border-radius: var(--utrad);
+  overflow: hidden;
+}
+
+.clickable {
+  display: flex;
+  width: 100%;
+  cursor: pointer;
+  color: var(--utbtncol);
+  background: var(--utbtnbgn);
+  border: var(--utbtnbrd);
+  font-size: var(--utbtnfontsize);
+  font-weight: var(--utbtnfontwgt);
+  border-radius: var(--utbtnrad);
+  transition: var(--utbtntrans);
+}
+.clickable:hover {
+  color: var(--utbtnhvrcol);
+  background: var(--utbtnhvrbgn);
+  border: var(--utbtnhvrbrd);
+  border-radius: var(--utbtnhvrrad);
+  transition: var(--utbtnhvrtrans);
+}
+.clickable:active {
+  color: var(--utbtnatvcol);
+  background: var(--utbtnatvbgn);
+  border: var(--utbtnatvbrd);
+  border-radius: var(--utbtnatvrad);
+  transition: var(--utbtnatvtrans);
+}
+
+.header {
+  border-left: none;
+  border-right: none;
+  border-top: none;
+  width: 100%;
+}
+
+.actions {
+  border: none;
+  display: flex;
+  align-items: flex-end;
+  width: 100%;
+  background: transparent;
+}
+
+.content {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--utgap);
+  padding: var(--utpdn);
+  height: 100%;
+}
+
+/*# sourceMappingURL=card.module.css.map */

package/lib/components/card/card.module.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["card.module.scss","../../theme/themeValues.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;ADOA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EAIA","file":"card.module.css"}

package/lib/components/card/card.module.scss

@@ -0,0 +1,78 @@
+/*!
+ * Copyright ©2025 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+@use "../../theme/themeValues.scss" as *;
+
+.component {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  font-weight: var(#{$theme+$font+$weight});
+  font-size: var(#{$theme+$font+$size});
+  font-family: var(#{$theme+$font+$family});
+  background: rgb(var(#{$theme+$background}));
+  color: rgb(var(#{$theme+$color}));
+  border: var(#{$theme+$border});
+  padding: 0;
+  border-radius: var(#{$theme+$radius});
+  overflow: hidden;
+}
+
+.clickable {
+  display: flex;
+  width: 100%;
+  cursor: pointer;
+
+  color: rgb(var(#{$theme+$button+$color}));
+  background: rgb(var(#{$theme+$button+$background}));
+  border: var(#{$theme+$button+$border});
+  font-size: var(#{$theme+$button+$font+$size});
+  font-weight: var(#{$theme+$button+$font+$weight});
+  border-radius: var(#{$theme+$button+$radius});
+  transition:  var(#{$theme+$button+$transition});
+
+  &:hover {
+    color: rgb(var(#{$theme+$button+$hover+$color}));
+    background: rgb(var(#{$theme+$button+$hover+$background}));
+    border: var(#{$theme+$button+$hover+$border});
+    border-radius: var(#{$theme+$button+$hover+$radius});
+    transition: var(#{$theme+$button+$hover+$transition});
+  }
+
+  &:active {
+    color: rgb(var(#{$theme+$button+$active+$color}));
+    background: rgb(var(#{$theme+$button+$active+$background}));
+    border: var(#{$theme+$button+$active+$border});
+    border-radius: var(#{$theme+$button+$active+$radius});
+    transition: var(#{$theme+$button+$active+$transition});
+  }
+}
+
+.header {
+  border-left: none;
+  border-right: none;
+  border-top: none;
+  width: 100%;
+}
+
+.actions {
+  border: none;
+  display: flex;
+  align-items: flex-end;
+  width: 100%;
+  background: transparent;
+}
+
+.content {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(#{$theme+$gap});
+  padding: var(#{$theme+$padding});
+  // dont remember why this was here but it might be needed again
+  //padding-top: var(#{$theme+$gap});
+  //padding-bottom: var(#{$theme+$gap});
+  height: 100%;
+}

package/lib/components/container/UKContainer.tsx

@@ -0,0 +1,24 @@
+/*
+ * Copyright ©2025 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+import clippy from "../../core/clippy.ts";
+import { FC, ReactNode } from "react";
+import IncrementLevel from "../../core/incrementLevel.tsx";
+import { useLevel, useLevelClass } from "../../core/level.tsx";
+import styles from "./container.module.scss";
+
+const UKContainer: FC<{ className?: string; level?: 0 | 1 | 2 | 3; children: ReactNode | ReactNode[]; disableRounding?: boolean }> = (
+  props,
+) => {
+  const level = props.level || useLevel();
+
+  return (
+    <div className={clippy(styles.component, props.className, props.disableRounding && styles.disableRounding, useLevelClass(level))}>
+      <IncrementLevel>{props.children}</IncrementLevel>
+    </div>
+  );
+};
+
+export default UKContainer;

package/lib/components/container/container.module.css

@@ -0,0 +1,23 @@
+@charset "UTF-8";
+/*!
+ * Copyright ©2025 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+/*!
+ * Copyright ©2025 Ewsgit <https://ewsgit.uk> and YourDash <https://yourdash.ewsgit.uk> contributors.
+ * YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
+ */
+.component {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  font-weight: var(--utfontwgt);
+  font-size: var(--utfontsize);
+  font-family: var(--utfontfam);
+  background: var(--utbgn);
+  padding: var(--utpdn);
+  border-radius: 0;
+  gap: var(--utgap);
+}
+
+/*# sourceMappingURL=container.module.css.map */

package/lib/components/container/container.module.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["container.module.scss","../../theme/themeValues.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;ADOA;EACE;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA","file":"container.module.css"}