@pattern-stack/frontend-patterns 0.2.0-alpha.1 → 0.2.0-alpha.3

package/dist/frontend-patterns.css

@@ -576,6 +576,7 @@
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-red-600: oklch(57.7% 0.245 27.325);
     --color-red-800: oklch(44.4% 0.177 26.899);
+    --color-amber-500: oklch(76.9% 0.188 70.08);
     --color-yellow-600: oklch(68.1% 0.162 75.834);
     --color-yellow-800: oklch(47.6% 0.114 61.907);
     --color-green-100: oklch(96.2% 0.044 156.743);
@@ -601,6 +602,11 @@
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
+    --breakpoint-sm: 40rem;
+    --breakpoint-md: 48rem;
+    --breakpoint-lg: 64rem;
+    --breakpoint-xl: 80rem;
+    --breakpoint-2xl: 96rem;
     --container-xs: 20rem;
     --container-sm: 24rem;
     --container-md: 28rem;
@@ -908,6 +914,9 @@
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
+  .inset-x-0 {
+    inset-inline: calc(var(--spacing) * 0);
+  }
   .inset-y-0 {
     inset-block: calc(var(--spacing) * 0);
   }
@@ -1265,6 +1274,9 @@
   .max-h-\[90vh\] {
     max-height: 90vh;
   }
+  .max-h-\[500px\] {
+    max-height: 500px;
+  }
   .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }
@@ -1460,6 +1472,21 @@
   .max-w-none {
     max-width: none;
   }
+  .max-w-screen-2xl {
+    max-width: var(--breakpoint-2xl);
+  }
+  .max-w-screen-lg {
+    max-width: var(--breakpoint-lg);
+  }
+  .max-w-screen-md {
+    max-width: var(--breakpoint-md);
+  }
+  .max-w-screen-sm {
+    max-width: var(--breakpoint-sm);
+  }
+  .max-w-screen-xl {
+    max-width: var(--breakpoint-xl);
+  }
   .max-w-sm {
     max-width: var(--container-sm);
   }
@@ -1679,6 +1706,9 @@
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
+  .gap-2\.5 {
+    gap: calc(var(--spacing) * 2.5);
+  }
   .gap-3 {
     gap: calc(var(--spacing) * 3);
   }
@@ -1954,6 +1984,12 @@
       background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
     }
   }
+  .bg-black\/80 {
+    background-color: color-mix(in srgb, #000 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
+    }
+  }
   .bg-blue-100 {
     background-color: var(--color-blue-100);
   }
@@ -2347,6 +2383,9 @@
   .whitespace-pre-wrap {
     white-space: pre-wrap;
   }
+  .text-amber-500 {
+    color: var(--color-amber-500);
+  }
   .text-black {
     color: var(--color-black);
   }
@@ -2438,6 +2477,9 @@
   .opacity-60 {
     opacity: 60%;
   }
+  .opacity-70 {
+    opacity: 70%;
+  }
   .opacity-100 {
     opacity: 100%;
   }
@@ -2849,6 +2891,13 @@
       }
     }
   }
