@bunnix/components 0.9.0

package/src/icons/star.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.0767 4.21969C11.4183 3.39839 12.5817 3.39839 12.9233 4.21968L14.7812 8.68645L19.6034 9.07305C20.4901 9.14413 20.8496 10.2506 20.174 10.8293L16.5 13.9765L17.6225 18.6822C17.8289 19.5474 16.8876 20.2313 16.1285 19.7676L12 17.246L7.87148 19.7676C7.11238 20.2313 6.17113 19.5474 6.37752 18.6822L7.5 13.9765L3.82596 10.8293C3.15042 10.2506 3.50994 9.14413 4.3966 9.07305L9.21885 8.68645L11.0767 4.21969Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/icons/storage.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 9V5C5 3.89543 5.89543 3 7 3H17C18.1046 3 19 3.89543 19 5V9M5 9H19M5 9V15M19 9V15M19 15V19C19 20.1046 18.1046 21 17 21H7C5.89543 21 5 20.1046 5 19V15M19 15H5M8 12H8.01M8 6H8.01M8 18H8.01"></path></svg>

package/src/icons/success-circle.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 9L10 15.5L7.5 13M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/icons/swap.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 19L3 16M3 16L6 13M3 16H11C12.6569 16 14 14.6569 14 13V12M10 12V11C10 9.34315 11.3431 8 13 8H21M21 8L18 11M21 8L18 5"></path></svg>

package/src/icons/switch.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path d="M5.22 14.78a.75.75 0 0 0 1.06-1.06L4.56 12h8.69a.75.75 0 0 0 0-1.5H4.56l1.72-1.72a.75.75 0 0 0-1.06-1.06l-3 3a.75.75 0 0 0 0 1.06l3 3Zm5.56-6.5a.75.75 0 1 1-1.06-1.06l1.72-1.72H2.75a.75.75 0 0 1 0-1.5h8.69L9.72 2.28a.75.75 0 0 1 1.06-1.06l3 3a.75.75 0 0 1 0 1.06l-3 3Z"></path></svg>

package/src/icons/sync.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.5249 9.46C18.8317 10.2474 19 11.1041 19 12C19 15.866 15.866 19 12 19H9M5.47507 14.54C5.16832 13.7526 5 12.8959 5 12C5 8.13401 8.13401 5 12 5H15M15 5L12 2M15 5L12 8M9 19L12 16M9 19L12 22" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/icons/table.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 4V20M4 9H20M6 20H18C19.1046 20 20 19.1046 20 18V6C20 4.89543 19.1046 4 18 4H6C4.89543 4 4 4.89543 4 6V18C4 19.1046 4.89543 20 6 20Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/icons/tag.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 8H8.01M11.5858 4.58579L19.5858 12.5858C20.3668 13.3668 20.3668 14.6332 19.5858 15.4142L15.4142 19.5858C14.6332 20.3668 13.3668 20.3668 12.5858 19.5858L4.58579 11.5858C4.21071 11.2107 4 10.702 4 10.1716V6C4 4.89543 4.89543 4 6 4H10.1716C10.702 4 11.2107 4.21071 11.5858 4.58579Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/icons/terminal.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line></svg>

package/src/icons/text.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 18L8 5H7L3 18M4.23077 14H10.7692M14.5 10C16 9 20 8 20 11.5C20 15 20 18 20 18M20 12.5C18.5 13 14 13 14 16C14 19 18.5 18 20 15.5"></path></svg>

package/src/icons/thumb-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.99997 4H17.1919C17.9865 4 18.7058 4.47039 19.0243 5.19836L21.8323 11.6167C21.9429 11.8695 22 12.1424 22 12.4184V13C22 14.1046 21.1045 15 20 15H13.5L14.7066 19.4243C14.8772 20.0498 14.5826 20.7087 14.0027 20.9986V20.9986C13.4204 21.2898 12.7134 21.1274 12.3164 20.6114L8.41472 15.5392C8.14579 15.1896 7.99997 14.7608 7.99997 14.3198V14M7.99997 4H2V14H7.99997M7.99997 4V14"></path></svg>

