@rovula/ui 0.1.0 → 0.1.1

package/src/components/PasswordInput/PasswordInput.stories.tsx

@@ -0,0 +1,111 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import PasswordInput from "./PasswordInput";
+
+const meta = {
+  title: "Components/PasswordInput",
+  component: PasswordInput,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-5 flex w-full bg-[rgb(var(--base-bg-2))]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof PasswordInput>;
+
+export default meta;
+
+export const Default = {
+  args: {
+    label: "Password",
+    placeholder: "Enter your password",
+    fullwidth: true,
+  },
+  render: (args) => (
+    <div className="flex flex-col gap-4 w-full max-w-md">
+      <PasswordInput id="1" size="lg" {...args} />
+      <PasswordInput id="2" size="md" {...args} />
+      <PasswordInput id="3" size="sm" {...args} />
+    </div>
+  ),
+} satisfies StoryObj;
+
+export const WithHelperText = {
+  args: {
+    label: "Password",
+    placeholder: "Enter your password",
+    helperText: "Must be at least 8 characters",
+    fullwidth: true,
+  },
+  render: (args) => (
+    <div className="w-full max-w-md">
+      <PasswordInput id="1" size="md" {...args} />
+    </div>
+  ),
+} satisfies StoryObj;
+
+export const WithError = {
+  args: {
+    label: "Password",
+    placeholder: "Enter your password",
+    error: true,
+    errorMessage: "Password is required",
+    fullwidth: true,
+  },
+  render: (args) => (
+    <div className="w-full max-w-md">
+      <PasswordInput id="1" size="md" {...args} />
+    </div>
+  ),
+} satisfies StoryObj;
+
+export const Disabled = {
+  args: {
+    label: "Password",
+    value: "secret123",
+    disabled: true,
+    fullwidth: true,
+  },
+  render: (args) => (
+    <div className="w-full max-w-md">
+      <PasswordInput id="1" size="md" {...args} />
+    </div>
+  ),
+} satisfies StoryObj;
+
+export const CustomIcons = {
+  args: {
+    label: "Password",
+    placeholder: "Enter your password",
+    fullwidth: true,
+  },
+  render: (args) => (
+    <div className="w-full max-w-md">
+      <PasswordInput
+        {...args}
+        id="1"
+        hideIcon={<span className="text-sm">👁</span>}
+        showIcon={<span className="text-sm">🙈</span>}
+      />
+    </div>
+  ),
+} satisfies StoryObj;
+
+export const WithoutToggle = {
+  args: {
+    label: "Password",
+    placeholder: "Enter your password",
+    showToggle: false,
+    fullwidth: true,
+  },
+  render: (args) => (
+    <div className="w-full max-w-md">
+      <PasswordInput id="1" size="md" {...args} />
+    </div>
+  ),
+} satisfies StoryObj;

package/src/components/PasswordInput/PasswordInput.tsx

@@ -0,0 +1,50 @@
+import React, { forwardRef, useImperativeHandle, useRef, useState } from "react";
+import TextInput, { InputProps } from "../TextInput/TextInput";
+import Icon from "../Icon/Icon";
+
+export type PasswordInputProps = Omit<InputProps, "type"> & {
+  /** Show toggle visibility button. Default: true */
+  showToggle?: boolean;
+  /** Icon when password is hidden (click to reveal). Default: Icon eye (lucide) */
+  hideIcon?: React.ReactNode;
+  /** Icon when password is visible (click to hide). Default: Icon eye-off (lucide) */
+  showIcon?: React.ReactNode;
+};
+
+export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
+  ({ showToggle = true, hasClearIcon = false, hideIcon, showIcon, endIcon, renderEndIcon, onClickEndIcon, ...props }, ref) => {
+    const inputRef = useRef<HTMLInputElement>(null);
+    const [visible, setVisible] = useState(false);
+
+    useImperativeHandle(ref, () => inputRef?.current as HTMLInputElement);
+
+    const handleToggleVisibility = () => {
+      if (props.disabled) return;
+      setVisible((v) => !v);
+      inputRef.current?.focus();
+      onClickEndIcon?.();
+    };
+
+    const toggleIcon = visible
+      ? showIcon ?? <Icon name="eye" type="lucide" size="inherit" className="size-full" aria-label="Hide password" />
+      : hideIcon ?? <Icon name="eye-closed" type="lucide" size="inherit" className="size-full" aria-label="Show password" />;
+
+    return (
+      <TextInput
+        iconMode="flat"
+        {...props}
+        ref={inputRef}
+        type={visible ? "text" : "password"}
+        hasClearIcon={hasClearIcon}
+        endIcon={showToggle ? toggleIcon : endIcon}
+        renderEndIcon={renderEndIcon}
+        onClickEndIcon={showToggle ? handleToggleVisibility : onClickEndIcon}
+        autoComplete={props.autoComplete ?? "current-password"}
+      />
+    );
+  }
+);
+
+PasswordInput.displayName = "PasswordInput";
+
+export default PasswordInput;

