polaris-plus-ui 0.0.1 → 0.1.0

package/dist/index.css

@@ -0,0 +1,97 @@
+/* src/Flow-Components/Onboarding/Onboarding.css */
+:root {
+  --onboarding-bg: #f6f6f7;
+  --onboarding-primary: #008060;
+  --onboarding-border: #e1e3e5;
+  --onboarding-radius: 12px;
+}
+s-page {
+  background-color: var(--onboarding-bg);
+  min-height: 100vh;
+  display: block;
+}
+.onboarding-wrapper {
+  width: 100%;
+  padding-bottom: 60px;
+}
+.setup-info-text-wrapper {
+  margin-bottom: 8px;
+}
+.grid-container {
+  margin-top: 10px;
+}
+.wel-left-card,
+.slideshow-container {
+  height: 100%;
+}
+.left-card-content,
+.slideshow-inner {
+  background: white;
+  border-radius: var(--onboarding-radius);
+}
+.slideshow-inner {
+  border: 1px solid var(--onboarding-border);
+}
+.onboarding-sidebar-icon.large {
+  font-size: 60px;
+  margin-bottom: 16px;
+}
+.onboarding-sidebar-card-content [tone=success] {
+  font-weight: bold;
+}
+@media (max-width: 899px) {
+  .grid-container {
+    grid-template-columns: 1fr !important;
+    gap: 16px !important;
+  }
+}
+.pagination-bullet {
+  transition: all 0.3s ease;
+}
+.onboarding-field {
+  margin-bottom: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  text-align: left;
+}
+.onboarding-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: #202223;
+}
+.onboarding-input {
+  width: 100%;
+  padding: 12px;
+  font-size: 14px;
+  border: 1px solid #d1d3d5;
+  border-radius: 8px;
+  transition: border-color 0.2s;
+}
+.onboarding-input:focus {
+  outline: none;
+  border-color: var(--onboarding-primary);
+  box-shadow: 0 0 0 1px var(--onboarding-primary);
+}
+.onboarding-field-checkbox {
+  flex-direction: row;
+  align-items: center;
+}
+.onboarding-checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  cursor: pointer;
+  font-size: 14px;
+}
+.onboarding-checkbox {
+  width: 18px;
+  height: 18px;
+  cursor: pointer;
+}
+.onboarding-help-text {
+  font-size: 12px;
+  color: #6d7175;
+  margin-top: 4px;
+}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Flow-Components/Onboarding/Onboarding.css"],"sourcesContent":["/* Onboarding.css */\n:root {\n  --onboarding-bg: #f6f6f7;\n  --onboarding-primary: #008060;\n  --onboarding-border: #e1e3e5;\n  --onboarding-radius: 12px;\n}\n\n/* Page Wrapper */\ns-page {\n  background-color: var(--onboarding-bg);\n  min-height: 100vh;\n  display: block;\n}\n\n.onboarding-wrapper {\n  width: 100%;\n  padding-bottom: 60px;\n}\n\n.setup-info-text-wrapper {\n  margin-bottom: 8px;\n}\n\n/* Grid Layout */\n.grid-container {\n  margin-top: 10px;\n}\n\n.wel-left-card, \n.slideshow-container {\n  height: 100%;\n}\n\n/* Card Content Areas */\n.left-card-content,\n.slideshow-inner {\n  background: white;\n  border-radius: var(--onboarding-radius);\n}\n\n.slideshow-inner {\n    border: 1px solid var(--onboarding-border);\n}\n\n/* Sidebar Specifics */\n.onboarding-sidebar-icon.large {\n  font-size: 60px;\n  margin-bottom: 16px;\n}\n\n/* Features in Sidebar */\n.onboarding-sidebar-card-content [tone=\"success\"] {\n  font-weight: bold;\n}\n\n/* Mobile Responsiveness */\n@media (max-width: 899px) {\n  .grid-container {\n    grid-template-columns: 1fr !important;\n    gap: 16px !important;\n  }\n}\n\n/* Pagination Dots / Bullets */\n/* Note: Bullets are inline-styled in TSX for color flexibility, \n   but base transitions go here */\n.pagination-bullet {\n    transition: all 0.3s ease;\n}\n\n/* Form Fields */\n.onboarding-field {\n  margin-bottom: 24px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  text-align: left;\n}\n\n.onboarding-label {\n  font-size: 14px;\n  font-weight: 600;\n  color: #202223;\n}\n\n.onboarding-input {\n  width: 100%;\n  padding: 12px;\n  font-size: 14px;\n  border: 1px solid #d1d3d5;\n  border-radius: 8px;\n  transition: border-color 0.2s;\n}\n\n.onboarding-input:focus {\n  outline: none;\n  border-color: var(--onboarding-primary);\n  box-shadow: 0 0 0 1px var(--onboarding-primary);\n}\n\n.onboarding-field-checkbox {\n  flex-direction: row;\n  align-items: center;\n}\n\n.onboarding-checkbox-label {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  cursor: pointer;\n  font-size: 14px;\n}\n\n.onboarding-checkbox {\n  width: 18px;\n  height: 18px;\n  cursor: pointer;\n}\n\n.onboarding-help-text {\n  font-size: 12px;\n  color: #6d7175;\n  margin-top: 4px;\n}\n"],"mappings":";AACA;AACE,mBAAiB;AACjB,wBAAsB;AACtB,uBAAqB;AACrB,uBAAqB;AACvB;AAGA;AACE,oBAAkB,IAAI;AACtB,cAAY;AACZ,WAAS;AACX;AAEA,CAAC;AACC,SAAO;AACP,kBAAgB;AAClB;AAEA,CAAC;AACC,iBAAe;AACjB;AAGA,CAAC;AACC,cAAY;AACd;AAEA,CAAC;AACD,CAAC;AACC,UAAQ;AACV;AAGA,CAAC;AACD,CAAC;AACC,cAAY;AACZ,iBAAe,IAAI;AACrB;AAEA,CALC;AAMG,UAAQ,IAAI,MAAM,IAAI;AAC1B;AAGA,CAAC,uBAAuB,CAAC;AACvB,aAAW;AACX,iBAAe;AACjB;AAGA,CAAC,gCAAgC,CAAC;AAChC,eAAa;AACf;AAGA,QAAO,WAAY;AACjB,GAjCD;AAkCG,2BAAuB;AACvB,SAAK;AACP;AACF;AAKA,CAAC;AACG,cAAY,IAAI,KAAK;AACzB;AAGA,CAAC;AACC,iBAAe;AACf,WAAS;AACT,kBAAgB;AAChB,OAAK;AACL,cAAY;AACd;AAEA,CAAC;AACC,aAAW;AACX,eAAa;AACb,SAAO;AACT;AAEA,CAAC;AACC,SAAO;AACP,WAAS;AACT,aAAW;AACX,UAAQ,IAAI,MAAM;AAClB,iBAAe;AACf,cAAY,aAAa;AAC3B;AAEA,CATC,gBASgB;AACf,WAAS;AACT,gBAAc,IAAI;AAClB,cAAY,EAAE,EAAE,EAAE,IAAI,IAAI;AAC5B;AAEA,CAAC;AACC,kBAAgB;AAChB,eAAa;AACf;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,OAAK;AACL,UAAQ;AACR,aAAW;AACb;AAEA,CAAC;AACC,SAAO;AACP,UAAQ;AACR,UAAQ;AACV;AAEA,CAAC;AACC,aAAW;AACX,SAAO;AACP,cAAY;AACd;","names":[]}

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 interface AppPageProps {
     /** Page heading */
@@ -48,7 +48,93 @@ interface StatusCardsProps {
     details?: DetailItem[];
     meta?: string;
     action?: string;
+    onAction?: () => void;
 }
-declare function StatusCard({ heading, title, status, tone, description, details, meta, action, }: StatusCardsProps): react_jsx_runtime.JSX.Element;
+declare function StatusCard({ heading, title, status, tone, description, details, meta, action, onAction, }: StatusCardsProps): react_jsx_runtime.JSX.Element;
 
-export { AppPage, type AppPageProps, PageSection, type PageSectionProps, type PageSectionVariant, StatusCard, type StatusCardsProps, type StatusTone };
+interface TabsProps {
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    children: ReactNode;
+    className?: string;
+}
+declare function Tabs({ defaultValue, value, onValueChange, children }: TabsProps): react_jsx_runtime.JSX.Element;
+interface TabsListProps {
+    children: ReactNode;
+    gap?: string;
+}
+declare function TabsList({ children, gap }: TabsListProps): react_jsx_runtime.JSX.Element;
+interface TabsTriggerProps {
+    value: string;
+    children: ReactNode;
+    disabled?: boolean;
+}
+declare function TabsTrigger({ value, children, disabled }: TabsTriggerProps): react_jsx_runtime.JSX.Element;
+interface TabsContentProps {
+    value: string;
+    children: ReactNode;
+}
+declare function TabsContent({ value, children }: TabsContentProps): react_jsx_runtime.JSX.Element | null;
+
+interface OnboardingData {
+    [key: string]: any;
+}
+interface OnboardingStep {
+    id: string;
+    title: string;
+    subtitle?: string;
+    infoMessage?: string;
+    component?: React.ComponentType<{
+        data: OnboardingData;
+        updateData: (newData: Partial<OnboardingData>) => void;
+    }>;
+    children?: React.ReactNode;
+    validate?: (data: OnboardingData) => boolean;
+    sidebar?: {
+        icon?: React.ReactNode;
+        title: string;
+        description: string;
+        features?: string[];
+    };
+}
+interface OnboardingStepProps extends Omit<OnboardingStep, 'component'> {
+    children?: React.ReactNode;
+}
+interface OnboardingContextType {
+    currentStepIndex: number;
+    totalSteps: number;
+    data: OnboardingData;
+    updateData: (newData: Partial<OnboardingData>) => void;
+    nextStep: () => void;
+    prevStep: () => void;
+    isFirstStep: boolean;
+    isLastStep: boolean;
+    canProceed: boolean;
+}
+
+interface SetupSummaryProps {
+    data?: OnboardingData;
+    updateData?: (newData: Partial<OnboardingData>) => void;
+}
+declare const SetupSummary: React.FC<SetupSummaryProps>;
+
+interface OnboardingProps {
+    steps?: OnboardingStep[];
+    children?: React.ReactNode;
+    onFinish: (data: OnboardingData) => void;
+}
+declare const Step: React.FC<OnboardingStepProps>;
+declare const Onboarding: React.FC<OnboardingProps> & {
+    Step: typeof Step;
+    Summary: typeof SetupSummary;
+};
+
+declare const OnboardingProvider: React.FC<{
+    steps: OnboardingStep[];
+    children: React.ReactNode;
+    onFinish: (data: OnboardingData) => void;
+}>;
+declare const useOnboarding: () => OnboardingContextType;
+
+export { AppPage, type AppPageProps, Onboarding, type OnboardingContextType, type OnboardingData, type OnboardingProps, OnboardingProvider, type OnboardingStep, type OnboardingStepProps, PageSection, type PageSectionProps, type PageSectionVariant, SetupSummary, StatusCard, type StatusCardsProps, type StatusTone, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, useOnboarding };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 interface AppPageProps {
     /** Page heading */
@@ -48,7 +48,93 @@ interface StatusCardsProps {
     details?: DetailItem[];
     meta?: string;
     action?: string;
+    onAction?: () => void;
 }
-declare function StatusCard({ heading, title, status, tone, description, details, meta, action, }: StatusCardsProps): react_jsx_runtime.JSX.Element;
+declare function StatusCard({ heading, title, status, tone, description, details, meta, action, onAction, }: StatusCardsProps): react_jsx_runtime.JSX.Element;
 
-export { AppPage, type AppPageProps, PageSection, type PageSectionProps, type PageSectionVariant, StatusCard, type StatusCardsProps, type StatusTone };
+interface TabsProps {
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    children: ReactNode;
+    className?: string;
+}
+declare function Tabs({ defaultValue, value, onValueChange, children }: TabsProps): react_jsx_runtime.JSX.Element;
+interface TabsListProps {
+    children: ReactNode;
+    gap?: string;
+}
+declare function TabsList({ children, gap }: TabsListProps): react_jsx_runtime.JSX.Element;
+interface TabsTriggerProps {
+    value: string;
+    children: ReactNode;
+    disabled?: boolean;
+}
+declare function TabsTrigger({ value, children, disabled }: TabsTriggerProps): react_jsx_runtime.JSX.Element;
+interface TabsContentProps {
+    value: string;
+    children: ReactNode;
+}
+declare function TabsContent({ value, children }: TabsContentProps): react_jsx_runtime.JSX.Element | null;
+
+interface OnboardingData {
+    [key: string]: any;
+}
+interface OnboardingStep {
+    id: string;
+    title: string;
+    subtitle?: string;
+    infoMessage?: string;
+    component?: React.ComponentType<{
+        data: OnboardingData;
+        updateData: (newData: Partial<OnboardingData>) => void;
+    }>;
+    children?: React.ReactNode;
+    validate?: (data: OnboardingData) => boolean;
+    sidebar?: {
+        icon?: React.ReactNode;
+        title: string;
+        description: string;
+        features?: string[];
+    };
+}
+interface OnboardingStepProps extends Omit<OnboardingStep, 'component'> {
+    children?: React.ReactNode;
+}
+interface OnboardingContextType {
+    currentStepIndex: number;
+    totalSteps: number;
+    data: OnboardingData;
+    updateData: (newData: Partial<OnboardingData>) => void;
+    nextStep: () => void;
+    prevStep: () => void;
+    isFirstStep: boolean;
+    isLastStep: boolean;
+    canProceed: boolean;
+}
+
+interface SetupSummaryProps {
+    data?: OnboardingData;
+    updateData?: (newData: Partial<OnboardingData>) => void;
+}
+declare const SetupSummary: React.FC<SetupSummaryProps>;
+
+interface OnboardingProps {
+    steps?: OnboardingStep[];
+    children?: React.ReactNode;
+    onFinish: (data: OnboardingData) => void;
+}
+declare const Step: React.FC<OnboardingStepProps>;
+declare const Onboarding: React.FC<OnboardingProps> & {
+    Step: typeof Step;
+    Summary: typeof SetupSummary;
+};
+
+declare const OnboardingProvider: React.FC<{
+    steps: OnboardingStep[];
+    children: React.ReactNode;
+    onFinish: (data: OnboardingData) => void;
+}>;
+declare const useOnboarding: () => OnboardingContextType;
+
+export { AppPage, type AppPageProps, Onboarding, type OnboardingContextType, type OnboardingData, type OnboardingProps, OnboardingProvider, type OnboardingStep, type OnboardingStepProps, PageSection, type PageSectionProps, type PageSectionVariant, SetupSummary, StatusCard, type StatusCardsProps, type StatusTone, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, useOnboarding };