@hanzo/ui 5.3.25 → 5.3.28

package/docs/css/preset.css

@@ -0,0 +1,305 @@
+@import './shiki.css';
+
+/* TODO: remove them on next major */
+@import './layouts/docs.css';
+@import './layouts/home.css';
+@import './layouts/notebook.css';
+
+@source '../dist/*.js';
+@source '../dist/{components,contexts,provider,utils}/**/*.js';
+@source '../dist/layouts/shared/**/*.js';
+
+@plugin '../dist/theme/typography/index.js';
+
+:root {
+  --fd-sidebar-drawer-offset: 100%;
+}
+
+[dir='rtl'] {
+  --fd-sidebar-drawer-offset: -100%;
+}
+
+@theme {
+  --animate-fd-fade-in: fd-fade-in 300ms ease;
+  --animate-fd-fade-out: fd-fade-out 300ms ease;
+
+  --animate-fd-dialog-in: fd-dialog-in 300ms cubic-bezier(0.16, 1, 0.3, 1);
+  --animate-fd-dialog-out: fd-dialog-out 300ms cubic-bezier(0.16, 1, 0.3, 1);
+
+  --animate-fd-popover-in: fd-popover-in 100ms ease;
+  --animate-fd-popover-out: fd-popover-out 100ms ease;
+
+  --animate-fd-collapsible-down: fd-collapsible-down 150ms
+    cubic-bezier(0.45, 0, 0.55, 1);
+  --animate-fd-collapsible-up: fd-collapsible-up 150ms
+    cubic-bezier(0.45, 0, 0.55, 1);
+
+  --animate-fd-accordion-down: fd-accordion-down 200ms ease-out;
+  --animate-fd-accordion-up: fd-accordion-up 200ms ease-out;
+
+  --animate-fd-nav-menu-in: fd-nav-menu-in 200ms ease;
+  --animate-fd-nav-menu-out: fd-nav-menu-out 200ms ease;
+
+  --animate-fd-enterFromLeft: fd-enterFromLeft 250ms ease;
+  --animate-fd-enterFromRight: fd-enterFromRight 250ms ease;
+
+  --animate-fd-sidebar-in: fd-sidebar-in 250ms ease;
+  --animate-fd-sidebar-out: fd-sidebar-out 250ms ease;
+
+  --animate-fd-exitToLeft: fd-exitToLeft 250ms ease;
+  --animate-fd-exitToRight: fd-exitToRight 250ms ease;
+
+  @keyframes fd-sidebar-in {
+    from {
+      transform: translateX(var(--fd-sidebar-drawer-offset));
+    }
+  }
+
+  @keyframes fd-sidebar-out {
+    to {
+      transform: translateX(var(--fd-sidebar-drawer-offset));
+    }
+  }
+
+  @keyframes fd-collapsible-down {
+    from {
+      height: 0;
+      opacity: 0;
+    }
+    to {
+      height: var(--radix-collapsible-content-height);
+    }
+  }
+
+  @keyframes fd-collapsible-up {
+    from {
+      height: var(--radix-collapsible-content-height);
+    }
+    to {
+      height: 0;
+      opacity: 0;
+    }
+  }
+
+  @keyframes fd-accordion-down {
+    from {
+      height: 0;
+      opacity: 0.5;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+
+  @keyframes fd-accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+      opacity: 0.5;
+    }
+  }
+
+  @keyframes fd-dialog-in {
+    from {
+      transform: scale(1.06);
+      opacity: 0;
+    }
+    to {
+      transform: scale(1);
+    }
+  }
+
+  @keyframes fd-dialog-out {
+    from {
+      transform: scale(1);
+    }
+    to {
+      transform: scale(1.04);
+      opacity: 0;
+    }
+  }
+
+  @keyframes fd-popover-in {
+    from {
+      opacity: 0;
+      transform: scale(0.9);
+    }
+  }
+
+  @keyframes fd-popover-out {
+    to {
+      opacity: 0;
+      transform: scale(0.9);
+    }
+  }
+
+  @keyframes fd-fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fd-fade-out {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes fd-enterFromRight {
+    from {
+      opacity: 0;
+      transform: translateX(200px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes fd-enterFromLeft {
+    from {
+      opacity: 0;
+      transform: translateX(-200px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes fd-exitToRight {
+    from {
+      opacity: 1;
+      transform: translateX(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateX(200px);
+    }
+  }
+
+  @keyframes fd-exitToLeft {
+    from {
+      opacity: 1;
+      transform: translateX(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateX(-200px);
+    }
+  }
+
+  @keyframes fd-nav-menu-in {
+    from {
+      opacity: 0;
+      height: 0px;
+    }
+    to {
+      opacity: 1;
+      height: var(--radix-navigation-menu-viewport-height);
+    }
+  }
+
+  @keyframes fd-nav-menu-out {
+    from {
+      opacity: 1;
+      height: var(--radix-navigation-menu-viewport-height);
+    }
+    to {
+      opacity: 0;
+      height: 0px;
+    }
+  }
+}
+
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-fd-border, currentColor);
+  }
+
+  body {
+    background-color: var(--color-fd-background);
+    color: var(--color-fd-foreground);
+  }
+}
+
+@utility fd-scroll-container {
+  &::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    background: var(--color-fd-border);
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-corner {
+    display: none;
+  }
+}
+
+@utility fd-steps {
+  counter-reset: step;
+  position: relative;
+  @apply pl-6 ml-2 border-l sm:ml-4 sm:pl-7;
+}
+
+@utility fd-step {
+  &:before {
+    background-color: var(--color-fd-secondary);
+    color: var(--color-fd-secondary-foreground);
+    content: counter(step);
+    counter-increment: step;
+    justify-content: center;
+    align-items: center;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    display: flex;
+    position: absolute;
+    @apply size-8 -start-4 rounded-full;
+  }
+}
+
+@utility prose-no-margin {
+  & > :first-child {
+    margin-top: 0;
+  }
+
+  & > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+@property --radix-collapsible-content-height {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0px;
+}
+
+@variant dark (&:where(.dark, .dark *));
+
+/* define/override layout variables */
+@variant layout {
+  #nd-docs-layout:has(&),
+  #nd-notebook-layout:has(&),
+  #nd-home-layout:has(&) {
+    @slot;
+  }
+}

package/docs/css/purple.css

@@ -0,0 +1,39 @@
+@import './colors/index.css';
+
+@theme {
+  --color-fd-background: hsl(256, 100%, 96%);
+  --color-fd-primary: hsl(270, 100%, 52%);
+  --color-fd-border: hsla(270, 40%, 80%, 0.5);
+  --color-fd-accent: hsl(270, 40%, 88%);
+  --color-fd-accent-foreground: hsl(270, 100%, 20%);
+  --color-fd-muted: hsl(256, 60%, 94%);
+  --color-fd-muted-foreground: hsl(256, 50%, 50%);
+  --color-fd-foreground: hsl(256, 60%, 26%);
+  --color-fd-secondary: hsl(270, 60%, 90%);
+  --color-fd-secondary-foreground: hsl(256, 60%, 10%);
+  --color-fd-card: hsl(256, 60%, 92%);
+  --color-fd-card-foreground: hsl(256, 100%, 20%);
+  --color-fd-popover-foreground: hsl(256, 100%, 20%);
+  --color-fd-popover: hsl(256, 60%, 96%);
+  --color-fd-primary-foreground: hsl(270, 100%, 20%);
+  --color-fd-ring: hsl(270, 100%, 52%);
+}
+
+.dark {
+  --color-fd-background: hsl(256, 20%, 6%);
+  --color-fd-primary: hsl(270, 100%, 86%);
+  --color-fd-border: hsla(270, 50%, 40%, 0.3);
+  --color-fd-accent: hsl(256, 23%, 22%);
+  --color-fd-accent-foreground: hsl(270, 40%, 86%);
+  --color-fd-muted: hsl(256, 23%, 10%);
+  --color-fd-foreground: hsl(256, 60%, 90%);
+  --color-fd-muted-foreground: hsl(256, 50%, 75%);
+  --color-fd-secondary: hsl(270, 23%, 20%);
+  --color-fd-secondary-foreground: hsl(256, 60%, 90%);
+  --color-fd-card: hsl(256, 23%, 10%);
+  --color-fd-card-foreground: hsl(256, 60%, 90%);
+  --color-fd-popover-foreground: hsl(256, 60%, 90%);
+  --color-fd-popover: hsl(256, 23%, 6%);
+  --color-fd-primary-foreground: hsl(256, 60%, 6%);
+  --color-fd-ring: hsl(270, 100%, 86%);
+}

package/docs/css/shadcn.css

@@ -0,0 +1,36 @@
+@import './colors/index.css';
+
+:root,
+.dark {
+  --color-fd-background: var(--background);
+  --color-fd-foreground: var(--foreground);
+  --color-fd-muted: var(--muted);
+  --color-fd-muted-foreground: var(--muted-foreground);
+  --color-fd-popover: var(--popover);
+  --color-fd-popover-foreground: var(--popover-foreground);
+  --color-fd-card: var(--card);
+  --color-fd-card-foreground: var(--card-foreground);
+  --color-fd-border: var(--border);
+  --color-fd-primary: var(--primary);
+  --color-fd-primary-foreground: var(--primary-foreground);
+  --color-fd-secondary: var(--secondary);
+  --color-fd-secondary-foreground: var(--secondary-foreground);
+  --color-fd-accent: var(--accent);
+  --color-fd-accent-foreground: var(--accent-foreground);
+  --color-fd-ring: var(--ring);
+}
+
+#nd-sidebar {
+  background-color: var(--sidebar);
+  color: var(--sidebar-foreground);
+  border-color: var(--sidebar-border);
+
+  --color-fd-accent: var(--sidebar-accent);
+  --color-fd-accent-foreground: var(--sidebar-accent-foreground);
+  --color-fd-ring: var(--sidebar-ring);
+  --color-fd-primary-foreground: var(--sidebar-primary-foreground);
+}
+
+@theme static {
+  --color-fd-error: var(--destructive);
+}

package/docs/css/shiki.css

@@ -0,0 +1,90 @@
+.shiki:not(.not-fumadocs-codeblock *) {
+  --padding-left: calc(var(--spacing) * 4);
+  --padding-right: calc(var(--spacing) * 4);
+
+  code span {
+    color: var(--shiki-light);
+  }
+}
+
+.dark .shiki:not(.not-fumadocs-codeblock *) {
+  code span {
+    color: var(--shiki-dark);
+  }
+}
+
+:is(pre *):is(.shiki *):not(.not-fumadocs-codeblock *) {
+  .line& {
+    position: relative;
+    min-height: 1lh;
+    padding-left: var(--padding-left);
+    padding-right: var(--padding-right);
+  }
+
+  .has-focused .line&:not(.focused) {
+    filter: blur(2px);
+    transition: filter 200ms;
+  }
+
+  .has-focused:hover .line&:not(.focused) {
+    filter: blur(0);
+  }
+
+  [data-line-numbers] .twoslash-meta-line& {
+    padding-left: calc(var(--padding-left) + 7 * var(--spacing));
+  }
+
+  [data-line-numbers] .line& {
+    counter-increment: line;
+    padding-left: calc(var(--padding-left) + 7 * var(--spacing));
+  }
+
+  [data-line-numbers] .line&::after {
+    position: absolute;
+    content: counter(line);
+    color: color-mix(
+      in oklab,
+      var(--fd-counter-color, var(--color-fd-muted-foreground)) 60%,
+      transparent
+    );
+    @apply top-0 left-4;
+  }
+
+  .diff&::before {
+    position: absolute;
+    left: calc(var(--spacing) * 1.5);
+  }
+
+  .diff.remove& {
+    opacity: 0.7;
+    --fd-counter-color: var(--color-fd-diff-remove-symbol);
+    @apply bg-fd-diff-remove;
+  }
+
+  .diff.remove&::before {
+    content: '-';
+    @apply text-fd-diff-remove-symbol;
+  }
+
+  .diff.add& {
+    --fd-counter-color: var(--color-fd-diff-add-symbol);
+    @apply bg-fd-diff-add;
+  }
+
+  .diff.add&::before {
+    content: '+';
+    @apply text-fd-diff-add-symbol;
+  }
+
+  .highlighted& {
+    --fd-counter-color: var(--color-fd-primary);
+    padding-left: calc(var(--padding-left) - 2px);
+
+    @apply border-l-2 border-fd-primary/50 bg-fd-primary/10;
+  }
+
+  .highlighted-word& {
+    padding: 1px;
+    @apply border -my-px border-fd-primary/30 bg-fd-primary/10 rounded-md font-medium;
+  }
+}

package/docs/css/solar.css

@@ -0,0 +1,75 @@
+@import './colors/index.css';
+
+@theme {
+  --color-fd-primary: oklch(0.487 0.083 262.691);
+  --color-fd-article: hsl(0, 0%, 97%);
+}
+
+:root {
+  letter-spacing: -0.25px;
+}
+
+.dark {
+  --color-fd-primary: oklch(0.902 0.0461 259.51);
+  --color-fd-article: hsl(0, 0%, 7.04%);
+  --color-fd-background: hsl(0, 0%, 5.04%);
+}
+
+@variant md {
+  #nd-docs-layout {
+    #nd-page {
+      @apply relative md:px-9 xl:px-12;
+    }
+
+    #nd-page:before {
+      content: '';
+      @apply absolute inset-0 bg-fd-article rounded-xl border shadow-xl m-4 mb-2 -z-1;
+    }
+
+    [data-toc-popover-trigger],
+    [data-toc-popover-content] {
+      @apply px-4;
+    }
+
+    [data-toc-popover] {
+      top: calc(var(--fd-docs-row-1) + 2.5 * var(--spacing));
+      @apply mx-4 mt-2.5;
+
+      header {
+        transform-origin: top center;
+        @apply border rounded-xl shadow-lg transition-[margin] has-data-[active=true]:-mx-2 has-data-[active=true]:bg-fd-popover/80;
+      }
+    }
+  }
+
+  #nd-notebook-layout {
+    #nd-page {
+      @apply relative md:px-9 xl:px-12;
+    }
+
+    #nd-page:before {
+      content: '';
+      @apply absolute inset-0 bg-fd-article rounded-xl border shadow-xl m-4 mb-2 -z-1;
+    }
+
+    [data-toc-popover-trigger],
+    [data-toc-popover-content] {
+      @apply px-4;
+    }
+
+    [data-toc-popover] {
+      top: calc(var(--fd-docs-row-2) + 2.5 * var(--spacing));
+      @apply mx-4 mt-2.5;
+
+      header {
+        transform-origin: top center;
+        @apply border rounded-xl shadow-lg transition-[margin] has-data-[active=true]:-mx-2 has-data-[active=true]:bg-fd-popover/80;
+      }
+    }
+  }
+}
+
+#nd-sidebar[data-collapsed='false'] {
+  border: none;
+  @apply bg-fd-background;
+}