package/src/components/PasswordInput/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./PasswordInput";
+export type { PasswordInputProps } from "./PasswordInput";

package/src/icons/index.ts

@@ -1 +1,2 @@
 export * from "./iconRegistry";
+export { getLucideIconNames } from "./lucideIconNames";

package/src/icons/lucideIconNames.ts

@@ -0,0 +1,14 @@
+/**
+ * Get all available Lucide icon names (kebab-case).
+ * Use for autocomplete, validation, or browsing.
+ *
+ * @example
+ * const names = await getLucideIconNames();
+ * names.includes("eye-closed"); // true
+ */
+export async function getLucideIconNames(): Promise<string[]> {
+  const { default: dynamicIconImports } = await import(
+    "lucide-react/dynamicIconImports"
+  );
+  return Object.keys(dynamicIconImports);
+}

package/src/index.ts

@@ -6,6 +6,7 @@ import "./icons/iconConfig";
 export { default as Button } from "./components/Button/Button";
 export { default as TextInput } from "./components/TextInput/TextInput";
 export { default as MaskedTextInput } from "./components/MaskedTextInput";
+export { default as PasswordInput } from "./components/PasswordInput";
 export { NumberInput } from "./components/NumberInput/NumberInput";
 export { default as TextArea } from "./components/TextArea/TextArea";
 export { default as Text } from "./components/Text/Text";
@@ -15,6 +16,7 @@ export { Checkbox } from "./components/Checkbox/Checkbox";
 export { Label } from "./components/Label/Label";
 export { Input } from "./components/Input/Input";
 export { Navbar } from "./components/Navbar";
+export { Footer } from "./components/Footer";
 export { default as ActionButton } from "./components/ActionButton/ActionButton";
 export { Avatar, AvatarGroup } from "./components/Avatar";
 export { Collapsible } from "./components/Collapsible";
@@ -50,6 +52,7 @@ export * from "./components/RadioGroup/RadioGroup";
 // Export component types
 export type { ButtonProps } from "./components/Button/Button";
 export type { InputProps } from "./components/TextInput/TextInput";
