@hanzo/ui 5.0.0 → 5.0.1

package/src/registry/index.ts

@@ -0,0 +1,60 @@
+import { z } from "zod"
+
+// Define the file schema to match hanzo/ui's format
+export const fileSchema = z.object({
+  path: z.string(),
+  content: z.string().optional(),
+  type: z.string(),
+  target: z.string().optional(),
+})
+
+// Registry item schema aligned with hanzo/ui format
+export const registryItemSchema = z.object({
+  name: z.string(),
+  type: z.string(),
+  description: z.string().optional(),
+  author: z.string().optional(),
+  dependencies: z.array(z.string()).optional(),
+  devDependencies: z.array(z.string()).optional(),
+  registryDependencies: z.array(z.string()).optional(),
+  files: z.array(fileSchema).optional(),
+  meta: z.record(z.any()).optional(),
+  title: z.string().optional(),
+  cssVars: z.record(z.any()).optional(),
+  tailwind: z.record(z.any()).optional(),
+  category: z.string().optional(),
+  subcategory: z.string().optional(),
+})
+
+// Registry schema aligned with hanzo/ui format
+export const registrySchema = z.object({
+  $schema: z.string().optional(),
+  name: z.string(),
+  homepage: z.string().optional(),
+  style: z.string().optional(),
+  items: z.array(registryItemSchema),
+})
+
+// Schema for a registry with full content
+export const registryWithContentSchema = registrySchema.extend({
+  items: z.array(
+    registryItemSchema.extend({
+      files: z.array(
+        fileSchema.extend({
+          content: z.string(),
+        })
+      ),
+    })
+  ),
+})
+
+// Type definitions for easier use in TypeScript
+export type RegistryItem = z.infer<typeof registryItemSchema>
+export type Registry = z.infer<typeof registrySchema>
+export type RegistryWithContent = z.infer<typeof registryWithContentSchema>
+export type RegistryFile = z.infer<typeof fileSchema>
+
+// Support CommonJS
+if (typeof module !== 'undefined') {
+  module.exports = { fileSchema, registryItemSchema, registrySchema, registryWithContentSchema }
+}

package/src/registry/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@hanzo/ui-registry",
+  "private": true,
+  "type": "module",
+  "main": "../dist/registry/index.js",
+  "types": "../dist/registry/index.d.ts",
+  "scripts": {
+    "build": "tsc"
+  }
+}

package/src/utils.ts

@@ -0,0 +1,19 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export function formatDate(input: string | number): string {
+  const date = new Date(input)
+  return date.toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+  })
+}
+
+export function absoluteUrl(path: string) {
+  return `${process.env.NEXT_PUBLIC_APP_URL || ''}${path}`
+}

package/style/drawer.css

