@papernote/ui 1.7.7 → 1.8.0

package/dist/styles.css

@@ -2304,11 +2304,6 @@ input:checked + .slider:before{
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.translate-y-full{
-  --tw-translate-y: 100%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .-rotate-90{
   --tw-rotate: -90deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2347,9 +2342,9 @@ input:checked + .slider:before{
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.scale-75{
-  --tw-scale-x: .75;
-  --tw-scale-y: .75;
+.scale-125{
+  --tw-scale-x: 1.25;
+  --tw-scale-y: 1.25;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
@@ -2620,6 +2615,10 @@ input:checked + .slider:before{
   cursor: pointer;
 }
 
+.touch-none{
+  touch-action: none;
+}
+
 .select-none{
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -2642,6 +2641,18 @@ input:checked + .slider:before{
   resize: both;
 }
 
+.snap-x{
+  scroll-snap-type: x var(--tw-scroll-snap-strictness);
+}
+
+.snap-mandatory{
+  --tw-scroll-snap-strictness: mandatory;
+}
+
+.snap-start{
+  scroll-snap-align: start;
+}
+
 .list-inside{
   list-style-position: inside;
 }
@@ -3460,6 +3471,11 @@ input:checked + .slider:before{
   background-color: rgb(214 211 209 / var(--tw-bg-opacity, 1));
 }
 
+.bg-paper-400{
+  --tw-bg-opacity: 1;
+  background-color: rgb(168 162 158 / var(--tw-bg-opacity, 1));
+}
+
 .bg-paper-50{
   --tw-bg-opacity: 1;
   background-color: rgb(250 250 249 / var(--tw-bg-opacity, 1));
@@ -3856,6 +3872,10 @@ input:checked + .slider:before{
   padding-bottom: 4rem;
 }
 
+.pb-2{
+  padding-bottom: 0.5rem;
+}
+
 .pb-20{
   padding-bottom: 5rem;
 }
@@ -4409,6 +4429,10 @@ input:checked + .slider:before{
   opacity: 0.75;
 }
 
+.opacity-80{
+  opacity: 0.8;
+}
+
 .opacity-90{
   opacity: 0.9;
 }
@@ -4490,6 +4514,12 @@ input:checked + .slider:before{
   outline-style: solid;
 }
 
+.ring{
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
 .ring-1{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -4602,6 +4632,10 @@ input:checked + .slider:before{
   transition-duration: 150ms;
 }
 
+.transition-none{
+  transition-property: none;
+}
+
 .transition-opacity{
   transition-property: opacity;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -4665,6 +4699,15 @@ input:checked + .slider:before{
     -webkit-line-clamp: 3;
   }
 
+.scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+.scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
+
 /* Custom scrollbar - Subtle paper aesthetic */
 
 ::-webkit-scrollbar {
@@ -4932,6 +4975,39 @@ input:checked + .slider:before{
   animation: slideInBottom 0.3s ease-out;
 }
 
+/* Touch-friendly sizing for coarse pointer devices (touch screens) */
+
+@media (pointer: coarse) {
+  /* Ensure buttons meet 48px minimum touch target on touch devices */
+  .btn,
+  button.touch-friendly,
+  .touch-target {
+    min-height: 48px;
+    min-width: 48px;
+  }
+
+  /* Larger tap targets for inputs on touch devices */
+  .input,
+  input[type="text"],
+  input[type="email"],
+  input[type="password"],
+  input[type="number"],
+  input[type="tel"],
+  input[type="url"],
+  input[type="search"],
+  select,
+  textarea {
+    min-height: 48px;
+  }
+
+  /* Larger checkbox/radio hit areas */
+  input[type="checkbox"],
+  input[type="radio"] {
+    min-width: 24px;
+    min-height: 24px;
+  }
+}
+
 .first\:rounded-t-lg:first-child{
   border-top-left-radius: 0.5rem;
   border-top-right-radius: 0.5rem;
@@ -5064,6 +5140,10 @@ input:checked + .slider:before{
   background-color: rgb(86 85 72 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-black\/10:hover{
+  background-color: rgb(0 0 0 / 0.1);
+}
+
 .hover\:bg-blue-50:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
@@ -5134,6 +5214,11 @@ input:checked + .slider:before{
   background-color: rgb(231 229 228 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-paper-400:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(168 162 158 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-paper-50:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(250 250 249 / var(--tw-bg-opacity, 1));
@@ -5655,10 +5740,35 @@ input:checked + .slider:before{
     padding-right: 2rem;
   }
 
+  .sm\:text-2xl{
+    font-size: 1.5rem;
+    line-height: 2.25rem;
+  }
+
+  .sm\:text-base{
+    font-size: 1rem;
+    line-height: 1.625rem;
+  }
+
+  .sm\:text-lg{
+    font-size: 1.125rem;
+    line-height: 1.875rem;
+  }
+
   .sm\:text-sm{
     font-size: 0.875rem;
     line-height: 1.375rem;
   }
+
+  .sm\:text-xl{
+    font-size: 1.25rem;
+    line-height: 2rem;
+  }
+
+  .sm\:text-xs{
+    font-size: 0.75rem;
+    line-height: 1.125rem;
+  }
 }
 
 @media (min-width: 768px){
@@ -5730,6 +5840,36 @@ input:checked + .slider:before{
   .md\:pr-8{
     padding-right: 2rem;
   }
+
+  .md\:text-2xl{
+    font-size: 1.5rem;
+    line-height: 2.25rem;
+  }
+
+  .md\:text-base{
+    font-size: 1rem;
+    line-height: 1.625rem;
+  }
+
+  .md\:text-lg{
+    font-size: 1.125rem;
+    line-height: 1.875rem;
+  }
+
+  .md\:text-sm{
+    font-size: 0.875rem;
+    line-height: 1.375rem;
+  }
+
+  .md\:text-xl{
+    font-size: 1.25rem;
+    line-height: 2rem;
+  }
+
+  .md\:text-xs{
+    font-size: 0.75rem;
+    line-height: 1.125rem;
+  }
 }
 
 @media (min-width: 1024px){
@@ -5789,6 +5929,36 @@ input:checked + .slider:before{
   .lg\:pr-20{
     padding-right: 5rem;
   }
+
+  .lg\:text-2xl{
+    font-size: 1.5rem;
+    line-height: 2.25rem;
+  }
+
+  .lg\:text-base{
+    font-size: 1rem;
+    line-height: 1.625rem;
+  }
+
+  .lg\:text-lg{
+    font-size: 1.125rem;
+    line-height: 1.875rem;
+  }
+
+  .lg\:text-sm{
+    font-size: 0.875rem;
+    line-height: 1.375rem;
+  }
+
+  .lg\:text-xl{
+    font-size: 1.25rem;
+    line-height: 2rem;
+  }
+
+  .lg\:text-xs{
+    font-size: 0.75rem;
+    line-height: 1.125rem;
+  }
 }
 
 @media (min-width: 1280px){

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@papernote/ui",
-  "version": "1.7.7",
+  "version": "1.8.0",
   "type": "module",
   "description": "A modern React component library with a paper notebook aesthetic - minimal, professional, and expressive",
   "main": "dist/index.js",

package/src/components/Badge.tsx

@@ -10,6 +10,8 @@ export interface BadgeProps {
   className?: string;
   /** Show as dot indicator (no text, just a colored dot) */
   dot?: boolean;
+  /** Use pill shape (more rounded, compact padding) for inline use */
+  pill?: boolean;
 }
 
 export default function Badge({
@@ -20,6 +22,7 @@ export default function Badge({
   onRemove,
   className = '',
   dot = false,
+  pill = false,
 }: BadgeProps) {
   const variantStyles = {
     success: 'bg-success-50 text-success-700 border-success-200',
@@ -43,6 +46,13 @@ export default function Badge({
     lg: 'px-3 py-1.5 text-sm gap-2',
   };
 
+  // Pill variant has tighter horizontal padding and fully rounded ends
+  const pillSizeStyles = {
+    sm: 'px-1.5 py-0.5 text-xs gap-1',
+    md: 'px-2 py-0.5 text-xs gap-1',
+    lg: 'px-2.5 py-1 text-sm gap-1.5',
+  };
+
   const dotSizeStyles = {
     sm: 'h-1.5 w-1.5',
     md: 'h-2 w-2',
@@ -74,9 +84,10 @@ export default function Badge({
   return (
     <span
       className={`
-        inline-flex items-center rounded-full border font-medium
+        inline-flex items-center border font-medium
+        ${pill ? 'rounded-full' : 'rounded-full'}
         ${variantStyles[variant]}
-        ${sizeStyles[size]}
+        ${pill ? pillSizeStyles[size] : sizeStyles[size]}
         ${className}
       `}
     >