+export type { PasswordInputProps } from "./components/PasswordInput/PasswordInput";
 export type {
   MaskedTextInputProps,
   MaskRule,
@@ -57,7 +60,8 @@ export type {
 export type { NumberInputProps } from "./components/NumberInput/NumberInput";
 export type { TextAreaProps } from "./components/TextArea/TextArea";
 export type { DropdownProps, Options } from "./components/Dropdown/Dropdown";
-export type { NavbarProps } from "./components/Navbar/Navbar";
+export type { NavbarProps, NavbarVariant } from "./components/Navbar/Navbar";
+export type { FooterProps, FooterVariant } from "./components/Footer/Footer";
 export type { AvatarProps } from "./components/Avatar/Avatar";
 export type { AvatarGroupProps } from "./components/Avatar/AvatarGroup";
 
@@ -75,6 +79,16 @@ export * from "./hooks";
 
 export { cn } from "./utils/cn";
 
+export {
+  srgbToHex,
+  getThemeColor,
+  getThemeColors,
+  THEME_COLOR_KEYS,
+  type ThemeColorKey,
+} from "./utils/colors";
+
+export { getLucideIconNames } from "./icons/lucideIconNames";
+
 // const mainPreset = require("./theme/main-preset");
 
 // export { mainPreset };

package/src/theme/themes/skyller/typography.css

@@ -3,28 +3,28 @@
   /* Typography                                                          */
   /* ------------------------------------------------------------------ */
 
-  --h1-family: "Poppins";
-  --h2-family: "Poppins";
-  --h3-family: "Poppins";
-  --h4-family: "Poppins";
-  --h5-family: "Poppins";
-  --h6-family: "Poppins";
-  --subtitle2-family: "Poppins";
-  --subtitle3-family: "Poppins";
-  --subtitle4-family: "Poppins";
-  --subtitle5-family: "Poppins";
-  --subtitle6-family: "Poppins";
-  --body1-family: "Poppins";
-  --body2-family: "Poppins";
-  --body3-family: "Poppins";
-  --body4-family: "Poppins";
-  --small1-family: "Poppins";
-  --small2-family: "Poppins";
-  --small3-family: "Poppins";
-  --small4-family: "Poppins";
-  --small5-family: "Poppins";
-  --label-label1-family: "Poppins";
-  --label-label2-family: "Poppins";
-  --button-button-l-family: "Poppins";
-  --button-button-ms-family: "Poppins";
+  --h1-family: "Montserrat";
+  --h2-family: "Montserrat";
+  --h3-family: "Montserrat";
+  --h4-family: "Montserrat";
+  --h5-family: "Montserrat";
+  --h6-family: "Montserrat";
+  --subtitle2-family: "Montserrat";
+  --subtitle3-family: "Montserrat";
+  --subtitle4-family: "Montserrat";
+  --subtitle5-family: "Montserrat";
+  --subtitle6-family: "Montserrat";
+  --body1-family: "Montserrat";
+  --body2-family: "Montserrat";
+  --body3-family: "Montserrat";
+  --body4-family: "Montserrat";
+  --small1-family: "Montserrat";
+  --small2-family: "Montserrat";
+  --small3-family: "Montserrat";
+  --small4-family: "Montserrat";
+  --small5-family: "Montserrat";
+  --label-label1-family: "Montserrat";
+  --label-label2-family: "Montserrat";
+  --button-button-l-family: "Montserrat";
+  --button-button-ms-family: "Montserrat";
 }

package/src/theme/tokens/baseline.css

@@ -8,5 +8,6 @@
 @import url(components/action-button.css);
 @import url(components/loading.css);
 @import url(components/navbar.css);
+@import url(components/footer.css);
 @import url(components/dropdown-menu.css);
 @import url(components/switch.css);

package/src/theme/tokens/components/footer.css

@@ -0,0 +1,9 @@
+:root {
+  /* Footer */
+  --footer-height: 58px;
+  --footer-height-simple: 48px;
+  --footer-bg-color: var(--state-color-primary-default);
+  --footer-text-color: var(--primary-foreground);
+  --footer-border-color: var(--primary-foreground);
+  --footer-gap: 16px;
+}

package/src/theme/tokens/components/navbar.css

@@ -1,8 +1,9 @@
 :root {
-    /* Navbar */
+  /* Navbar */
   --navbar-height: 58px;
   --navbar-bg-color: var(--primary-default);
   --navbar-text-color: var(--primary-foreground);
   --navbar-border-color: var(--primary-foreground);
   --navbar-gap: 16px;
+  --navbar-shadow-scrolled: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
 }

package/src/types/lucide-react.d.ts

@@ -0,0 +1,5 @@
+declare module "lucide-react/dynamicIconImports" {
+  type IconLoader = () => Promise<{ default: React.ComponentType<any> }>;
+  const dynamicIconImports: Record<string, IconLoader>;
+  export { dynamicIconImports as default };
+}