+  .hover\:opacity-100 {
+    &:hover {
+      @media (hover: hover) {
+        opacity: 100%;
+      }
+    }
+  }
   .hover\:shadow {
     &:hover {
       @media (hover: hover) {
@@ -2987,6 +3036,18 @@
       opacity: 50%;
     }
   }
+  .data-\[state\=closed\]\:duration-300 {
+    &[data-state="closed"] {
+      --tw-duration: 300ms;
+      transition-duration: 300ms;
+    }
+  }
+  .data-\[state\=open\]\:duration-500 {
+    &[data-state="open"] {
+      --tw-duration: 500ms;
+      transition-duration: 500ms;
+    }
+  }
   .data-\[state\=selected\]\:bg-gray-100 {
     &[data-state="selected"] {
       background-color: var(--color-gray-100);
@@ -3032,6 +3093,11 @@
       width: auto;
     }
   }
+  .sm\:max-w-sm {
+    @media (width >= 40rem) {
+      max-width: var(--container-sm);
+    }
+  }
   .sm\:cursor-default {
     @media (width >= 40rem) {
       cursor: default;
@@ -3062,6 +3128,15 @@
       gap: calc(var(--spacing) * 2);
     }
   }
+  .sm\:space-x-2 {
+    @media (width >= 40rem) {
+      :where(& > :not(:last-child)) {
+        --tw-space-x-reverse: 0;
+        margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
+        margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
+      }
+    }
+  }
   .sm\:p-3 {
     @media (width >= 40rem) {
       padding: calc(var(--spacing) * 3);
@@ -4189,6 +4264,13 @@
   button {
     font-weight: 500;
   }
+  button svg,
+  a svg,
+  .inline-flex svg,
+  [class*="flex"] svg {
+    display: inline-block;
+    flex-shrink: 0;
+  }
 }
 @layer components {
   .content-container {

package/dist/index.d.ts

@@ -7,9 +7,12 @@ export * from "./templates";
 export * from "./organisms";
 export { cn } from "./atoms/utils/utils";
 export { apiClient } from "./atoms/services/api/client";
+export { Sheet, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, } from "./atoms/primitives/sheet";
 export { getFieldType, detectUIConfig } from "./atoms/utils/field-detection";
-export { renderField, defaultFieldRenderers } from "./atoms/utils/ui-mapping";
+export { renderField, defaultFieldRenderers, normalizeFieldType } from "./atoms/utils/ui-mapping";
 export type { FieldRendererRegistry } from "./atoms/utils/ui-mapping";
+export type { UIFieldType, UIFieldConfig, UIConfig, UIConfigurable, FieldRenderer, FieldFormat, } from "./atoms/types/ui-config";
+export type { UIType, UIImportance, ColumnMetadata, ColumnMetadataResponse, FieldGroupMetadata, } from "./atoms/types/ui-metadata";
 export { breakpoints, responsiveScales, getResponsiveClasses, getCurrentBreakpoint, } from "./atoms/config/responsive";
 export type { Breakpoint, ResponsiveValue, DisplayMode, ResponsiveColumnConfig, } from "./atoms/config/responsive";
 export { useBreakpoint, useResponsiveValue, useMediaQuery, useMaxMediaQuery, useResponsiveClasses, useIsMobile, useIsTablet, useIsDesktop, } from "./atoms/hooks/useResponsive";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,0CAA0C,CAAC;AAClD,OAAO,aAAa,CAAC;AAErB,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAS5B,OAAO,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAGxD,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC7E,OAAO,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAC9E,YAAY,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAGtE,OAAO,EACL,WAAW,EACX,gBAAgB,EAChB,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,2BAA2B,CAAC;AACnC,YAAY,EACV,UAAU,EACV,eAAe,EACf,WAAW,EACX,sBAAsB,GACvB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,aAAa,EACb,kBAAkB,EAClB,aAAa,EACb,gBAAgB,EAChB,oBAAoB,EACpB,WAAW,EACX,WAAW,EACX,YAAY,GACb,MAAM,6BAA6B,CAAC;AAGrC,YAAY,EACV,oBAAoB,EACpB,qBAAqB,EACrB,oBAAoB,EACpB,qBAAqB,EACrB,mBAAmB,EACnB,kBAAkB,EAClB,oBAAoB,EACpB,mBAAmB,EACnB,eAAe,GAChB,MAAM,8BAA8B,CAAC;AAGtC,OAAO,EACL,eAAe,EACf,uBAAuB,EACvB,yBAAyB,GAC1B,MAAM,8BAA8B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,0CAA0C,CAAC;AAClD,OAAO,aAAa,CAAC;AAErB,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAS5B,OAAO,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAGxD,OAAO,EACL,KAAK,EACL,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,WAAW,EACX,WAAW,EACX,UAAU,EACV,gBAAgB,GACjB,MAAM,0BAA0B,CAAC;AAGlC,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC7E,OAAO,EAAE,WAAW,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAClG,YAAY,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAGtE,YAAY,EACV,WAAW,EACX,aAAa,EACb,QAAQ,EACR,cAAc,EACd,aAAa,EACb,WAAW,GACZ,MAAM,yBAAyB,CAAC;AAGjC,YAAY,EACV,MAAM,EACN,YAAY,EACZ,cAAc,EACd,sBAAsB,EACtB,kBAAkB,GACnB,MAAM,2BAA2B,CAAC;AAGnC,OAAO,EACL,WAAW,EACX,gBAAgB,EAChB,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,2BAA2B,CAAC;AACnC,YAAY,EACV,UAAU,EACV,eAAe,EACf,WAAW,EACX,sBAAsB,GACvB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,aAAa,EACb,kBAAkB,EAClB,aAAa,EACb,gBAAgB,EAChB,oBAAoB,EACpB,WAAW,EACX,WAAW,EACX,YAAY,GACb,MAAM,6BAA6B,CAAC;AAGrC,YAAY,EACV,oBAAoB,EACpB,qBAAqB,EACrB,oBAAoB,EACpB,qBAAqB,EACrB,mBAAmB,EACnB,kBAAkB,EAClB,oBAAoB,EACpB,mBAAmB,EACnB,eAAe,GAChB,MAAM,8BAA8B,CAAC;AAGtC,OAAO,EACL,eAAe,EACf,uBAAuB,EACvB,yBAAyB,GAC1B,MAAM,8BAA8B,CAAC"}