@teach-in/react 0.1.0 → 0.2.0

package/dist/index.js

@@ -36,6 +36,7 @@ __export(index_exports, {
   Autocomplete: () => Autocomplete,
   AutocompleteField: () => AutocompleteField,
   Avatar: () => Avatar,
+  Bento: () => Bento,
   Body: () => Body,
   Button: () => Button,
   Checkbox: () => Checkbox,
@@ -57,6 +58,7 @@ __export(index_exports, {
   FormatPercent: () => Percent,
   FormatPlural: () => Plural,
   FormatTime: () => Time,
+  Grid: () => Grid,
   Header: () => Header,
   Input: () => Input,
   InputField: () => InputField,
@@ -84,8 +86,10 @@ __export(index_exports, {
   Title: () => Title,
   Tooltip: () => Tooltip,
   UIProvider: () => UIProvider,
+  bento: () => bento,
   breakpoints: () => breakpoints,
-  cn: () => cn
+  cn: () => cn,
+  theme: () => theme
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -96,11 +100,8 @@ var import_system = require("@heroui/system");
 var import_jsx_runtime = require("react/jsx-runtime");
 var BaseButton = (0, import_system.extendVariants)(import_button.Button, {
   variants: {
-    color: {
-      primary: "bg-primary-400"
-    },
     size: {
-      lg: "min-w-20 h-14 text-base gap-2 px-6"
+      lg: "px-6 min-w-20 h-14 text-base gap-2 rounded-large"
     }
   },
   defaultVariants: {
@@ -108,7 +109,14 @@ var BaseButton = (0, import_system.extendVariants)(import_button.Button, {
   }
 });
 var Button = import_react.default.forwardRef((props, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseButton, { ref, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    BaseButton,
+    {
+      ref,
+      className: props.variant === "flat" && props.color === "default" ? "bg-default-flat/25 !text-default-800" : props.className,
+      ...props
+    }
+  );
 });
 Button.displayName = "TeachInUI.Button";
 
@@ -124,6 +132,7 @@ Avatar.displayName = "TeachInUI.Avatar";
 // src/ui/data/pagination/pagination.tsx
 var import_react3 = __toESM(require("react"));
 var import_pagination = require("@heroui/pagination");
+var import_pagination2 = require("@heroui/pagination");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var Pagination = import_react3.default.forwardRef(({ pages, ...props }, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_pagination.Pagination, { ref, isCompact: true, showControls: true, showShadow: true, total: pages, ...props });
@@ -152,11 +161,9 @@ Chip.displayName = "TeachInUI.Chip";
 var import_react6 = __toESM(require("react"));
 var import_spinner = require("@heroui/spinner");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var Spinner = import_react6.default.forwardRef(
-  ({ label = "\u0418\u0434\u0451\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u043A\u0430...", ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_spinner.Spinner, { ref, label, ...props });
-  }
-);
+var Spinner = import_react6.default.forwardRef((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_spinner.Spinner, { ref, ...props });
+});
 Spinner.displayName = "TeachInUI.Spinner";
 
 // src/ui/feedback/tooltip/tooltip.tsx
@@ -165,7 +172,7 @@ var import_tooltip = require("@heroui/tooltip");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var Tooltip = import_react7.default.forwardRef(
   ({ placement = "bottom", ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_tooltip.Tooltip, { ref, palacement: placement, ...props });
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_tooltip.Tooltip, { ref, placement, ...props });
   }
 );
 Tooltip.displayName = "TeachInUI.Tooltip";
@@ -479,11 +486,12 @@ Form.displayName = "TeachInUI.Form";
 // src/ui/format/datetime.tsx
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var defaultFormat = {
-  day: "2-digit",
-  month: "2-digit",
+  day: "numeric",
+  month: "long",
   year: "numeric",
   hour: "2-digit",
-  minute: "2-digit"
+  minute: "2-digit",
+  second: "2-digit"
 };
 function Datetime({
   value,
@@ -502,8 +510,8 @@ Datetime.displayName = "TeachInUI.FormatDatetime";
 // src/ui/format/date.tsx
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var defaultFormat2 = {
-  day: "2-digit",
-  month: "2-digit",
+  day: "numeric",
+  month: "long",
   year: "numeric"
 };
 function DateFormat({
@@ -655,15 +663,59 @@ function Boolean({
 }
 Boolean.displayName = "TeachInUI.FormatBoolean";
 
-// src/ui/layout/container.tsx
-var import_react_slot = require("@radix-ui/react-slot");
+// src/ui/surface/bento/bento.tsx
 var import_tailwind_variants = require("tailwind-variants");
 var import_jsx_runtime36 = require("react/jsx-runtime");
-var variants = (0, import_tailwind_variants.tv)({
+var bento = (0, import_tailwind_variants.tv)({
+  base: "rounded-xl p-6 transition-colors",
+  variants: {
+    color: {
+      default: "bg-default-50 text-default-700",
+      primary: "bg-primary-50 text-primary-700",
+      secondary: "bg-secondary-50 text-secondary-700",
+      success: "bg-success-50 text-success-700",
+      warning: "bg-warning-50 text-warning-700",
+      danger: "bg-danger-50 text-danger-700"
+    },
+    radius: {
+      none: "rounded-none",
+      sm: "rounded-md",
+      md: "rounded-lg",
+      lg: "rounded-xl",
+      full: "rounded-full"
+    },
+    shadow: {
+      none: "",
+      sm: "shadow-small",
+      md: "shadow-medium",
+      lg: "shadow-large"
+    },
+    bordered: {
+      false: "",
+      true: "border border-default-200"
+    }
+  },
+  defaultVariants: {
+    color: "default",
+    radius: "lg",
+    shadow: "none",
+    bordered: false
+  }
+});
+var Bento = ({ className, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: bento({ ...props, className }), ...props });
+};
+Bento.displayName = "TeachInUI.Bento";
+
+// src/ui/layout/container/container.tsx
+var import_react_slot = require("@radix-ui/react-slot");
+var import_tailwind_variants2 = require("tailwind-variants");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var variants = (0, import_tailwind_variants2.tv)({
   base: "w-full mx-auto px-6",
   variants: {
     size: {
-      xs: "max-w-screen-xs",
+      xs: "max-w-xs",
       sm: "max-w-screen-sm",
       md: "max-w-screen-md",
       lg: "max-w-screen-lg",
@@ -678,58 +730,58 @@ var variants = (0, import_tailwind_variants.tv)({
 });
 var Container = ({ children, asChild = false, className, size, ...props }) => {
   const Comp = asChild ? import_react_slot.Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Comp, { className: cn(variants({ size }), className), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Comp, { className: cn(variants({ size }), className), ...props, children });
 };
 Container.displayName = "TeachInUI.Container";
 
 // src/ui/layout/page/breadcrumbs.tsx
 var import_breadcrumbs = require("@heroui/breadcrumbs");
-var import_jsx_runtime37 = require("react/jsx-runtime");
-var Breadcrumbs = ({ items }) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_breadcrumbs.Breadcrumbs, { children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_breadcrumbs.BreadcrumbItem, { href: item.href, isDisabled: item.href === void 0, children: item.label }, item.label)) });
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var Breadcrumbs = ({ items }) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_breadcrumbs.Breadcrumbs, { children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_breadcrumbs.BreadcrumbItem, { href: item.href, isDisabled: item.href === void 0, children: item.label }, item.label)) });
 
 // src/ui/layout/page/page-content.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var Root = ({
   children,
   breadcrumbs = []
-}) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-col gap-6", children: [
-  breadcrumbs.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Breadcrumbs, { items: breadcrumbs }),
+}) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex flex-col gap-6", children: [
+  breadcrumbs.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Breadcrumbs, { items: breadcrumbs }),
   children
 ] });
 Root.displayName = "TeachInUI.PageContent.Root";
-var Header = ({ children, ...others }) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("header", { className: "flex items-center justify-between gap-4", role: "banner", ...others, children });
+var Header = ({ children, ...others }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("header", { className: "flex items-center justify-between gap-4", role: "banner", ...others, children });
 Header.displayName = "TeachInUI.PageContent.Header";
 var Title = ({
   children,
   ...others
-}) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h1", { className: "text-4xl leading-10 font-bold", ...others, children });
+}) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("h1", { className: "text-4xl leading-10 font-bold", ...others, children });
 Title.displayName = "TeachInUI.PageContent.Title";
 var Actions = ({
   children,
   ...others
-}) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "flex gap-2", role: "group", ...others, children });
+}) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex gap-2", role: "group", ...others, children });
 Actions.displayName = "TeachInUI.PageContent.Actions";
