@fragment-build/ui 3.0.9 → 3.1.3

package/src/fragments/sidebar/sidebar.css

@@ -0,0 +1,205 @@
+@layer components {
+  .fragment-sidebar {
+    @apply hidden md:flex;
+  }
+
+  .fragment-sidebar__collapsed {
+    @apply fixed top-0 left-0 border-r border-border flex flex-col h-screen gap-8 transition-all;
+  }
+
+  .fragment-sidebar__collapsed-body {
+    @apply w-20 items-center flex flex-col gap-8 px-3 pt-8 overflow-y-auto flex-1;
+  }
+
+  .fragment-sidebar__collapsed-footer {
+    @apply w-20 items-center flex flex-col gap-8 px-3 pb-8;
+  }
+
+  .fragment-sidebar__expanded {
+    @apply fixed top-0 left-0 border-r border-border flex flex-col h-screen gap-8 overflow-hidden transition-all;
+  }
+
+  .fragment-sidebar__expanded-body {
+    @apply w-72 flex flex-col gap-8 px-3 pt-8 overflow-y-auto flex-1;
+  }
+
+  .fragment-sidebar__expanded-footer {
+    @apply w-72 flex flex-col gap-8 px-3 pb-8;
+  }
+
+  .fragment-sidebar__placeholder {
+    @apply transition-all h-screen;
+  }
+
+  .fragment-sidebar__layout-button-wrapper {
+    @apply fixed top-6 transition-all;
+  }
+
+  .fragment-sidebar__layout-button {
+    @apply h-6! w-6!;
+  }
+
+  .fragment-sidebar__bottom-nav {
+    @apply fixed md:hidden z-50 bottom-0 bg-background flex w-full gap-2 px-2 py-1 border-t border-border;
+    & > *:nth-child(n+5):not(:last-child) {
+      @apply hidden;
+    }
+
+    & > *,
+    & > * > *,
+    & > * > * > * {
+      @apply h-12 flex-1 w-full;
+    }
+  }
+
+  .fragment-sidebar__bottom-nav-badge {
+    @apply -top-0.5 -right-2.5;
+  }
+
+  .fragment-sidebar__modal-body {
+    @apply flex flex-col gap-8;
+  }
+
+  .fragment-sidebar__modal-footer {
+    @apply flex flex-col gap-8;
+  }
+
+  .fragment-sidebar__collapsed-nav {
+    @apply flex flex-col gap-1;
+    & svg {
+      @apply size-5! shrink-0 self-center;
+    }
+  }
+
+  .fragment-sidebar__item {
+    &--center {
+      @apply my-auto max-w-full;
+    }
+    &--bottom {
+      @apply mt-auto max-w-full sticky bottom-0;
+    }
+  }
+
+  .fragment-sidebar__user-trigger {
+    @apply justify-start;
+  }
+
+  .fragment-sidebar__user-info {
+    @apply flex items-center gap-2 px-2;
+  }
+
+  .fragment-sidebar__user-text {
+    @apply flex flex-col items-start;
+  }
+
+  .fragment-sidebar__custom-item {
+    @apply px-2;
+  }
+
+  .fragment-sidebar__nav {
+    @apply text-sm;
+
+    .list-box-item {
+      @apply px-3! pr-1! py-1! h-10!;
+    }
+
+    & svg {
+      @apply size-5 shrink-0 self-center;
+    }
+  }
+
+  .fragment-sidebar__accordion-trigger {
+    @apply w-full flex items-center gap-3 h-10 px-3 pr-1 py-1 rounded-2xl text-sm font-normal cursor-pointer
+           text-foreground transition-colors;
+    &:hover, &[data-hovered="true"] {
+      @apply bg-default!;
+    }
+    &--active {
+      @apply text-accent-soft-foreground;
+    }
+    & > .fragment-sidebar__accordion-label {
+      @apply flex-1 text-left;
+    }
+  }
+
+  .fragment-sidebar__accordion-trigger .accordion__indicator {
+    @apply w-8! shrink-0;
+  }
+
+  .fragment-sidebar__accordion-indicator {
+    @apply size-4 transition-transform duration-200;
+    [data-expanded] & {
+      @apply rotate-90;
+    }
+  }
+
+  .fragment-sidebar__tree-list {
+    @apply relative pl-7;
+    &::before {
+      content: '';
+      @apply absolute top-0 bottom-0 w-px bg-foreground opacity-15 rounded-full left-5;
+    }
+    .list-box {
+      @apply overflow-visible;
+    }
+  }
+
+  .fragment-sidebar__nav-item--active {
+    @apply bg-accent-soft! text-accent-soft-foreground!;
+  }
+
+  .fragment-sidebar__sub-item {
+    @apply pl-8! relative;
+    &::before {
+      content: '';
+      @apply absolute -left-3 ml-px top-1/2 -translate-y-1/2 w-3 h-px bg-foreground opacity-15;
+    }
+  }
+
+  .fragment-sidebar__collapsed-subnav-label {
+    @apply px-3 py-2 text-xs font-medium opacity-60;
+  }
+
+  /* Layout modifier variants */
+  .fragment-sidebar--auto {
+    .fragment-sidebar__expanded {
+      @apply w-20 opacity-0 pointer-events-none xl:w-72 xl:opacity-100 xl:pointer-events-auto;
+    }
+    .fragment-sidebar__placeholder {
+      @apply w-20 opacity-0 pointer-events-none xl:w-72 xl:opacity-100 xl:pointer-events-auto;
+    }
+    .fragment-sidebar__layout-button-wrapper {
+      @apply left-20 translate-x-1/2 rotate-180 xl:left-72 xl:-translate-x-1/2 xl:rotate-0;
+    }
+    .fragment-sidebar__collapsed {
+      @apply xl:opacity-0;
+    }
+  }
+
+  .fragment-sidebar--collapsed {
+    .fragment-sidebar__expanded {
+      @apply w-20 opacity-0 pointer-events-none;
+    }
+    .fragment-sidebar__placeholder {
+      @apply w-20 opacity-0 pointer-events-none;
+    }
+    .fragment-sidebar__layout-button-wrapper {
+      @apply left-20 translate-x-1/2 rotate-180;
+    }
+  }
+
+  .fragment-sidebar--expanded {
+    .fragment-sidebar__collapsed {
+      @apply opacity-0;
+    }
+    .fragment-sidebar__expanded {
+      @apply w-72;
+    }
+    .fragment-sidebar__placeholder {
+      @apply w-72;
+    }
+    .fragment-sidebar__layout-button-wrapper {
+      @apply left-72 -translate-x-1/2;
+    }
+  }
+}