package/docs/css/style.css

@@ -0,0 +1,9 @@
+@import 'tailwindcss';
+@import './neutral.css';
+@import './preset.css';
+
+@layer base {
+  body {
+    @apply flex flex-col min-h-screen;
+  }
+}

package/docs/css/vitepress.css

@@ -0,0 +1,77 @@
+@import './colors/index.css';
+
+@theme {
+  --color-fd-muted: hsl(0, 0%, 96.1%);
+  --color-fd-popover: hsl(0, 0%, 100%);
+  --color-fd-popover-foreground: hsl(0, 0%, 15.1%);
+  --color-fd-card-foreground: hsl(0, 0%, 3.9%);
+  --color-fd-border: hsl(0, 0%, 89.8%);
+  --color-fd-primary-foreground: hsl(0, 0%, 98%);
+  --color-fd-secondary-foreground: hsl(0, 0%, 9%);
+  --color-fd-accent: hsl(0, 0%, 94.1%);
+  --color-fd-ring: hsl(0, 0%, 63.9%);
+
+  --color-fd-background: hsl(0, 0%, 100%);
+  --color-fd-card: hsl(0, 0%, 100%);
+  --color-fd-foreground: hsl(240, 6%, 25%);
+  --color-fd-muted-foreground: hsl(240, 6%, 50%);
+  --color-fd-secondary: hsl(240, 6%, 97%);
+  --color-fd-accent-foreground: hsl(240, 6%, 25%);
+  --color-fd-primary: hsl(226, 55%, 45%);
+}
+
+.dark {
+  --color-fd-ring: hsl(234, 100%, 83%);
+  --color-fd-primary: hsl(234, 100%, 83%);
+  --color-fd-secondary-foreground: hsl(60, 100%, 98%);
+  --color-fd-card-foreground: hsl(60, 100%, 98%);
+  --color-fd-background: hsl(240, 7%, 11%);
+  --color-fd-foreground: hsl(60, 100%, 98%);
+  --color-fd-popover: hsl(240, 7%, 11%);
+  --color-fd-popover-foreground: hsl(60, 100%, 98%);
+  --color-fd-primary-foreground: hsl(240, 7%, 11%);
+  --color-fd-card: hsl(240, 7%, 11%);
+  --color-fd-muted: hsl(0, 0%, 13%);
+  --color-fd-border: hsl(240, 4%, 19%);
+  --color-fd-accent: hsl(0, 0%, 15%);
+  --color-fd-secondary: hsl(240, 4%, 9%);
+  --color-fd-accent-foreground: hsl(0, 0%, 100%);
+  --color-fd-muted-foreground: hsl(240, 4%, 65%);
+}
+
+.prose {
+  --tw-prose-body: color-mix(
+    in oklab,
+    var(--color-fd-foreground) 85%,
+    transparent
+  );
+  --tw-prose-headings: color-mix(
+    in oklab,
+    var(--color-fd-foreground) 85%,
+    transparent
+  );
+  --tw-prose-links: var(--color-fd-primary);
+  --tw-prose-code: var(--color-fd-primary);
+}
+
+.prose :where(code):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+  border: none;
+  background-color: color-mix(
+    in oklab,
+    var(--color-fd-primary) 10%,
+    transparent
+  );
+}
+
+#nd-sidebar {
+  background-color: hsl(240, 6%, 97%);
+  border-color: transparent;
+}
+
+.dark #nd-sidebar {
+  background-color: hsl(240, 4%, 9%);
+}
+
+button[data-search-full] {
+  background-color: var(--color-fd-background);
+}

package/docs/i18n.tsx

@@ -0,0 +1,30 @@
+import type { Translations } from '@/contexts/i18n';
+import type { I18nProviderProps } from './provider/base';
+import type { I18nConfig } from '@hanzo/docs-core/i18n';
+
+export type { I18nProviderProps, Translations };
+export { defaultTranslations } from './contexts/i18n';
+
+export function defineI18nUI<Languages extends string>(
+  config: I18nConfig<Languages>,
+  options: {
+    translations: {
+      [K in Languages]?: Partial<Translations> & { displayName?: string };
+    };
+  },
+) {
+  const { translations } = options;
+
+  return {
+    provider(locale: string = config.defaultLanguage): I18nProviderProps {
+      return {
+        locale,
+        translations: translations[locale as Languages],
+        locales: config.languages.map((locale) => ({
+          locale,
+          name: translations[locale]?.displayName ?? locale,
+        })),
+      };
+    },
+  };
+}