package/src/icons/thumb-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.99997 20H17.1919C17.9865 20 18.7058 19.5296 19.0243 18.8016L21.8323 12.3833C21.9429 12.1305 22 11.8576 22 11.5816V11C22 9.89543 21.1045 9 20 9H13.5L14.7066 4.5757C14.8772 3.95023 14.5826 3.2913 14.0027 3.00136V3.00136C13.4204 2.7102 12.7134 2.87256 12.3164 3.3886L8.41472 8.46082C8.14579 8.81044 7.99997 9.23915 7.99997 9.68024V20ZM7.99997 20H2V10H7.99997V20Z"></path></svg>

package/src/icons/timer.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 9V13L15 15M3 6L6.5 3M21 6L17.5 3M12 21C16.4183 21 20 17.4183 20 13C20 8.58172 16.4183 5 12 5C7.58172 5 4 8.58172 4 13C4 17.4183 7.58172 21 12 21Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/icons/toggle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12C2 9.23858 4.23858 7 7 7H17C19.7614 7 22 9.23858 22 12C22 14.7614 19.7614 17 17 17H7C4.23858 17 2 14.7614 2 12Z"></path><path d="M22 12C22 14.7614 19.7614 17 17 17C14.2386 17 12 14.7614 12 12C12 9.23858 14.2386 7 17 7C19.7614 7 22 9.23858 22 12Z"></path></svg>

package/src/icons/trash.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path d="M11 1.75V3h2.25a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75ZM4.496 6.675l.66 6.6a.25.25 0 0 0 .249.225h5.19a.25.25 0 0 0 .249-.225l.66-6.6a.75.75 0 0 1 1.492.149l-.66 6.6A1.748 1.748 0 0 1 10.595 15h-5.19a1.75 1.75 0 0 1-1.741-1.575l-.66-6.6a.75.75 0 1 1 1.492-.15ZM6.5 1.75V3h3V1.75a.25.25 0 0 0-.25-.25h-2.5a.25.25 0 0 0-.25.25Z"></path></svg>

package/src/icons/update-page.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 3H7C5.89543 3 5 3.89543 5 5V10M13 3L19 9M13 3V8C13 8.55228 13.4477 9 14 9H19M19 9V19C19 20.1046 18.1046 21 17 21H10C7.79086 21 6 19.2091 6 17V17C6 14.7909 7.79086 13 10 13H13M13 13L10 10M13 13L10 16"></path></svg>

package/src/icons/upload.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path d="M2.75 14A1.75 1.75 0 0 1 1 12.25v-2.5a.75.75 0 0 1 1.5 0v2.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25v-2.5a.75.75 0 0 1 1.5 0v2.5A1.75 1.75 0 0 1 13.25 14Z"></path><path d="M11.78 4.72a.749.749 0 1 1-1.06 1.06L8.75 3.811V9.5a.75.75 0 0 1-1.5 0V3.811L5.28 5.78a.749.749 0 1 1-1.06-1.06l3.25-3.25a.749.749 0 0 1 1.06 0l3.25 3.25Z"></path></svg>

package/src/icons/video.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path d="M0 3.75C0 2.784.784 2 1.75 2h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25Zm1.75-.25a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-8.5a.25.25 0 0 0-.25-.25Z"></path><path d="M6 10.559V5.442a.25.25 0 0 1 .379-.215l4.264 2.559a.25.25 0 0 1 0 .428l-4.264 2.559A.25.25 0 0 1 6 10.559Z"></path></svg>

package/src/icons/wallet.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6V17C3 18.6569 4.34315 20 6 20H20C20.5523 20 21 19.5523 21 19V16M19 8H5C3.89543 8 3 7.10457 3 6V6C3 4.89543 3.89543 4 5 4H18C18.5523 4 19 4.44772 19 5V8ZM19 8H20C20.5523 8 21 8.44772 21 9V12M21 12H18C16.8954 12 16 12.8954 16 14V14C16 15.1046 16.8954 16 18 16H21M21 12V16"></path></svg>

package/src/icons/window.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path d="M0 2.75C0 1.784.784 1 1.75 1h12.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0 1 14.25 15H1.75A1.75 1.75 0 0 1 0 13.25ZM14.5 6h-13v7.25c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25Zm-6-3.5v2h6V2.75a.25.25 0 0 0-.25-.25ZM5 2.5v2h2v-2Zm-3.25 0a.25.25 0 0 0-.25.25V4.5h2v-2Z"></path></svg>

package/src/index.mjs