-var Body = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "flex flex-col gap-6", children });
+var Body = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex flex-col gap-6", children });
 Body.displayName = "TeachInUI.PageContent.Body";
 var Section = ({
   children,
   ...others
-}) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("section", { className: "flex flex-col gap-4", ...others, children });
+}) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("section", { className: "flex flex-col gap-4", ...others, children });
 Section.displayName = "TeachInUI.PageContent.Section";
 var SectionHeader = ({
   children,
   ...others
-}) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "flex items-center justify-between", ...others, children });
+}) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex items-center justify-between", ...others, children });
 SectionHeader.displayName = "TeachInUI.PageContent.SectionHeader";
 var SectionTitle = ({
   children,
   ...others
-}) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h2", { className: "text-3xl leading-9 font-bold", ...others, children });
+}) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("h2", { className: "text-3xl leading-9 font-bold", ...others, children });
 SectionTitle.displayName = "TeachInUI.PageContent.SectionTitle";
 var SectionActions = ({
   children,
   ...others
-}) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "flex gap-2", role: "group", ...others, children });
+}) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex gap-2", role: "group", ...others, children });
 SectionActions.displayName = "TeachInUI.PageContent.SectionActions";
 var PageContent = {
   Root,
@@ -744,19 +796,19 @@ var PageContent = {
 };
 
 // src/ui/layout/page/page-loading.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
-var PageLoading = () => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex h-screen items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Spinner, {}) });
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var PageLoading = () => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex h-screen items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Spinner, {}) });
 PageLoading.displayName = "TeachInUI.PageLoading";
 
 // src/ui/layout/page/section-loading.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
