@sybilion/uilib 1.3.4 → 1.3.6

package/dist/esm/components/ui/GridLayout/GridLayout.js

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import S from './GridLayout.styl.js';
+
+function GridLayout({ children, colWidth = 300, gap = 'var(--p-2)', className, as: asProp, }) {
+    const As = asProp ?? 'div';
+    return (jsx(As, { className: cn(S.root, className), style: {
+            maxWidth: '100%',
+            gap: gap,
+            display: 'grid',
+            gridTemplateColumns: `repeat(auto-fit, minmax(${colWidth}px, 1fr))`,
+        }, children: children }));
+}
+
+export { GridLayout };

package/dist/esm/components/ui/GridLayout/GridLayout.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.GridLayout_root__VF9sR{display:grid;min-width:0;width:100%}.GridLayout_root__VF9sR>*{min-width:300px}";
+var S = {"root":"GridLayout_root__VF9sR"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/Page/PageTabs/PageTabs.js

@@ -15,8 +15,8 @@ function hasTabPanelContent(content) {
         return false;
     return true;
 }
-function PageTabs({ className, contentClassName, scrollbarClassName, items, tabsListProps, ...props }) {
-    return (jsxs(Tabs, { className: cn(S.root, className), variant: "link", ...props, children: [jsx(TabsList, { ...tabsListProps, className: cn(S.list, tabsListProps?.withPaddings && S.withPaddings), children: jsx(PageXScroll, { size: "sm", scrollbarClassName: cn(S.scrollbar, scrollbarClassName), children: items.map(item => (jsx(TabsTrigger, { value: item.value, children: item.label }, item.value))) }) }), items.map(item => hasTabPanelContent(item.content) ? (jsx(TabsContent, { value: item.value, className: cn(S.content, contentClassName), children: item.content }, item.value)) : null)] }));
+function PageTabs({ className, contentClassName, innerClassName, scrollbarClassName, items, tabsListProps, ...props }) {
+    return (jsxs(Tabs, { className: cn(S.root, className), variant: "link", ...props, children: [jsx(TabsList, { ...tabsListProps, className: cn(S.list, tabsListProps?.withPaddings && S.withPaddings), children: jsx(PageXScroll, { size: "sm", scrollbarClassName: cn(S.scrollbar, scrollbarClassName), innerClassName: innerClassName, children: items.map(item => (jsx(TabsTrigger, { value: item.value, children: item.label }, item.value))) }) }), items.map(item => hasTabPanelContent(item.content) ? (jsx(TabsContent, { value: item.value, className: cn(S.content, contentClassName), children: item.content }, item.value)) : null)] }));
 }
 
 export { PageTabs };

package/dist/esm/index.js

@@ -36,6 +36,7 @@ export { DropZone } from './components/ui/DropZone/DropZone.js';
 export { FlickeringGrid } from './components/ui/FlickeringGrid/FlickeringGrid.js';
 export { Foldable } from './components/ui/Foldable/Foldable.js';
 export { Gap } from './components/ui/Gap/Gap.js';
+export { GridLayout } from './components/ui/GridLayout/GridLayout.js';
 export { Image } from './components/ui/Image/Image.js';
 export { ImageWithFallback } from './components/ui/ImageWithFallback/ImageWithFallback.js';
 export { Input } from './components/ui/Input/Input.js';

package/dist/esm/types/src/components/ui/GridLayout/GridLayout.d.ts

@@ -0,0 +1,9 @@
+import type { ElementType, ReactNode } from 'react';
+export interface GridLayoutProps {
+    children: ReactNode;
+    colWidth?: number;
+    gap?: string;
+    className?: string;
+    as?: ElementType;
+}
+export declare function GridLayout({ children, colWidth, gap, className, as: asProp, }: GridLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/ui/Page/PageTabs/PageTabs.d.ts

@@ -1,5 +1,5 @@
 import { TabsListProps, TabsProps } from '#uilib/components/ui/Tabs';
-export declare function PageTabs({ className, contentClassName, scrollbarClassName, items, tabsListProps, ...props }: {
+export declare function PageTabs({ className, contentClassName, innerClassName, scrollbarClassName, items, tabsListProps, ...props }: {
     items: {
         value: string;
         label: string;
@@ -11,5 +11,6 @@ export declare function PageTabs({ className, contentClassName, scrollbarClassNa
     };
 } & TabsProps & {
     contentClassName?: string;
+    innerClassName?: string;
     scrollbarClassName?: string;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/docs/pages/GridLayoutPage.d.ts

@@ -0,0 +1 @@
+export default function GridLayoutPage(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/index.d.ts

@@ -25,6 +25,7 @@ export * from './components/ui/DropZone/DropZone';
 export * from './components/ui/FlickeringGrid';
 export * from './components/ui/Foldable';
 export * from './components/ui/Gap/Gap';
+export * from './components/ui/GridLayout/GridLayout';
 export * from './components/ui/Image';
 export * from './components/ui/ImageWithFallback';
 export * from './components/ui/Input';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",

package/src/components/ui/GridLayout/GridLayout.styl

@@ -0,0 +1,9 @@
+@import '../../../lib/theme.styl'
+
+.root
+  display grid
+  width 100%
+  min-width 0
+
+  > *
+    min-width 300px

package/src/components/ui/GridLayout/GridLayout.styl.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'root': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/components/ui/GridLayout/GridLayout.tsx

@@ -0,0 +1,38 @@
+import cn from 'classnames';
+import type { CSSProperties, ElementType, ReactNode } from 'react';
+
+import S from './GridLayout.styl';
+
+export interface GridLayoutProps {
+  children: ReactNode;
+  colWidth?: number;
+  gap?: string;
+  className?: string;
+  as?: ElementType;
+}
+
+export function GridLayout({
+  children,
+  colWidth = 300,
+  gap = 'var(--p-2)',
+  className,
+  as: asProp,
+}: GridLayoutProps) {
+  const As = asProp ?? 'div';
+
+  return (
+    <As
+      className={cn(S.root, className)}
+      style={
+        {
+          maxWidth: '100%',
+          gap: gap,
+          display: 'grid',
+          gridTemplateColumns: `repeat(auto-fit, minmax(${colWidth}px, 1fr))`,
+        } as CSSProperties
+      }
+    >
+      {children}
+    </As>
+  );
+}

package/src/components/ui/Page/PageTabs/PageTabs.tsx

@@ -23,6 +23,7 @@ function hasTabPanelContent(content: React.ReactNode | undefined): boolean {
 export function PageTabs({
   className,
   contentClassName,
+  innerClassName,
   scrollbarClassName,
   items,
   tabsListProps,
@@ -33,7 +34,11 @@ export function PageTabs({
     fullWidth?: boolean;
     withPaddings?: boolean;
   };
-} & TabsProps & { contentClassName?: string; scrollbarClassName?: string }) {
+} & TabsProps & {
+    contentClassName?: string;
+    innerClassName?: string;
+    scrollbarClassName?: string;
+  }) {
   return (
     <Tabs className={cn(S.root, className)} variant="link" {...props}>
       <TabsList
@@ -43,6 +48,7 @@ export function PageTabs({
         <PageXScroll
           size="sm"
           scrollbarClassName={cn(S.scrollbar, scrollbarClassName)}
+          innerClassName={innerClassName}
         >
           {items.map(item => (
             <TabsTrigger value={item.value} key={item.value}>

package/src/docs/pages/GridLayoutPage.tsx

@@ -0,0 +1,64 @@
+import type { CSSProperties } from 'react';
+
+import { GridLayout } from '#uilib/components/ui/GridLayout/GridLayout';
+import { PageContentSection } from '#uilib/components/ui/Page';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+const tileStyle: CSSProperties = {
+  margin: 0,
+  padding: 'var(--p-4)',
+  borderRadius: 'var(--p-3)',
+  border: '1px solid var(--border)',
+  backgroundColor: 'var(--muted)',
+};
+
+function Tile({ label }: { label: string }) {
+  return <p style={tileStyle}>{label}</p>;
+}
+
+export default function GridLayoutPage() {
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'GridLayout' }]}
+        title="GridLayout"
+        subheader="Responsive CSS grid (`repeat(auto-fit, minmax(colWidth, 1fr))`), optional gap, polymorphic root via `as`."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection
+        style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}
+      >
+        <section>
+          <h3 style={{ marginBottom: '0.75rem' }}>Default (colWidth 300)</h3>
+          <p
+            style={{
+              marginBottom: '1rem',
+              color: 'var(--muted-foreground)',
+            }}
+          >
+            Tiles wrap to new rows when the viewport is narrow; each cell keeps
+            at least 300px min width before wrapping.
+          </p>
+          <GridLayout>
+            <Tile label="Item A" />
+            <Tile label="Item B" />
+            <Tile label="Item C" />
+            <Tile label="Item D" />
+          </GridLayout>
+        </section>
+        <section>
+          <h3 style={{ marginBottom: '0.75rem' }}>
+            colWidth 180, gap var(--p-4)
+          </h3>
+          <GridLayout colWidth={180} gap="var(--p-4)">
+            <Tile label="Narrow 1" />
+            <Tile label="Narrow 2" />
+            <Tile label="Narrow 3" />
+          </GridLayout>
+        </section>
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/registry.ts

@@ -157,6 +157,12 @@ export const DOC_REGISTRY: DocEntry[] = [
     section: 'Layout',
     load: () => import('./pages/FoldablePage'),
   },
+  {
+    slug: 'grid-layout',
+    title: 'GridLayout',
+    section: 'Layout',
+    load: () => import('./pages/GridLayoutPage'),
+  },
   {
     slug: 'image',
     title: 'Image',

package/src/index.ts

@@ -25,6 +25,7 @@ export * from './components/ui/DropZone/DropZone';
 export * from './components/ui/FlickeringGrid';
 export * from './components/ui/Foldable';
 export * from './components/ui/Gap/Gap';
+export * from './components/ui/GridLayout/GridLayout';
 export * from './components/ui/Image';
 export * from './components/ui/ImageWithFallback';
 export * from './components/ui/Input';