@tailor-platform/app-shell 0.22.0 → 0.23.0

package/dist/index.d.ts

@@ -258,6 +258,21 @@ export declare const badgeVariants: (props?: ({
  */
 declare type BadgeVariantType = "default" | "success" | "warning" | "error" | "neutral" | "outline-success" | "outline-warning" | "outline-error" | "outline-info" | "outline-neutral";
 
+/**
+ * Supported column count options
+ */
+declare type ColumnCount = 1 | 2 | 3;
+
+/**
+ * Props for individual Layout.Column component
+ */
+declare interface ColumnProps {
+    /** Additional CSS classes */
+    className?: string;
+    /** Child content */
+    children?: ReactNode;
+}
+
 /**
  * Column layout options for the card
  */
@@ -658,6 +673,57 @@ declare type LabelDefinition<Def extends Record<string, LabelValue>> = {
  */
 declare type LabelValue = string | ((props: any) => string);
 
+/**
+ * Layout - Responsive column layout component
+ *
+ * Automatically handles responsive behavior for 1, 2, or 3 column layouts.
+ * Uses flexbox with viewport breakpoints for simple, CSS-only responsive behavior.
+ *
+ * @example
+ * ```tsx
+ * // Basic layout
+ * <Layout columns={2}>
+ *   <Layout.Column>Main content</Layout.Column>
+ *   <Layout.Column>Side panel</Layout.Column>
+ * </Layout>
+ *
+ * // With header and actions
+ * <Layout columns={2} title="Page Title" actions={[<Button key="save">Save</Button>]}>
+ *   <Layout.Column>...</Layout.Column>
+ *   <Layout.Column>...</Layout.Column>
+ * </Layout>
+ * ```
+ */
+export declare function Layout({ columns, className, gap, title, actions, children, }: LayoutProps): JSX.Element;
+
+export declare namespace Layout {
+    var Column: React_2.ForwardRefExoticComponent<ColumnProps & React_2.RefAttributes<HTMLDivElement>>;
+}
+
+/**
+ * Props for the Layout component
+ */
+export declare interface LayoutProps {
+    /**
+     * Number of columns (1, 2, or 3).
+     *
+     * **Required.** Must match the exact number of `Layout.Column` children.
+     * The component will throw an error in development if there's a mismatch.
+     */
+    columns: ColumnCount;
+    /** Additional CSS classes */
+    className?: string;
+    /** Gap between columns (default: 4 = 16px) */
+    gap?: number;
+    /** Header title - displayed at the top of the layout */
+    title?: string;
+    /** Header actions - array of action components (e.g., buttons) displayed on the right side of the header.
+     * Layout and spacing are handled automatically. */
+    actions?: ReactNode[];
+    /** Child elements - must be exactly `columns` number of Layout.Column components */
+    children: ReactNode;
+}
+
 export { Link }
 
 declare type LoaderHandler = (args: LoaderFunctionArgs) => Promise<unknown> | unknown;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tailor-platform/app-shell",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "type": "module",
   "exports": {
     "./styles": "./dist/app-shell.css",
@@ -18,7 +18,6 @@
     "react-dom": ">= 19"
   },
   "dependencies": {
-    "@badgateway/oauth2-client": "^3.3.0",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-dialog": "^1.1.15",
@@ -26,7 +25,6 @@
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-navigation-menu": "^1.2.14",
     "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-select": "^2.1.6",
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tooltip": "^1.2.8",