package/src/fragments/widget/widget.css

@@ -0,0 +1,29 @@
+@layer components {
+  .fragment-widget {
+    @apply px-7 py-5 gap-5;
+  }
+
+  .fragment-widget__header {
+    @apply p-0;
+  }
+
+  .fragment-widget__header-end {
+    @apply ml-auto;
+  }
+
+  .fragment-widget__content {
+    @apply p-0 overflow-visible;
+  }
+
+  .fragment-widget--sm {
+    @apply col-span-1;
+  }
+
+  .fragment-widget--md {
+    @apply col-span-1 lg:col-span-2;
+  }
+
+  .fragment-widget--lg {
+    @apply col-span-1 lg:col-span-2 2xl:col-span-3;
+  }
+}

package/src/index.css

@@ -0,0 +1,139 @@
+@theme {
+  --text-xs: 13px;
+  --text-sm: 15px;
+}
+
+@layer base {
+  body {
+    @apply bg-background text-foreground;
+  }
+
+  h1 {
+    @apply text-3xl font-semibold;
+  }
+
+  h2 {
+    @apply text-2xl font-semibold;
+  }
+
+  h3 {
+    @apply text-xl font-semibold;
+  }
+}
+
+@layer components {
+  .input, .textarea, .select__trigger {
+    @apply border border-border px-6 py-4 shadow-none;
+  }
+
+  .input-group, .search-field__group, .number-field__group{
+    @apply border border-border shadow-none h-auto;
+
+    .input-group__input, .search-field__input, .number-field__input {
+      @apply px-6 py-4;
+    }
+  }
+
+  .slider {
+    .slider__thumb {
+      @apply bg-transparent;
+    }
+    &[data-orientation="horizontal"] {
+      .slider__track {
+        @apply h-1;
+      }
+    }
+    &[data-orientation="vertical"] {
+      .slider__track {
+        @apply w-1;
+      }
+    }
+  }
+
+  .select__indicator {
+    @apply right-4;
+  }
+
+  .tabs {
+    &:not(.tabs--secondary) {
+      .tabs__list {
+        @apply bg-surface p-0;
+        
+        border-radius: calc(var(--radius-3xl) + 0.25rem);
+      }
+
+      .tabs__indicator {
+        @apply shadow-none bg-surface-tertiary;
+      }
+
+      .tabs__tab {
+        &[data-selected="true"] {
+          @apply text-surface-tertiary-foreground;
+        }
+      }
+    }
+
+    .tabs__tab {
+      @apply h-10 px-6 text-xs text-nowrap;
+    }
+
+    .tabs__list {
+      &[data-orientation="horizontal"] {
+        @apply w-auto;
+      }
+    }
+
+    &.tabs--secondary {
+      .tabs__tab {
+        @apply h-12 px-10;
+      }
+    }
+  }
+
+  .card {
+    @apply border border-border shadow-none;
+  }
+
+  .button {
+    &.button--md:not(.button--icon-only) {
+      @apply h-12 px-6;
+
+      @media (width >= 48rem) {
+        @apply h-12 px-6;
+      }
+    }
+  }
+}
+
+@import "./fragments/navbar/navbar.css";
+@import "./fragments/sidebar/sidebar.css";
+@import "./fragments/shell/shell.css";
+@import "./fragments/page/page-header.css";
+@import "./fragments/widget/widget.css";
+@import "./components/grid/grid.css";
+@import "./components/multi-switch/multi-switch.css";
+@import "./components/code/code.css";
+@import "./components/code-snippet/code-snippet.css";
+@import "./fragments/form/form.css";
+@import "./fragments/form/form-section.css";
+
+.light,
+.default,
+[data-theme="light"],
+[data-theme="default"] {
+  /* Theme Colors (Light Mode) */
+  --background: #fff;
+  --border: rgba(0, 0, 0, 0.07);
+  --surface-secondary: rgba(0, 0, 0, 0.02);
+}
+
+.dark,
+[data-theme="dark"] {
+  /* Theme Colors (Dark Mode) */
+  --background: oklch(12% 0.005 285.823);
+  --foreground: var(--snow);
+  --border: rgba(255, 255, 255, 0.07);
+  --surface-secondary: rgba(255, 255, 255, 0.02);
+}
+
+/* @import "./theme.example.css"; */