@@ -0,0 +1,163 @@
+/*  This is a copy of vaul/src/style.css */
+
+[vaul-drawer] {
+  touch-action: none;
+  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+[vaul-drawer][vaul-drawer-direction='bottom'] {
+  transform: translate3d(0, 100%, 0);
+}
+
+[vaul-drawer][vaul-drawer-direction='top'] {
+  transform: translate3d(0, -100%, 0);
+}
+
+[vaul-drawer][vaul-drawer-direction='left'] {
+  transform: translate3d(-100%, 0, 0);
+}
+
+[vaul-drawer][vaul-drawer-direction='right'] {
+  transform: translate3d(100%, 0, 0);
+}
+
+.vaul-dragging .vaul-scrollable [vault-drawer-direction='top'] {
+  overflow-y: hidden !important;
+}
+.vaul-dragging .vaul-scrollable [vault-drawer-direction='bottom'] {
+  overflow-y: hidden !important;
+}
+
+.vaul-dragging .vaul-scrollable [vault-drawer-direction='left'] {
+  overflow-x: hidden !important;
+}
+
+.vaul-dragging .vaul-scrollable [vault-drawer-direction='right'] {
+  overflow-x: hidden !important;
+}
+
+[vaul-drawer][vaul-drawer-visible='true'][vaul-drawer-direction='top'] {
+  transform: translate3d(0, var(--snap-point-height, 0), 0);
+}
+
+[vaul-drawer][vaul-drawer-visible='true'][vaul-drawer-direction='bottom'] {
+  transform: translate3d(0, var(--snap-point-height, 0), 0);
+}
+
+[vaul-drawer][vaul-drawer-visible='true'][vaul-drawer-direction='left'] {
+  transform: translate3d(var(--snap-point-height, 0), 0, 0);
+}
+
+[vaul-drawer][vaul-drawer-visible='true'][vaul-drawer-direction='right'] {
+  transform: translate3d(var(--snap-point-height, 0), 0, 0);
+}
+
+[vaul-overlay] {
+  opacity: 0;
+  transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+[vaul-overlay][vaul-drawer-visible='true'] {
+  opacity: 1;
+}
+
+[vaul-drawer]::after {
+  content: '';
+  position: absolute;
+  background: inherit;
+  background-color: inherit;
+}
+
+[vaul-drawer][vaul-drawer-direction='top']::after {
+  top: initial;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  height: 200%;
+}
+
+[vaul-drawer][vaul-drawer-direction='bottom']::after {
+  top: 100%;
+  bottom: initial;
+  left: 0;
+  right: 0;
+  height: 200%;
+}
+
+[vaul-drawer][vaul-drawer-direction='left']::after {
+  left: initial;
+  right: 100%;
+  top: 0;
+  bottom: 0;
+  width: 200%;
+}
+
+[vaul-drawer][vaul-drawer-direction='right']::after {
+  left: 100%;
+  right: initial;
+  top: 0;
+  bottom: 0;
+  width: 200%;
+}
+
+[vaul-handle] {
+  display: block;
+  position: relative;
+  opacity: 0.8;
+  margin-left: auto;
+  margin-right: auto;
+  height: 5px;
+  width: 56px;
+  border-radius: 1rem;
+  touch-action: pan-y;
+  cursor: grab;
+}
+
+[vaul-handle]:hover,
+[vaul-handle]:active {
+  opacity: 1;
+}
+
+[vaul-handle]:active {
+  cursor: grabbing;
+}
+
+[vaul-handle-hitarea] {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: max(100%, 2.75rem); /* 44px */
+  height: max(100%, 2.75rem); /* 44px */
+  touch-action: inherit;
+}
+
+[vaul-overlay][vaul-snap-points='true']:not([vaul-snap-points-overlay='true']):not([data-state='closed']) {
+  opacity: 0;
+}
+
+[vaul-overlay][vaul-snap-points-overlay='true']:not([vaul-drawer-visible='false']) {
+  opacity: 1;
+}
+
+/* This will allow us to not animate via animation, but still benefit from delaying unmount via Radix. */
+@keyframes fake-animation {
+  from {
+  }
+  to {
+  }
+}
+
+@media (pointer: fine) {
+  [vaul-handle-hitarea] {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+@media (hover: hover) and (pointer: fine) {
+  [vaul-drawer] {
+    user-select: none;
+  }
+}
+

package/style/globals.css

@@ -0,0 +1,13 @@
+/* Note, preflight is applied first: 
+  https://unpkg.com/tailwindcss@3.3.5/src/css/preflight.css
+*/
+@import "tailwindcss/base";
+
+/* see https://stackoverflow.com/questions/69746121/using-nextjs-how-can-you-import-in-css-using-tailwind-css */
+@import "hanzo-common";
+@import "hanzo-default-colors";
+
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+

package/style/hanzo-common.css

@@ -0,0 +1,31 @@
+@tailwind base;
+/* see https://stackoverflow.com/questions/69746121/using-nextjs-how-can-you-import-in-css-using-tailwind-css */
+
+@layer base {
+  
+  * {
+    box-sizing: inherit;
+  }
+
+  /*
+    using this approach: 
+    https://stackoverflow.com/a/76066443/11645689
+    see src/app/(home)/scroll-snap
+  */
+
+  html {
+    scroll-snap-type: y mandatory;
+    height: 100vh;
+
+    overflow-y: scroll;
+    box-sizing: border-box;
+
+    scrollbar-width: none;
+  }
+
+  body {
+    font-feature-settings: "rlig" 1, "calt" 1;
+    font-size: 16px; 
+    letter-spacing: 0.15px;
+  }
+}

package/style/hanzo-default-colors.css

@@ -0,0 +1,82 @@
+@tailwind base;
+/* see https://stackoverflow.com/questions/69746121/using-nextjs-how-can-you-import-in-css-using-tailwind-css */
+
+@layer base {
+
+  :root, .hanzo-ui-light-theme {
+    --hz-ui-fg-0: hsl(0 0% 0%);
+    --hz-ui-fg-body: hsl(0 0% 10%);
+    --hz-ui-fg-1: hsl(0 0% 20%);
+    --hz-ui-fg-2: hsl(0 0% 35%);
+    --hz-ui-fg-3: hsl(0 0% 50%);
+    --hz-ui-fg-4: hsl(0 0% 70%);
+    --hz-ui-fg-5: hsl(0 0% 90%);
+
+    --hz-ui-bg-0: hsl(0 0% 100%);
+    --hz-ui-bg-1: hsl(0 0% 90%);
+    --hz-ui-bg-2: hsl(0 0% 75%);
+    --hz-ui-bg-3: hsl(0 0% 55%);
+
+    --hz-ui-bg-overlay: hsla(0 0% 100% 0.60);
+
+    --hz-ui-bg-inverted: var(--hz-ui-fg-0);
+    --hz-ui-bg-inverted-hover:  hsla(0 0% 0% 0.85);
+
+    --hz-ui-fg-inverted: var(--hz-ui-bg-0);
+
+    --hz-ui-secondary-0: hsl(266, 79%, 80%);
+    --hz-ui-secondary-1: hsl(266, 79%, 70%);
+    --hz-ui-secondary-2: hsl(266, 79%, 60%);
+    --hz-ui-secondary-3: hsl(266, 79%, 50%);
+
+    --hz-ui-primary: var(--hz-ui-bg-inverted);
+    --hz-ui-primary-hover: var(--hz-ui-bg-inverted-hover);
+    --hz-ui-primary-fg: var(--hz-ui-fg-inverted);
+
+    --hz-ui-secondary: var(--hz-ui-secondary-0);
+    --hz-ui-secondary-hover: var(--hz-ui-secondary-2);
+    --hz-ui-secondary-fg: var(--hz-ui-fg-0);
+
+    --hz-ui-nav: var(--hz-ui-fg-4);
+    --hz-ui-nav-current: var(--hz-ui-fg-0);
+    --hz-ui-nav-hover: var(--hz-ui-fg-0);
+
+    --hz-ui-destructive: hsl(0 62.8% 45%);
+    --hz-ui-destructive-hover: hsl(0 62.8% 25%);
+    --hz-ui-destructive-fg: hsl(0 0% 100%);
+
+    --hz-ui-ring: var(--hz-ui-fg-2);
+
+    --hz-ui-radius: 0.5rem;
+  }
+ 
+  .hanzo-ui-dark-theme {
+
+    --hz-ui-fg-0: hsl(0 0% 100%);
+    --hz-ui-fg-body: hsl(0, 0%, 97%);
+    --hz-ui-fg-1: hsl(0 0% 85%);
+    --hz-ui-fg-2: hsl(0 0% 70%);
+    --hz-ui-fg-3: hsl(0 0% 55%);
+    --hz-ui-fg-4: hsl(0 0% 40%);
+    --hz-ui-fg-5: hsl(0 0% 25%);
+
+    --hz-ui-bg-inverted: var(--hz-ui-fg-0);
+    --hz-ui-bg-inverted-hover:  hsla(0, 0%, 100%, 0.85);
+
+    --hz-ui-bg-3: hsl(0 0% 25%);
+    --hz-ui-bg-2: hsl(0 0% 18%);
+    --hz-ui-bg-1: hsl(0 0% 12%);
+    --hz-ui-bg-0: hsl(0 0% 0%);
+
+    --hz-ui-bg-overlay: hsla(0 0% 0% 0.60);
+
+    --hz-ui-fg-inverted: var(--hz-ui-bg-0);
+
+    --hz-ui-secondary-0: hsl(266, 79%, 40%);
+    --hz-ui-secondary-1: hsl(266, 79%, 50%);
+    --hz-ui-secondary-2: hsl(266, 79%, 60%);
+    --hz-ui-secondary-3: hsl(266, 79%, 70%);
+  }
+
+}
+

package/style/theme-provider.tsx

@@ -0,0 +1,20 @@
+"use client"
+
+import React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+import { ThemeProviderProps } from "next-themes/dist/types"
+
+const ThemeProvider: React.FC<ThemeProviderProps> = ({ children, ...props }) => (
+  <NextThemesProvider 
+    attribute="class" 
+    {...props}
+    value={{
+      light: 'hanzo-ui-light-theme',
+      dark: 'hanzo-ui-dark-theme'
+    }}
+  >
+    {children}
+  </NextThemesProvider>
+)
+
+export default ThemeProvider

package/tailwind/colors.tailwind.js

@@ -0,0 +1,53 @@
+export default ({ colors }) => ({
+  inherit: colors.inherit,
+  current: colors.current,
+  transparent: colors.transparent,
+  ring: "var(--hz-ui-ring)",
+  background: 'var(--hz-ui-bg-0)',
+    // Should be partially transparent,
+    // so opacity animations in 'vaul' module and other 3rd party stuff work
+  overlay: 'var(--hz-ui-bg-overlay)', 
+  
+    // levels forward in z-index (a la Material Design)
+  level: {
+    DEFAULT: "var(--hz-ui-bg-0)",
+    '0': "var(--hz-ui-bg-0)",
+    '1': "var(--hz-ui-bg-1)",
+    '2': "var(--hz-ui-bg-2)",
+    '3': "var(--hz-ui-bg-3)",
+  },
+  accent: "var(--hz-ui-fg-0)",      // full contrast (darkTheme:white) : heading and links hover
+  foreground: "var(--hz-ui-fg-body)", // body text off-white (bright enough to contrast to bg-level-1)
+  muted: {
+    DEFAULT: "var(--hz-ui-fg-2)",   // de-emphasized: fine print
+    '1': "var(--hz-ui-fg-2)",       // synonymous ^^^
+    '2': "var(--hz-ui-fg-3)",       // disabled or very de-emphasized
+    '3': "var(--hz-ui-fg-4)",       // very disabled ;)
+    '4': "var(--hz-ui-fg-5)",       // disabled border
+  },
+  primary: {
+    DEFAULT: "var(--hz-ui-primary)",
+    lux: "var(--hz-ui-primary)", // in case there are two configs
+    hover: "var(--hz-ui-primary-hover)",
+    fg: "var(--hz-ui-primary-fg)",
+  },
+  secondary: {
+    DEFAULT: "var(--hz-ui-secondary)",
+    lux: "var(--hz-ui-secondary)", // in case there are two configs
+    hover: "var(--hz-ui-secondary-hover)",
+    fg: "var(--hz-ui-secondary-fg)",
+    '0': 'var(--hz-ui-secondary-0)', 
+    '1': 'var(--hz-ui-secondary-1)', 
+    '2': 'var(--hz-ui-secondary-2)', 
+    '3': 'var(--hz-ui-secondary-3)', 
+  },
+  destructive: {
+    DEFAULT: "var(--hz-ui-destructive)",
+    fg: "var(--hz-ui-destructive-fg)",
+  },
+  nav: {
+    DEFAULT: "var(--hz-ui-nav)",
+    hover: "var(--hz-ui-nav-hover)",
+    current: "var(--hz-ui-nav-current)",
+  },
+})

package/tailwind/fontFamily.tailwind.ts

@@ -0,0 +1,7 @@
+export default {
+  sans: ['sans-serif'],
+  heading: ['serif'],
+  nav: ['serif'],
+  serif: ['serif'],
+  mono: ['monospace']
+} 

package/tailwind/fontSize.tailwind.ts

@@ -0,0 +1,13 @@
+export default {
+  xxs: ['0.65rem', { lineHeight: '0.8rem' }],    // very fine print               
+  xs: ['0.8rem', { lineHeight: '1rem' }],       // fine print               
+  sm: ['0.9rem', { lineHeight: '1.2rem' }],     // 'standard' some news article cards  (set manually when using typography-sm)
+  base: ['1rem', { lineHeight: 1.4 }],     
+  lg: ['1.125rem', { lineHeight: '1.75rem' }],  
+  xl: ['1.25rem', { lineHeight: '1.75rem' }],   
+  '2xl': ['1.5rem', { lineHeight: '2rem' }],    
+  '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
+  '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
+  '5xl': ['3rem', { lineHeight: '1' }],
+  '6xl': ['3.75rem', { lineHeight: '1' }],
+}

package/tailwind/index.ts

@@ -0,0 +1,7 @@
+import preset from './tailwind.config.hanzo-preset'
+import type TwFontDesc from './tw-font-desc'
+
+export {
+  preset,
+  type TwFontDesc
+}

package/tailwind/safelist.tailwind.js

@@ -0,0 +1,26 @@
+  // https://tailwindcss.com/docs/content-configuration#dynamic-class-names
+  // https://tailwindcss.com/docs/content-configuration#safelisting-classes
+export default [
+
+  'font-sans',
+  { 
+    pattern: /grid-cols-[1-6]/,
+    variants: [ 'xs', 'sm', 'md', 'lg', 'xl', '2xl' ]
+  },
+  { // SpaceBlock
+    pattern: /h-([0-9]|[1-3][0-9]|40)/,
+    variants: [ 'xs', 'sm', 'md', 'lg', 'xl', '2xl' ]
+  },
+  { 
+    pattern: /order-[0-6]/
+  },
+  { // EnhHeadingBlock
+    pattern: /mb-([1-9]|1[0-2])/
+  },
+  'md:text-left', // EnhHeadingBlock
+  'md:text-center',
+  'md:text-right',
+  'md:self-start',
+  'md:self-center',
+  'md:self-end',
+]

package/tailwind/screens.tailwind.js

@@ -0,0 +1,8 @@
+export default {
+  xs: '0px',   // <-- phone
+  sm: '480px', // phone --><-- sm tablets / narrow
+  md: '768px', // sm tablets / narrow -->
+  lg: '1024px',
+  xl: '1280px',
+  '2xl': '1500px', 
+}

package/tailwind/spacing.tailwind.js

@@ -0,0 +1,65 @@
+const percentages = {}
+for (let i = 0; i <= 100; i++) {
+  percentages[`pr-${i}`] = `${i}%` 
+}
+
+
+export default {
+  ...percentages,
+  px: '1px',
+  0: '0px',
+  0.5: '0.125rem',
+  1: '0.25rem',
+  1.5: '0.375rem',
+  2: '0.5rem',
+  2.5: '0.625rem',
+  3: '0.75rem',
+  3.5: '0.875rem',
+  4: '1rem',
+  5: '1.25rem',
+  6: '1.5rem',
+  7: '1.75rem',
+  8: '2rem',
+  9: '2.25rem',
+  10: '2.5rem',
+  11: '2.75rem',
+  12: '3rem',
+  13: '3.25rem',
+  14: '3.5rem',
+  15: '3.75rem',
+  16: '4rem',
+  17: '4.25rem',
+  18: '4.5rem',
+  19: '4.75rem',
+  20: '5rem',
+  21: '5.25rem',
+  22: '5.5rem',
+  23: '5.75rem',
+  24: '6rem',
+  25: '5.25rem',
+  26: '5.5rem',
+  27: '5.75rem',
+  28: '7rem',
+  29: '7.25rem',
+  30: '7.5rem',
+  31: '7.75rem',
+  32: '8rem',
+  33: '8.25rem',
+  34: '8.5rem',
+  35: '8.75rem',
+  36: '9rem',
+  37: '9.25rem',
+  38: '9.5rem',
+  39: '9.75rem',
+  40: '10rem',
+  44: '11rem',
+  48: '12rem',
+  52: '13rem',
+  56: '14rem',
+  60: '15rem',
+  64: '16rem',
+  72: '18rem',
+  80: '20rem',
+  96: '24rem',
+}
+

package/tailwind/tailwind.config.hanzo-preset.d.ts

@@ -0,0 +1,5 @@
+import type { Config } from 'tailwindcss'
+
+declare const conf: Config
+
+export default conf