-var SectionLoading = () => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex min-h-[400px] items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Spinner, {}) });
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var SectionLoading = () => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex min-h-[400px] items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Spinner, {}) });
 SectionLoading.displayName = "TeachInUI.SectionLoading";
 
-// src/ui/layout/flex.tsx
-var import_tailwind_variants2 = require("tailwind-variants");
-var import_jsx_runtime41 = require("react/jsx-runtime");
-var variants2 = (0, import_tailwind_variants2.tv)({
+// src/ui/layout/flex/flex.tsx
+var import_tailwind_variants3 = require("tailwind-variants");
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var variants2 = (0, import_tailwind_variants3.tv)({
   base: "flex",
   variants: {
     direction: {
@@ -803,44 +855,100 @@ var variants2 = (0, import_tailwind_variants2.tv)({
   }
 });
 var Flex = ({ className, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: variants2({ ...props, className }), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: variants2({ ...props, className }), ...props });
 };
 Flex.displayName = "TeachInUI.Flex";
 
+// src/ui/layout/grid/grid.tsx
+var import_tailwind_variants4 = require("tailwind-variants");
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var variants3 = (0, import_tailwind_variants4.tv)({
+  base: "grid",
+  variants: {
+    columns: {
+      1: "grid-cols-1",
+      2: "grid-cols-2",
+      3: "grid-cols-3",
+      4: "grid-cols-4",
+      6: "grid-cols-6",
+      12: "grid-cols-12"
+    },
+    gap: {
+      0: "gap-0",
+      1: "gap-1",
+      2: "gap-2",
+      4: "gap-4",
+      6: "gap-6",
+      8: "gap-8"
+    },
+    align: {
+      start: "items-start",
+      center: "items-center",
+      end: "items-end",
+      stretch: "items-stretch"
+    },
+    justify: {
+      start: "justify-start",
+      center: "justify-center",
+      end: "justify-end",
+      between: "justify-between",
+      around: "justify-around",
+      evenly: "justify-evenly"
+    },
+    flow: {
+      row: "grid-flow-row",
+      col: "grid-flow-col",
+      "row-dense": "grid-flow-row-dense",
+      "col-dense": "grid-flow-col-dense"
+    }
+  },
+  defaultVariants: {
+    columns: 3,
+    gap: 4,
+    align: "stretch",
+    justify: "start",
+    flow: "row"
+  }
+});
+var Grid = ({ className, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: variants3({ ...props, className }), ...props });
+};
+Grid.displayName = "TeachInUI.Grid";
+
 // src/ui/navigation/link/link.tsx
 var import_link = require("@heroui/link");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function Link({ children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_link.Link, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_link.Link, { ...props, children });
 }
 Link.displayName = "TeachInUI.Link";
 
 // src/ui/overlays/modal/modal.tsx
 var import_modal = require("@heroui/modal");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 function Root2({
   size = "md",
   placement = "center",
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_modal.Modal, { placement, size, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_modal.Modal, { placement, size, ...props, children });
 }
 Root2.displayName = "TeachInUI.Modal.Root";
 function Content({ children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_modal.ModalContent, { ...props, children: (onClose) => typeof children === "function" ? children(onClose) : children });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_modal.ModalContent, { ...props, children: (onClose) => typeof children === "function" ? children(onClose) : children });
 }
 Content.displayName = "TeachInUI.Modal.Content";
 function Header2({ children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_modal.ModalHeader, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_modal.ModalHeader, { ...props, children });
 }
 Header2.displayName = "TeachInUI.Modal.Header";
 function Body2({ children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_modal.ModalBody, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_modal.ModalBody, { ...props, children });
 }
 Body2.displayName = "TeachInUI.Modal.Body";
 function Footer({ children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_modal.ModalFooter, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_modal.ModalFooter, { ...props, children });
 }
 Footer.displayName = "TeachInUI.Modal.Footer";
 var Modal = {
@@ -853,14 +961,14 @@ var Modal = {
 
 // src/ui/provider/ui-provider.tsx
 var import_system2 = require("@heroui/system");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function UIProvider({
   children,
   locale = "ru-RU",
   labelPlacement = "outside",
   navigate
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_system2.HeroUIProvider, { labelPlacement, locale, navigate, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_system2.HeroUIProvider, { labelPlacement, locale, navigate, children });
 }
 
 // src/ui/style/css.ts
@@ -879,6 +987,366 @@ var breakpoints = {
   xl: 1280,
   "2xl": 1536
 };
+
+// src/ui/theme/theme.ts
+var import_theme = require("@heroui/theme");
+
+// src/ui/theme/colors/blue.ts
+var blue = {
+  50: "#f5f7fd",
+  100: "#dfe8fb",
+  200: "#b5c8f6",
+  300: "#80a2f1",
+  400: "#2e66e8",
+  500: "#2552ba",
+  600: "#1c3d8c",
+  700: "#173274",
+  800: "#0d1f45",
+  900: "#070f22"
+};
+
+// src/ui/theme/colors/green.ts
+var green = {
+  50: "#f2fbf6",
+  100: "#d9f2e3",
+  200: "#a3e0bb",
+  300: "#66cb8e",
+  400: "#00a843",
+  500: "#008636",
+  600: "#006528",
+  700: "#005421",
+  800: "#002f13",
+  900: "#00190a"
+};
+
+// src/ui/theme/colors/pink.ts
+var pink = {
+  50: "#fef8ff",
+  100: "#fce9ff",
+  200: "#f8c6ff",
+  300: "#f4a8ff",
+  400: "#ed6aff",
+  500: "#c759d6",
+  600: "#9844a3",
+  700: "#7b3785",
+  800: "#47204d",
+  900: "#2b132e"
+};
+
+// src/ui/theme/colors/purple.ts
+var purple = {
+  50: "#faf6fe",
+  100: "#efe5fd",
+  200: "#d6bcfa",
+  300: "#b88bf6",
+  400: "#9350f2",
+  500: "#7b43cb",
+  600: "#5e339b",
+  700: "#4c2a7e",
+  800: "#2c1849",
+  900: "#1a0e2c"
+};
+
+// src/ui/theme/colors/red.ts
+var red = {
+  50: "#fdf4f3",
+  100: "#f8dfdb",
+  200: "#eeb2a9",
+  300: "#e37f70",
+  400: "#d02a11",
+  500: "#a6220e",
+  600: "#7d190a",
+  700: "#681509",
+  800: "#3a0c05",
+  900: "#1f0603"
+};
+
+// src/ui/theme/colors/shipgray.ts
+var shipgray = {
+  50: "#f8f8fa",
+  100: "#f4f4f8",
+  200: "#cfcdde",
+  300: "#acaac7",
+  400: "#7571a2",
+  500: "#5e5a82",
+  600: "#464461",
+  700: "#232231",
+  800: "#1a1923",
+  900: "#121118"
+};
+
+// src/ui/theme/colors/yellow.ts
+var yellow = {
+  50: "#fffcec",
+  100: "#fff2ab",
+  200: "#ffe66e",
+  300: "#ffd739",
+  400: "#f5c20f",
+  500: "#daa800",
+  600: "#b38700",
+  700: "#836100",
+  800: "#4c3800",
+  900: "#171200"
+};
+
+// src/ui/theme/colors/cyan.ts
+var cyan = {
+  50: "#f4fdfe",
+  100: "#ddf9fd",
+  200: "#a9effb",
+  300: "#69e3f8",
+  400: "#1cd5f4",
+  500: "#18b3cd",
+  600: "#12889c",
+  700: "#0f6f7f",
+  800: "#084049",
+  900: "#05262c"
+};
+
+// src/ui/theme/colors/zinc.ts
+var zinc = {
+  "50": "#fafafa",
+  "100": "#f4f4f5",
+  "200": "#e4e4e7",
+  "300": "#d4d4d8",
+  "400": "#a1a1aa",
+  "500": "#71717a",
+  "600": "#52525b",
+  "700": "#3f3f46",
+  "800": "#27272a",
+  "900": "#18181b"
+};
+
+// src/ui/theme/colors/common.ts
+var commonColors = {
+  white: "#ffffff",
+  black: "#111016",
+  blue,
+  green,
+  pink,
+  purple,
+  red,
+  shipgray,
+  yellow,
+  cyan,
+  zinc
+};
+
+// src/ui/theme/swap-color-values.ts
+function swapColorValues(colors2) {
+  const swappedColors = {};
+  const keys = Object.keys(colors2);
+  const length = keys.length;
+  for (let i = 0; i < length / 2; i++) {
+    const key1 = keys[i];
+    const key2 = keys[length - 1 - i];
+    swappedColors[key1] = colors2[key2];
+    swappedColors[key2] = colors2[key1];
+  }
+  if (length % 2 !== 0) {
+    const middleKey = keys[Math.floor(length / 2)];
+    swappedColors[middleKey] = colors2[middleKey];
+  }
+  return swappedColors;
+}
+
+// src/ui/theme/colors/semantic.ts
+var base = {
+  light: {
+    background: {
+      DEFAULT: commonColors.white
+    },
+    foreground: {
+      ...commonColors.shipgray,
+      DEFAULT: commonColors.shipgray[800]
+    },
+    divider: {
+      DEFAULT: "rgba(17, 17, 6, 0.15)"
+    },
+    focus: {
+      DEFAULT: commonColors.blue[400]
+    },
+    overlay: {
+      DEFAULT: "#1110164c"
+    },
+    content1: {
+      DEFAULT: commonColors.shipgray[50],
+      foreground: commonColors.shipgray[900]
+    },
+    content2: {
+      DEFAULT: commonColors.shipgray[100],
+      foreground: commonColors.shipgray[800]
+    },
+    content3: {
+      DEFAULT: commonColors.shipgray[200],
+      foreground: commonColors.shipgray[700]
+    },
+    content4: {
+      DEFAULT: commonColors.shipgray[300],
+      foreground: commonColors.shipgray[600]
+    }
+  },
+  dark: {
+    background: {
+      DEFAULT: commonColors.black
+    },
+    foreground: {
+      ...swapColorValues(commonColors.shipgray),
+      DEFAULT: commonColors.shipgray[50]
+    },
+    focus: {
+      DEFAULT: commonColors.blue[500]
+    },
+    overlay: {
+      DEFAULT: "#1110164C"
+    },
+    divider: {
+      DEFAULT: "rgba(255, 255, 255, 0.15)"
+    },
+    content1: {
+      DEFAULT: commonColors.shipgray[800],
+      foreground: commonColors.shipgray[50]
+    },
+    content2: {
+      DEFAULT: commonColors.shipgray[700],
+      foreground: commonColors.shipgray[100]
+    },
+    content3: {
+      DEFAULT: commonColors.shipgray[600],
+      foreground: commonColors.shipgray[200]
+    },
+    content4: {
+      DEFAULT: commonColors.shipgray[500],
+      foreground: commonColors.shipgray[300]
+    }
+  }
+};
+var themeColorsLight = {
+  ...base.light,
+  default: {
+    ...commonColors.shipgray,
+    foreground: commonColors.black,
+    flat: commonColors.shipgray[300],
+    DEFAULT: commonColors.shipgray[100]
+  },
+  primary: {
+    ...commonColors.blue,
+    foreground: commonColors.white,
+    flat: commonColors.blue[500],
+    DEFAULT: commonColors.blue[400]
+  },
+  secondary: {
+    ...commonColors.purple,
+    foreground: commonColors.white,
+    flat: commonColors.purple[500],
+    DEFAULT: commonColors.purple[400]
+  },
+  success: {
+    ...commonColors.green,
+    foreground: commonColors.black,
+    flat: commonColors.green[500],
+    DEFAULT: commonColors.green[400]
+  },
+  warning: {
+    ...commonColors.yellow,
+    foreground: commonColors.black,
+    flat: commonColors.yellow[500],
+    DEFAULT: commonColors.yellow[500]
+  },
+  danger: {
+    ...commonColors.red,
+    foreground: commonColors.white,
+    flat: commonColors.red[500],
+    DEFAULT: commonColors.red[400]
+  }
+};
+var themeColorsDark = {
+  ...base.dark,
+  default: {
+    ...swapColorValues(commonColors.shipgray),
+    foreground: commonColors.white,
+    flat: commonColors.shipgray[600],
+    DEFAULT: commonColors.shipgray[700]
+  },
+  primary: {
+    ...swapColorValues(commonColors.blue),
+    foreground: commonColors.blue[500],
+    flat: commonColors.blue[500],
+    DEFAULT: commonColors.blue[500]
+  },
+  secondary: {
+    ...swapColorValues(commonColors.purple),
+    foreground: commonColors.white,
+    flat: commonColors.purple[400],
+    DEFAULT: commonColors.purple[400]
+  },
+  success: {
+    ...swapColorValues(commonColors.green),
+    foreground: commonColors.black,
+    flat: commonColors.green[500],
+    DEFAULT: commonColors.green[500]
+  },
+  warning: {
+    ...swapColorValues(commonColors.yellow),
+    foreground: commonColors.black,
+    flat: commonColors.yellow[500],
+    DEFAULT: commonColors.yellow[500]
+  },
+  danger: {
+    ...swapColorValues(commonColors.red),
+    foreground: commonColors.white,
+    flat: commonColors.red[500],
+    DEFAULT: commonColors.red[500]
+  }
+};
+var semanticColors = {
+  light: themeColorsLight,
+  dark: themeColorsDark
+};
+
+// src/ui/theme/colors/index.ts
+var colors = {
+  ...commonColors,
+  ...semanticColors
+};
+
+// src/ui/theme/theme.ts
+var theme = (0, import_theme.heroui)({
+  layout: {
+    dividerWeight: "0.0625rem",
+    disabledOpacity: ".5",
+    fontSize: {
+      tiny: "0.75rem",
+      small: "0.875rem",
+      medium: "1rem",
+      large: "1.125rem"
+    },
+    lineHeight: {
+      tiny: "1rem",
+      small: "1.25rem",
+      medium: "1.5rem",
+      large: "1.75rem"
+    },
+    radius: {
+      small: "0.5rem",
+      medium: "0.75rem",
+      large: "1rem"
+    },
+    borderWidth: {
+      small: "0.0625rem",
+      medium: "0.125rem",
+      large: "0.1875rem"
+    }
+  },
+  themes: {
+    light: {
+      colors: semanticColors.light
+    },
+    dark: {
+      colors: semanticColors.dark
+    }
+  }
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Actions,
@@ -886,6 +1354,7 @@ var breakpoints = {
   Autocomplete,
   AutocompleteField,
   Avatar,
+  Bento,
   Body,
   Button,
   Checkbox,
@@ -907,6 +1376,7 @@ var breakpoints = {
   FormatPercent,
   FormatPlural,
   FormatTime,
+  Grid,
   Header,
   Input,
   InputField,
@@ -934,6 +1404,8 @@ var breakpoints = {
   Title,
   Tooltip,
   UIProvider,
+  bento,
   breakpoints,
-  cn
+  cn,
+  theme
 });