@fragment-build/ui 3.0.9 → 3.0.11

package/index.css

@@ -0,0 +1,113 @@
+@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;
+  }
+
+  .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 "./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/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@fragment-build/ui",
-  "version": "3.0.9",
+  "version": "3.0.11",
   "type": "module",
   "engines": {
     "node": ">=22"
   },
   "main": "index.js",
   "types": "index.d.ts",
+  "style": "index.css",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/fragment-build/fragment-ui.git"
@@ -54,8 +55,8 @@
     "vite": "8.0.13"
   },
   "scripts": {
-    "build": "tsc",
-    "build:prod": "tsc --outDir .",
+    "build": "tsc && rsync -a --prune-empty-dirs --include='*/' --include='*.css' --exclude='*' src/ dist/",
+    "build:prod": "tsc --outDir . && rsync -a --prune-empty-dirs --include='*/' --include='*.css' --exclude='*' src/ .",
     "lint": "eslint --report-unused-disable-directives --max-warnings 0 ./src",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",

package/provider.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ThemeProvider } from 'next-themes';
 import { FragmentUIContext } from './context';

package/provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"provider.js","sourceRoot":"","sources":["src/provider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAsB,MAAM,WAAW,CAAC;AAOlE,MAAM,CAAC,MAAM,kBAAkB,GAAsC,CAAC,EACpE,QAAQ,EACR,aAAa,GAAG,GAAG,GACpB,EAAE,EAAE;IACH,OAAO,CACL,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,aAAa,EAAE,YAClD,KAAC,aAAa,IAAC,SAAS,EAAC,OAAO,YAC7B,QAAQ,GACK,GACW,CAC9B,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"provider.js","sourceRoot":"","sources":["src/provider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAsB,MAAM,WAAW,CAAC;AAOlE,MAAM,CAAC,MAAM,kBAAkB,GAAsC,CAAC,EACpE,QAAQ,EACR,aAAa,GAAG,GAAG,GACpB,EAAE,EAAE;IACH,OAAO,CACL,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,aAAa,EAAE,YAClD,KAAC,aAAa,IAAC,SAAS,EAAC,OAAO,YAC7B,QAAQ,GACK,GACW,CAC9B,CAAC;AACJ,CAAC,CAAC"}

package/src/components/grid/grid.css

@@ -0,0 +1,17 @@
+@layer components {
+  .fragment-grid {
+    @apply grid gap-6 grid-flow-row-dense;
+  }
+
+  .fragment-grid--sm {
+    @apply grid-cols-1;
+  }
+
+  .fragment-grid--md {
+    @apply grid-cols-1 lg:grid-cols-2;
+  }
+
+  .fragment-grid--lg {
+    @apply grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3;
+  }
+}

package/src/components/multi-switch/multi-switch.css

@@ -0,0 +1,24 @@
+@layer components {
+  .fragment-multi-switch.toggle-button-group--horizontal .toggle-button:first-child {
+    padding-inline-start: 2px;
+  }
+
+  .fragment-multi-switch.toggle-button-group--horizontal .toggle-button:last-child {
+    padding-inline-end: 2px;
+  }
+
+
+  .fragment-multi-switch__btn--danger {
+    --toggle-button-bg-selected: var(--danger-soft);
+    --toggle-button-bg-selected-hover: var(--danger-soft-hover);
+    --toggle-button-bg-selected-pressed: var(--danger-soft-hover);
+    --toggle-button-fg-selected: var(--danger-soft-foreground);
+  }
+
+  .fragment-multi-switch__btn--neutral {
+    --toggle-button-bg-selected: var(--default-hover);
+    --toggle-button-bg-selected-hover: var(--default-hover);
+    --toggle-button-bg-selected-pressed: var(--default-hover);
+    --toggle-button-fg-selected: var(--default-foreground);
+  }
+}

package/src/fragments/form/form-section.css

@@ -0,0 +1,41 @@
+@layer components {
+  .fragment-form-section__main {
+    @apply flex flex-col;
+  }
+
+  .fragment-form-section__info {
+    @apply flex-1 pb-4;
+  }
+
+  .fragment-form-section__content {
+    @apply flex flex-col gap-4 flex-1 min-w-0;
+  }
+
+  .fragment-form-section__description {
+    @apply text-sm text-muted;
+  }
+
+  .fragment-form-section--horizontal {
+    .fragment-form-section__main {
+      @apply sm:flex-row;
+    }
+    .fragment-form-section__info {
+      @apply sm:max-w-sm sm:pr-4 sm:pb-0;
+    }
+    .fragment-form-section__content {
+      @apply sm:items-end sm:justify-center sm:max-w-sm;
+    }
+  }
+
+  .fragment-form-section--vertical {
+    .fragment-form-section__content {
+      @apply sm:max-w-3xl;
+    }
+  }
+
+  .fragment-form-section--full-width {
+    .fragment-form-section__content {
+      @apply sm:max-w-full;
+    }
+  }
+}

package/src/fragments/form/form.css

@@ -0,0 +1,5 @@
+@layer components {
+  .fragment-form__separator {
+    @apply my-6;
+  }
+}

package/src/fragments/navbar/navbar.css

@@ -0,0 +1,25 @@
+@layer components {
+  .fragment-navbar__topbar {
+    @apply flex gap-6 items-center px-8 py-5;
+  }
+
+  .fragment-navbar__tabs {
+    @apply hidden md:block;
+  }
+
+  .fragment-navbar__end {
+    @apply ml-auto flex gap-4 items-center;
+  }
+
+  .fragment-navbar__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;
+    & > *,
+    & > * > * {
+      @apply h-12 flex-1;
+    }
+  }
+
+  .fragment-navbar__bottom-nav-badge {
+    @apply -top-0.5 -right-2.5;
+  }
+}

package/src/fragments/page/page-header.css

@@ -0,0 +1,13 @@
+@layer components {
+  .fragment-page-header {
+    @apply flex gap-4 justify-between sm:items-end mb-8 flex-col sm:flex-row;
+  }
+
+  .fragment-page-header__description {
+    @apply mt-2 text-muted;
+  }
+
+  .fragment-page-header__actions {
+    @apply flex gap-4;
+  }
+}

package/src/fragments/shell/shell.css

@@ -0,0 +1,22 @@
+@layer components {
+  .fragment-shell {
+    @apply flex min-h-screen;
+  }
+
+  .fragment-shell--vertical {
+    @apply flex-col;
+  }
+
+  .fragment-shell__main {
+    @apply flex-1 min-w-0 mx-auto;
+
+    .fragment-shell--horizontal & {
+      @apply px-8 lg:px-12 xl:px-20 py-14 max-w-[2100px];
+    }
+
+    .fragment-shell--vertical & {
+      @apply px-8 py-6 max-w-[2100px] w-full;
+    }
+
+  }
+}

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,113 @@
+@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;
+  }
+
+  .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 "./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"; */