@@ -0,0 +1,29 @@
+export { default as AccordionGroup } from "./components/AccordionGroup.mjs";
+export { default as Badge } from "./components/Badge.mjs";
+export { default as Button } from "./components/Button.mjs";
+export { default as Checkbox } from "./components/Checkbox.mjs";
+export { default as ComboBox } from "./components/ComboBox.mjs";
+export { default as Container } from "./components/Container.mjs";
+export { default as DatePicker } from "./components/DatePicker.mjs";
+export { default as Dialog } from "./components/Dialog.mjs";
+export { default as DropdownMenu } from "./components/DropdownMenu.mjs";
+export { default as Grid } from "./components/Grid.mjs";
+export { default as HStack } from "./components/HStack.mjs";
+export { default as Icon } from "./components/Icon.mjs";
+export { default as InputField } from "./components/InputField.mjs";
+export { default as NavigationBar } from "./components/NavigationBar.mjs";
+export { default as PageHeader } from "./components/PageHeader.mjs";
+export { default as PageSection } from "./components/PageSection.mjs";
+export { default as PopoverMenu } from "./components/PopoverMenu.mjs";
+export { default as RadioCheckbox } from "./components/RadioCheckbox.mjs";
+export { default as SearchBox } from "./components/SearchBox.mjs";
+export { default as Sidebar } from "./components/Sidebar.mjs";
+export { default as Table } from "./components/Table.mjs";
+export { default as Text } from "./components/Text.mjs";
+export { default as TimePicker } from "./components/TimePicker.mjs";
+export { default as ToastNotification } from "./components/ToastNotification.mjs";
+export { default as ToggleSwitch } from "./components/ToggleSwitch.mjs";
+export { default as VStack } from "./components/VStack.mjs";
+
+export { dialogState, showDialog, hideDialog } from "./components/Dialog.mjs";
+export { toastState, showToast, hideToast } from "./components/ToastNotification.mjs";

package/src/styles/accordion.css

@@ -0,0 +1,70 @@
+.accordion-group {
+  display: grid;
+  gap: var(--base-gap);
+}
+
+.accordion-item {
+  border: 1px solid var(--border-color);
+  border-radius: var(--min-control-radius);
+  background-color: var(--background-color);
+  overflow: hidden;
+  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.accordion-item.accordion-open {
+  background-color: var(--background-color);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+.accordion-header {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--base-gap);
+  padding: var(--base-padding);
+  background: transparent;
+  border: none;
+  color: var(--color-primary);
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  text-align: left;
+  justify-content: flex-start;
+  cursor: pointer;
+}
+
+.accordion-header:focus-visible {
+  outline: 2px solid var(--accent-color);
+  outline-offset: 2px;
+}
+
+.accordion-title {
+  flex: 1;
+  font-weight: var(--font-semibold);
+  color: var(--color-primary);
+}
+
+.accordion-icon {
+  flex-shrink: 0;
+  transition: transform 0.2s ease, background-color 0.2s ease;
+}
+
+.accordion-content {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.25s ease;
+}
+
+.accordion-open .accordion-content {
+  grid-template-rows: 1fr;
+}
+
+.accordion-body {
+  overflow: hidden;
+}
+
+.accordion-description {
+  padding: 0 var(--base-padding) var(--base-padding);
+  color: var(--color-secondary);
+  font-size: var(--font-size);
+  margin: 0;
+}

package/src/styles/buttons.css

@@ -0,0 +1,118 @@
+button,
+.btn {
+  appearance: none;
+  border: none;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--base-gap);
+  padding: calc(var(--base-padding) * 0.5) var(--base-padding);
+  border-radius: var(--min-control-radius);
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  font-weight: var(--font-semibold);
+  min-height: var(--min-control-height);
+  line-height: 1;
+  box-sizing: border-box;
+  transition: opacity 0.2s, background-color 0.2s;
+  text-decoration: none; /* In case applied to <a> */
+}
+
+button:focus,
+.btn:focus,
+button:focus-visible,
+.btn:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
+/* Button Sizes */
+.btn-lg {
+  padding: calc(var(--base-padding) * 0.75) calc(var(--base-padding) * 1.25);
+  font-size: 1.1rem;
+}
+
+.btn-xl {
+  padding: var(--base-padding) calc(var(--base-padding) * 1.5);
+  font-size: 1.2rem;
+}
+
+/* Default / Regular (Accent) */
+.btn {
+  background-color: var(--accent-color);
+  color: white;
+}
+
+.btn:visited {
+  color: white;
+}
+
+.btn:hover {
+  opacity: 0.9;
+  color: white;
+}
+
+.btn:active {
+  opacity: 0.8;
+}
+
+/* Flat Button */
+.btn-flat {
+  background-color: transparent;
+  color: var(--color-primary);
+}
+
+.btn-flat:visited {
+  color: var(--color-primary);
+}
+
+.btn-flat:hover {
+  background-color: var(--highlight-background-color);
+  color: var(--color-primary);
+}
+
+.btn-flat:active {
+  background-color: var(--border-color);
+}
+
+/* Outline Button (Optional but useful) */
+.btn-outline {
+  background-color: transparent;
+  border: 1px solid var(--border-color);
+  color: var(--color-primary);
+}
+
+.btn-outline:visited {
+  color: var(--color-primary);
+}
+
+.btn-outline:hover {
+  border-color: var(--color-secondary);
+  background-color: var(--highlight-background-color);
+  color: var(--color-primary);
+}
+
+/* Destructive Button */
+.btn-destructive {
+  background-color: var(--color-destructive-dimmed);
+  color: white;
+}
+
+.btn-destructive:visited {
+  color: white;
+}
+
+.btn-destructive:hover {
+  background-color: var(--color-destructive);
+  color: white;
+}
+
+/* Disabled State */
+button:disabled,
+.btn:disabled,
+.btn-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}