package/src/theme.example.css

@@ -0,0 +1,96 @@
+/*
+ * HeroUI Theme Customization
+ * Add this to your global.css after importing @heroui/styles
+ * Only includes base variables from variables.css
+ * @see https://v3.heroui.com/docs/react/getting-started/theming
+ */
+
+:root,
+.light,
+.default,
+[data-theme="light"],
+[data-theme="default"] {
+  /* Theme Colors (Light Mode) */
+  --accent: #F56460;
+  --accent-foreground: #FCFAF6;
+  --background: #FCFAF6;
+  --border: #E8E8E8;
+
+  --scrollbar: #FCFAF6;
+  --separator: #E8E8E8;
+
+  --default: rgba(0, 0, 0, 0.02);
+  --default-foreground: rgba(0, 0, 0, 0.9);
+
+  --field-background: #fff;
+  --field-foreground: rgba(0, 0, 0, 0.9);
+  --field-placeholder: rgba(0, 0, 0, 0.5);
+
+  --focus: oklch(90.00% 0.0084 24.57);
+  --foreground: rgba(0, 0, 0, 0.9);
+  --muted: oklch(55.17% 0.0168 24.57);
+
+  --overlay: oklch(100.00% 0.0025 24.57);
+  --overlay-foreground: oklch(21.03% 0.0084 24.57);
+
+  --segment: rgba(0, 0, 0, 0.9);
+  --segment-foreground: #FCFAF6;
+
+  --surface: #fff;
+  --surface-foreground: rgba(0, 0, 0, 0.9);
+  --surface-secondary: rgba(0, 0, 0, 0.02);
+  --surface-secondary-foreground: rgba(0, 0, 0, 0.9);
+  --surface-tertiary: rgba(0, 0, 0, 0.9);
+  --surface-tertiary-foreground: #FCFAF6;
+
+  --success: oklch(73.29% 0.1968 123.30);
+  --success-foreground: rgba(0, 0, 0, 0.9);
+  --warning: oklch(78.19% 0.1612 44.82);
+  --warning-foreground: rgba(0, 0, 0, 0.9);
+  --danger: #cf383f;
+  --danger-foreground: #FCFAF6;
+
+  /* Border Radius */
+  --radius: 0.5rem;
+  --field-radius: 1rem;
+
+  /* Font Family */
+  /* Make sure to load Inter font in your app */
+  --font-sans: var(--font-inter);
+}
+
+.dark,
+[data-theme="dark"] {
+  color-scheme: dark;
+  /* Theme Colors (Dark Mode) */
+  --accent: oklch(68.60% 0.1794 24.57);
+  --accent-foreground: oklch(15% 0.0300 24.57);
+  --background: oklch(12.00% 0.0000 24.57);
+  --border: oklch(28.00% 0.0000 24.57);
+  --danger: oklch(59.40% 0.1967 357.12);
+  --danger-foreground: oklch(99.11% 0 0);
+  --default: oklch(27.40% 0.0000 24.57);
+  --default-foreground: oklch(99.11% 0 0);
+  --field-background: oklch(21.03% 0.0000 24.57);
+  --field-foreground: oklch(99.11% 0.0000 24.57);
+  --field-placeholder: oklch(70.50% 0.0000 24.57);
+  --focus: oklch(68.60% 0.1794 24.57);
+  --foreground: oklch(99.11% 0.0000 24.57);
+  --muted: oklch(70.50% 0.0000 24.57);
+  --overlay: oklch(21.03% 0.0000 24.57);
+  --overlay-foreground: oklch(99.11% 0.0000 24.57);
+  --scrollbar: oklch(70.50% 0.0000 24.57);
+  --segment: oklch(39.64% 0.0000 24.57);
+  --segment-foreground: oklch(99.11% 0.0000 24.57);
+  --separator: oklch(25.00% 0.0000 24.57);
+  --success: oklch(73.29% 0.1935 123.30);
+  --success-foreground: oklch(21.03% 0.0059 123.30);
+  --surface: oklch(21.03% 0.0000 24.57);
+  --surface-foreground: oklch(99.11% 0.0000 24.57);
+  --surface-secondary: oklch(25.70% 0.0000 24.57);
+  --surface-secondary-foreground: oklch(99.11% 0.0000 24.57);
+  --surface-tertiary: oklch(27.21% 0.0000 24.57);
+  --surface-tertiary-foreground: oklch(99.11% 0.0000 24.57);
+  --warning: oklch(82.03% 0.1388 48.83);
+  --warning-foreground: oklch(21.03% 0.0059 48.83);
+}