package/src/styles/colors.css

@@ -0,0 +1,131 @@
+body {
+  color-scheme: light dark;
+  color: var(--color-primary-dimmed);
+  background-color: var(--background-color);
+}
+
+* {
+  color-scheme: inherit;
+}
+
+.bg-base {
+  background-color: var(--background-color) !important;
+}
+
+/* Text Color Utilities */
+.text-primary {
+  color: var(--color-primary);
+}
+
+.text-primary-dimmed {
+  color: var(--color-primary-dimmed);
+}
+
+.text-secondary {
+  color: var(--color-secondary);
+}
+
+.text-tertiary {
+  color: var(--color-tertiary);
+}
+
+.text-quaternary {
+  color: var(--color-quaternary);
+}
+
+.text-destructive {
+  color: var(--color-destructive);
+}
+
+.text-destructive-dimmed {
+  color: var(--color-destructive-dimmed);
+}
+
+.text-accent {
+  color: var(--accent-color);
+}
+
+.text-accent-dimmed {
+  color: var(--accent-color-dimmed);
+}
+
+.text-white {
+  color: white;
+}
+
+/* Background Color Utilities (useful for icon masking) */
+.bg-base {
+  background-color: var(--background-color) !important;
+}
+
+.icon-base {
+  background-color: var(--color-primary) !important;
+}
+
+.icon-white {
+  background-color: white !important;
+}
+
+.icon-secondary {
+  background-color: var(--color-secondary) !important;
+}
+
+.icon-tertiary {
+  background-color: var(--color-tertiary) !important;
+}
+
+.icon-quaternary {
+  background-color: var(--color-quaternary) !important;
+}
+
+.icon-destructive {
+  background-color: var(--color-destructive) !important;
+}
+
+.fg-base, .fg-primary {
+  color: var(--color-primary) !important;
+}
+
+.fg-tertiary {
+  color: var(--color-tertiary) !important;
+}
+
+.bg-dimmed {
+  background-color: var(--alternate-background-color) !important;
+}
+
+.bg-destructive {
+  background-color: var(--color-destructive) !important;
+}
+
+.bg-destructive-dimmed {
+  background-color: var(--color-destructive-dimmed) !important;
+}
+
+.bg-success {
+  background-color: var(--color-success) !important;
+}
+
+.bg-accent {
+  background-color: var(--accent-color) !important;
+}
+
+.bg-accent-dimmed {
+  background-color: var(--accent-color-dimmed) !important;
+}
+
+.bg-alternate {
+  background-color: var(--alternate-background-color) !important;
+}
+
+.bg-highlight {
+  background-color: var(--highlight-background-color) !important;
+}
+
+.bg-white {
+  background-color: white !important;
+}
+
+.bg-black {
+  background-color: black !important;
+}