package/theme.example.css

@@ -0,0 +1,96 @@
+/*
+ * HeroUI Theme Customization
+ * Add this to your global.css after importing @heroui/styles
+ * Only includes base variables from variables.css
+ * @see https://v3.heroui.com/docs/react/getting-started/theming
+ */
+
+:root,
+.light,
+.default,
+[data-theme="light"],
+[data-theme="default"] {
+  /* Theme Colors (Light Mode) */
+  --accent: #F56460;
+  --accent-foreground: #FCFAF6;
+  --background: #FCFAF6;
+  --border: #E8E8E8;
+
+  --scrollbar: #FCFAF6;
+  --separator: #E8E8E8;
+
+  --default: rgba(0, 0, 0, 0.02);
+  --default-foreground: rgba(0, 0, 0, 0.9);
+
+  --field-background: #fff;
+  --field-foreground: rgba(0, 0, 0, 0.9);
+  --field-placeholder: rgba(0, 0, 0, 0.5);
+
+  --focus: oklch(90.00% 0.0084 24.57);
+  --foreground: rgba(0, 0, 0, 0.9);
+  --muted: oklch(55.17% 0.0168 24.57);
+
+  --overlay: oklch(100.00% 0.0025 24.57);
+  --overlay-foreground: oklch(21.03% 0.0084 24.57);
+
+  --segment: rgba(0, 0, 0, 0.9);
+  --segment-foreground: #FCFAF6;
+
+  --surface: #fff;
+  --surface-foreground: rgba(0, 0, 0, 0.9);
+  --surface-secondary: rgba(0, 0, 0, 0.02);
+  --surface-secondary-foreground: rgba(0, 0, 0, 0.9);
+  --surface-tertiary: rgba(0, 0, 0, 0.9);
+  --surface-tertiary-foreground: #FCFAF6;
+
+  --success: oklch(73.29% 0.1968 123.30);
+  --success-foreground: rgba(0, 0, 0, 0.9);
+  --warning: oklch(78.19% 0.1612 44.82);
+  --warning-foreground: rgba(0, 0, 0, 0.9);
+  --danger: #cf383f;
+  --danger-foreground: #FCFAF6;
+
+  /* Border Radius */
+  --radius: 0.5rem;
+  --field-radius: 1rem;
+
+  /* Font Family */
+  /* Make sure to load Inter font in your app */
+  --font-sans: var(--font-inter);
+}
+
+.dark,
+[data-theme="dark"] {
+  color-scheme: dark;
+  /* Theme Colors (Dark Mode) */
+  --accent: oklch(68.60% 0.1794 24.57);
+  --accent-foreground: oklch(15% 0.0300 24.57);
+  --background: oklch(12.00% 0.0000 24.57);
+  --border: oklch(28.00% 0.0000 24.57);
+  --danger: oklch(59.40% 0.1967 357.12);
+  --danger-foreground: oklch(99.11% 0 0);
+  --default: oklch(27.40% 0.0000 24.57);
+  --default-foreground: oklch(99.11% 0 0);
+  --field-background: oklch(21.03% 0.0000 24.57);
+  --field-foreground: oklch(99.11% 0.0000 24.57);
+  --field-placeholder: oklch(70.50% 0.0000 24.57);
+  --focus: oklch(68.60% 0.1794 24.57);
+  --foreground: oklch(99.11% 0.0000 24.57);
+  --muted: oklch(70.50% 0.0000 24.57);
+  --overlay: oklch(21.03% 0.0000 24.57);
+  --overlay-foreground: oklch(99.11% 0.0000 24.57);
+  --scrollbar: oklch(70.50% 0.0000 24.57);
+  --segment: oklch(39.64% 0.0000 24.57);
+  --segment-foreground: oklch(99.11% 0.0000 24.57);
+  --separator: oklch(25.00% 0.0000 24.57);
+  --success: oklch(73.29% 0.1935 123.30);
+  --success-foreground: oklch(21.03% 0.0059 123.30);
+  --surface: oklch(21.03% 0.0000 24.57);
+  --surface-foreground: oklch(99.11% 0.0000 24.57);
+  --surface-secondary: oklch(25.70% 0.0000 24.57);
+  --surface-secondary-foreground: oklch(99.11% 0.0000 24.57);
+  --surface-tertiary: oklch(27.21% 0.0000 24.57);
+  --surface-tertiary-foreground: oklch(99.11% 0.0000 24.57);
+  --warning: oklch(82.03% 0.1388 48.83);
+  --warning-foreground: oklch(21.03% 0.0059 48.83);
+}